nota-bene.org > On the web > Are pixel font sizes still so bad?

Are pixel font sizes still so bad?

About this article

An article by Stéphane

Published on 21 January 2008

Short URL: http://nota-bene.org/200

15 comments

Absolute pixel fonts, according to the spec, should not prevent the user from increasing fonts if need be. Internet Explorer had had it wrong for many years. Now all browsers are almost on par. Isn’t it time we reconsidered our adamant rule about not using pixel fonts in our CSS?

A few years ago, Opera was the alien de rigueur. It seemed like it did nothing like the others.

I was so naive as to think there was a right and a wrong way to implement the W3C’s recommendations. Now that I’m older, I understand that many things aren’t explicit in them. You can implement so-called standards (recommendations, really) and end up displaying inconsistent things. It’s your job as a CSS developer to be as explicit as possible. Here are the two main differences that shocked me:

  • Opera did not give the "right" width to a floating parent containing floating children. Instead of adding all the children’s widths and computing the sum as the parent’s width, it would size the parent like the widest of its children. You had to guesstimate the total width and set it to the parent, otherwise down the drain went your design.
  • Opera did not increase or decrease the font size of a page: it zoomed the whole page, images included!

And then came the others

In the meantime, Mac OSX went out. Its display engine is based on OpenGL, and it enables Apple to include in their OS —hence in their browser— a native zooming feature, at no extra cost!

Adding this and that, now that time has passed we are beginning to find full-fledged zooming more natural. Look here (waves at the iPhone): a double-tap of a finger and BAM!, the whole content zooms in or out. Safari at work.

Internet Explorer 7 being the latest IE, it inherits some glitches from its predecessors, even though the IE team has done a tremendous effort to address many standards-related issues.

Case at hand: pixel-sized fonts. For many years, IE has dealt with pixel fonts as an absolutely-absolute measure, so you couldn’t zoom in or out like all the other browsers out there did. That’s sad, because the specification just says that although absolute measures are used, they should be relative to the viewport, to the screen’s DPI, etc.

Come to think of it, I’m sure IE does do some computing on font sizes. After all, I kind of remember reading that a few years ago Windows went from 72 dpi to 96 dpi. I suppose that internally IE is using a conversion rule that says «OK, the CSS is saying 12 pixels, which is an actual 16 pixels on my brand-new 96 dpi system. I’ll just add one third and tada, sleight of hand, it still will feel like a 12-pixel rule.» [1]

So, IE7 comes out, and for compatibility reasons (I suppose) this pixels-set-in-stone rule has endured. But there’s a new thing: IE7 zooms the whole page in and out, like Opera has done for so many years. True, there are still painful glitches [2].

Now we’re told that Firefox 3 is slowly coming to life and will be out this year. Guess what? This one, too, will have full-page zooming, not just font-size recomputing. Bear in mind that from the beginning Firefox did increase/decrease fonts, be they in pixels or ems or percents.

So, here we are today. The undercurrent is very clear: all major browsers now have the capability of forgetting painful em calculation. Zoom in and you’re done.

Zoomed stylesheets, right columns, etc.

Joe Clark refers to a study (Reddish et al.) that shows that when people use zooming tools, right columns are ignored. Hence the idea of zoomed stylesheets that not only increase font size but also linearise the content in only one column, the width of the browser window.

One point to keep in mind in the coming years, then: how on earth will people understand that fully-, automatically-zoomed content has content further than the right edge of the browser if we don’t keep on doing zoomed stylesheets (or, for that matter, if we don’t disable CSS altogether)?

So, what do we do now?

Hence my question: Are pixel font sizes still so bad? Do we still need to bother each and every CSS developer we encounter with all the maths involved?

What do you think? I’m beginning to ponder for good going back to using pixels in my CSS with no scruples whatsoever. Pixel-based CSS definitions are really becoming what they were originally thought out to be: relative.


Footnotes

