Typography:
Subpixel Font Rendering

2011-05-25 17:47 | Comments: 4

If you are writing your own CSS (Cascading Style Sheets), pay attention to subpixel rendering: Use pixels, not points!

Links á la Mode TECH inside

IE9 Subpixel Font Rendering vs. IE8 Whole Pixel Rendering

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

IE9 Sub-pixel Widths vs. IE8 Whole Pixel Widths

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

Links a la Mode TECH Week 21 2011

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 ❤ ❤ ❤ ❤

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.

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.

@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.

Add ❤ comment:

Share your love, thoughts and secrets, leave a comment: