Typography: Subpixel Font Rendering
If you are writing your own CSS (Cascading Style Sheets), pay attention to subpixel rendering: Use pixels, not points!
Links á la Mode TECH inside
Hi, if you love typography, you are probably also very much concerned about type and how it renders on screen.
What is Subpixel Font Rendering?
Previously, Web browsers rounded the font size and kerning to the nearest whole pixel. So if you specified for example a font-size: 14pt in your CSS file, you got a 19 pixel font.
This changed drastically with Internet Explorer 9 if the page is rendered in IE9 Standards Mode (hit F12 to launch the developer tools and check this for your site). In IE9 you get exactly what you ask for. In this case a 18.67 pixel font, which looks a bit smaller than in browsers without subpixel rendering. Firefox under Windows 7 also uses subpixel rendering by the way.
Subpixel Widths
Subpixel font rendering also affects kerning and hence the width of your text. The next screenshot demonstrates the difference. Both paragraphs using 12px fonts.
Source: IE Blog
Generally subpixel rendering makes text look a bit blurry and fainter (obviously also due to another ClearType algorithm) but produces prettier and more accurate type, and does not alter the layout when zooming a page, which is the reason why it got implemented, to better work with multi-touch devices.
Subpixel Rendering Best Practice
Use pixels, not points!
Points are for print and defined as 72 dots per inch (dpi). Pixels by default as 96 dpi, which is the reason for the fractional font sizes when converted. Avoid also relative font sizes specified in em, ex or pecentages to get more predictable results among browsers.
I have also updated my CSS recently and switched from em to pixels because of this.
Links á la Mode TECH
The Most Relevant Tech
Edited by Vyque of Fasshonaburu
If you’re a fashion blogger, or even just an avid reader of fashion blogs, you’re probably already on the technology savvy side. But, while you may be more tech-telligent than the average person, it’s important to never get complacent! You constantly read style and fashion blogs for inspiration and news, but how much time do you devote to the latest new and innovations in technology?
It may be near impossible to stay on the very top of two separate industries, (three if your full-time job is unrelated!!!), but IFB is here to help! Always the most relevant information for the fashion, hopefully ChicGeek will not only keep you up-to-date on technology, but help you constantly improve your blog.
LINKS á la Mode: TECH – MAY 24TH
- Designed by Ann
Why (fashion) bloggers should love bloglovin - Divas & Dorks
iPhone/iPad: Your Worst Enemy? - Fasshonaburu
The Future is Now – Finally a Wearable Light-Up Dress - IFB
Which Blogging Platform is Right for You - Mimosas in Bed
Style & The City: France's First Street Style Blog Gets Their Own iPhone/iPad App - Miss Viki
The Rise of the Bloggers - Styling You
10 tips for PRs Wanting to Work with Bloggers
More Links á la Mode TECH
The Rise Of The Bloggers | Bing | Facebook Analytics
Comments ❤ ❤ ❤ ❤
Add ❤ comment:
Share your love, thoughts and secrets, leave a comment:
Ross Angus on 2011-05-26 16:19
What about accessibility? http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-relative-units
Viki Secrets on 2011-05-26 16:49
Good point :) Also believed in relative units, but this changed recently with the availability of browsers, which can elegantly zoom pixel-sized fonts and images such as the iPhone/iPad, IE9, Opera, Firefox, Chrome etc. Zooming got so much better now than it was in 1999, when the W3C Recommendation was first released.
Jackie on 2011-06-01 20:59
You make an interesting point although you are alienating the mobile and FF segments of your audience. The advantage of using EM vs PIXELS is the scalability of the former as opposed to the definite size of the latter.
Viki Secrets on 2011-06-02 14:42
@Jackie: Thanks to the iPhone & Co. all modern browsers (desktop and mobile) can now scale pages, regardless of whether they use em or pixel based layouts. That was not the case some years ago and is an interesting development in my opinion.