[1Yeah, I know computers usually don’t say "OK" and "tada", but mine does. And it hums when it’s happy, too. There, happy?

[2Are you doing faux columns using an image background on the body? Forget it — for the moment, hopefully


Comments

    • 21 January 2008

    Attention :
    * em is relative to the font size (of the parent if it’s for the css property font-size)
    * px is relative to the viewing device.

    So technically, I don’t think IE was wrong. And em still has some advantages over px, for instance to describe widths and heights relatives to the used font.

    Reply to Julien

    • 21 January 2008
    • in reply to Julien

    While IE6 will have such a market share, it will be important to use em on font-size.

    Reply to Olivier G.

  • True, but IE6’s share has dropped very rapidly. Say we want to plan for the beginning of 2008 for the sake of discussion?

    Reply to Stéphane

    • 21 January 2008

    Better that "not wrong", I also think that IE behaviour (zoom relative sized text and not fixed sized text) was the good one.

    Anyway, to answer Stephane:

    Stephane, text zooming is only a side effect of em sizes. In your article you miss the main point of em size: letting the user choose the correct size at start, without zooming.

    With em, the user can tweak is configuration and choose something adapted to his abilities and preferences. With pixels, the author choose the size for you (why ? on what basis ?)

    The ability to zoom text is only a side effect. You should not have to zoom a page that is correctly designed (unless you have a very big disability).

    Sure, page zoom is great, it is also a good workaround for text size problems, but better would be to not have a problem in the first place: to let user have a text in the size they want.. from the start.

    http://eric.daspet.name

    Reply to Eric

    • 22 January 2008

    I never care about pixel font size or em font size... it’s irrelevent.

    The point is:

    1 - What append to my design if font size change ?
    I think my design must adapt to it.

    2 - What about accesibility ?
    Users that realy need accessibility help, should use (or already use) a specific software which is more powerfull and efficient than a poor "browser-zoom-ability"

    Thanks for all developpers that implement this feature in there browser. But is it realy usefull ?

    Reply to Jeremie

    • 22 January 2008
    • in reply to Jeremie

    Ah, the old accessibility-as-a-thing-for-disabled-people thing again.

    Case at hand: me using a 1024x768 laptop on the train, doing my tech watch. I push fonts to 120% on this instance only, because reading comfort is not what it is at the office (screen shifts left and right, sun comes on and off, lighting on the train wagon is not so good, etc).

    I zoom fonts, I don’t zoom designs, by the way.

    Reply to Stéphane

  • Yep, that’s it.

    But much more than the browsers zoom abilities, users personal style sheet are a good way to implement accessibilities requirements for each users. This allow you to overload any CSS rules. It’s not a well known feature but it’s damned more powerfull than simple zooming.

    Zoom abilities are just to limited : if only font are resizing, design suffer (more or less, depends on your webdesign skills); if it include image (and other design stuff), there is no way to choose the zoom ratio to applie!

    By the way, I still don’t care about font size units wink

    Reply to Jeremie

    • 23 January 2008
    • in reply to Jeremie

    I’m brewing in my head a long article about hte false assumption that disabled is not equal to expert.

    I think you’ve given me the impetus smile

    Reply to Stéphane

  • I began with pixels and switched to ems whenever it was possible. Wow how cool is elastic design. I was so proud of beeing on the right way to standardiness and accessibility. How stupid I was.
    Lately, Firefox 3 - the latest beta - seems to have choosen to zoom the entire design à la Opera way.
    No more font sizing. Look likes browser manufacturers want to deal with zooming and free the developers from the maths.

    Reply to Frank Taillandier

  • Looks like browser manufacturers want to deal with zooming and free the developers from the maths.

    Yes, my point exactly.

    Reply to Stéphane

  • but IE6’s share has dropped very rapidly.

    In most of the countries, but I redirect you to a post Armony made a few months ago about Web Standards in China: 95% for IE6!!!

    Your question really depends on the location of your main target, or how you effectively plan to be accessible.

    And yeah, that’s killing me everyday.

    Reply to an.archi

    • 3 February 2010

    I find myself zooming in on many pages I visit. So yes, pixel font sizes are bad. I have set up my browser to use a comfortable font size, and along come all these web designers that think that a 9px font will look good on my 120dpi display. No it doesn’t. What’s wrong with starting with the default font size, and adapt your design around that? I don’t care what units you use in your design, just don’t change the default font size.

    Reply to Cris.

  • Tim

    • 23 February 2010

    My beef with people having the ability to use their browser to zoom in on text makes what we do pointless at times. Think about this, when you read a magazine, the designer has already picked out the font size you’re going to read. If you can’t read it, either you grab for a magnifying glass or your tough out of luck. This is how it should be in web design. Our font sizes should be set to how they fit within the design. We are the designers, we know what looks and works best within the design. But then to have our readers go and mess it all up with their zooming browser settings is beyond frustrating to our initial design in the first place. What browser developers should do, is literally rather than allowing a zoom on the whole page where it screws up the design and sets fonts off kilter, they should literally create a magnifying tool where you (the reader) can drag and hover over text, a lot like the new generation iPhone’s have. Then you’re leaving the design alone and viewing only the contents you need to. Problem solved!

    Reply to Tim

    • 26 April 2010

    I have to disappoint you, no one cares about how a page looks, but only about its functionality. The "Creator" is the only one who opens his own page just to admire it.
    Fortunately there are some tools that can help us to disable those "pixel perfect" fantasies and see the pages as we want, with our preferred fonts and colors. If they don’t work, to bad. For them... I am not willing to give a second chance to someone who doesn’t respect my rights.

    Reply to reader

    • 29 April 2010
    • in reply to reader

    Obviously you’v never worked with marketers or sales managers... smile

    Reply to Stéphane

Who are you?
Your post
  • To create paragraphs, simply leave blank lines. All outgoing links will feature an attribute rel="nofollow". Please do not spam.

This is the Desktop version Show the Mobile version