Setting font size in pixels

A long, long time ago, Jeffrey Zeldman said Give me pixels or give me death. Unfortunately the A List Apart article that quote is taken from seems to have been removed or had its URL changed. Joshua Kendall wrote in to let me know that the article is still online: Fear of Style Sheets. Anyway, the point Jeffrey was making is that using pixels was (and still is) the only way you can specify font size on the web with any kind of certainty. All other units will result in text that varies in size depending on a lot of factors.

So why are we not using pixels to specify font size? Mainly because of Internet Explorer for Windows. Many web users (including myself) find the 9px text size that was so common at the end of last century impossible or very uncomfortable to read. All modern browsers allow the user to easily increase (or decrease, if that should be needed) text size. Except for one. Internet Explorer for Windows is the only browser that does not let the user change the size of text that has a font size set in pixels.

That leads me to Robert Nyman’s post Web browser vendors are also responsible for accessibility. Very true. There are many accessibility and usability issues that web browser vendors can help us with, and text size is one of them.

Wouldn’t it be nice if all web browsers could agree to allow the user to resize text, no matter which unit is used to specify its size? No more guessing, calculating, and hoping to avoid triggering rounding errors. No more font-size: 76% and font-size: 0.94em.

To avoid causing readability issues for those of us who need larger text, browsers should of course only use the number of pixels specified in the CSS unless the browser’s default text size has been changed. Designers and developers could still use ems for other measurements, like column widths, padding, and margin, to keep line length and whitespace within reason.

I’ll admit that I haven’t though about this in depth, but it seems like a good idea. Does anyone see any potential problems that would make using pixels for text size a bad idea even if all browsers allowed their users to resize text specified in pixels?

Unfortunately, I am not expecting the release of Internet Explorer 7 to fix this bug. I can’t find a reference for it right now, but I have a vague memory of reading that Microsoft for some reason beyond comprehension doesn’t consider Internet Explorer’s refusal to resize text set in pixels a bug. I’m not particularly interested in buying a separate license of Windows XP just to test this in the recently released IE7 Beta 2 Preview, so I can’t confirm if it behaves the same way as older versions of IE/Win.

Unless I’m wrong about that (which I do hope I am), web designers and developers will have to keep fighting rounding errors, using odd values, and always keep inheritance in mind when specifying font size for the websites we create.

Posted on February 1, 2006 in Accessibility, Browsers, CSS, Typography

Comments

  1. “All modern browsers allow the user to easily increase …text size. Except for one.”

    Heh, I’d leave of the “except for one” bit, since I don’t consider a five-year-old browser to be modern. :)

  2. The pixel is still relative to the resolution of the viewing device even if you can scale correctly so there would still be issues but less of them.

  3. Joe Clark at @media 2005:

    Today, I want everyone in the room to take a vow never to say anything like that ever again. Do not tell people, or tell yourself, or even think that there’s something inherently wrong with pixel-based fonts. What there’s something inherently wrong with is Internet Explorer for Windows

  4. February 1, 2006 by Seb Duggan

    IE7 Beta 2 retains the old IE handling of pixel-sized text…

  5. February 1, 2006 by Mike L

    Alongside the old text size options it has a new page zoom function which scales the whole page rather than just the text.

  6. February 1, 2006 by Michael Hessling

    Yes, Seb and Mike L are right. Pixels are not resized, but the page zoom, including images, is pretty darn effective.

  7. IE 7 Beta 2 preview does include a page zoom feature so that helps a little, though it’s still not text resize.

  8. February 1, 2006 by Jim Reid

    Using pixels would make it a bit more difficult should you decide that all font sizes in your stylesheet needed to be larger or smaller. Where as a percentage set in the body you only have to change once. Just a thought.

  9. I personally fancy Opera’s “zoom” function, that is presented instead of increasing/decreasing text size; it allows text resizing, not only in text sizes expressed in pixels, but also in layouts that haven’t been designed and/or test to be “text resize proof” (without breaking them, that is).

    Here’s a good example of how browsers can give their contribute to accessibility.

  10. I don’t agree with this designer-centric obsession of using pixels to set font sizes. The only reason I can see for doing it is if you are trying to lock your users into a tightly-controlled page design, which goes against rules of usability and accessiblity in any case.

    Also, it doesn’t really make sense to have “resizable pixels”. You’re suggesting that 100 pixels of text does not need to equal 100 pixels of image. With that in mind, I think that the Page Zoom option is probably the way to go.

  11. Like you’ve pointed out the key is the consistency among browsers. I honestly don’t care if “px” is an absolute unit or not. As long as all major browsers scale them, and scale them consistently, I have no problem using them as default unit of font size.

  12. I wasn’t aware there were exact rules for usability and accessibility. If using pixels on fonts alleviates the stress and strain on the web person so they can focus on real usability and accessibility issues then what is the problem?

  13. If you want px for fonts, use px in your standard css file. Make IE get another css file with conditional comments and use em or percent. Wouldn’t that do the trick?

  14. Simon, I think you’re confusing the functionality of font scaling.

    Font scaling isn’t a redefining of the font size (i.e. it doesn’t redefine what an “Em” or what “100%” is for the user). Rather, it over-rides the default text size and replaces it with a larger or smaller size. We know this because pixels aren’t the only well-defined font size - there’s also the point. A point is a point is a point, just like a pixel is a pixel is a pixel. Therefore, when a user decides that 12pt is too small, they aren’t redefining what 12pt is, but their over-riding the default of 12pt. Same thing with pixels or any other measurement.

    Usability and accessibility is all about giving the user flexibility to over-ride designer-preferred defaults, not to make a designer’s tools ambiguous.

  15. I used to swear by Owen Briggs method for text sizing (font-size: 76% in BODY, ems everywhere else). But when I switched to Mac about half a year ago I discovered that it wasn’t as foolproof as I’d thought. For some reason Firefox on OS X showed my text at smaller sizes than intended in some cases. Stupid rounding errors. Since then I’ve switched back to pixels and now I serve IE font-sizes in ems via a special, for IE only, stylesheet instead — just like Jens suggests. Works great.

  16. Opera got the zooming thing right. And IE7 made the right decision by including zooming in addition to text resizing. If you’re resizing the text size to make it easier to read, you’re just as likely to have issues reading any text in an image. Zooming, in my opinion, is a better solution for accessibility than just increasing the size of the text.

    IE7 supports zoom using CTRL-MouseScroll (similar to Firefox). Once IE7 gains traction, I don’t see why setting font sizes using pixels will be a bad thing. If it is, the W3C needs to remove it as a possible measurement from the CSS spec.

  17. I also use the Owen Briggs method however with firefox 1.5 for mac i find the font size to be universally larger!

    Although not quite as consistent i figure that FireFox users are more likely to figure out something like changing the font-size if they wish than your average IE user. (Lots of people don’t even know you can change the size).

    So for now i’ll be sticking with the 76% body and ems. I waste enough time fixing bugs in IE as it is.

  18. February 1, 2006 by Charlie Fiskeaux II

    Internet Explorer isn’t quite as “behind the times” as a lot of developers make it out to be. Granted, it’s not the most modern browser out there, but if a person really needs to make text larger that a website has specified in pixels, all that person has to do is go under the Accessibility dialog in IE’s internet options and check “Ignore font sizes specified on Web pages” and then everything will be the size they want it to be. I think it’s good as a developer to have a method of forcing fonts to a specific pixel size, regardless of browswer. If you want to force a specific size, use pixels, if you don’t , then use a different unit of measurement, it’s that simple.

  19. When using new zoom feature in IE beta 2 whole page is scaling and most of the time adds horisontal scroll bar. So, for this moment it’s pretty much useless. Opera did here much better job scaling pages without giving scroll bar and also much faster.

  20. It was in the second comment, but nobody else has mentioned it. Take some 10 pixel text and look at it on an 800x600 screen, typical for a 15-inch monitor. It looks very readable. Now look at it on a 1600x1200 screen, a common resolution for a 21-inch screen, and it’s considerably smaller.

    Also there’s the problem somebody mentioned above on a Mac. The DPI on a Macintosh is typically 72 (IE 5 allowed you to change it, not sure about Safari now,) while it’s 96 on Windows. Although that may just be pre-OS X knowledge I’ve been carrying around with me for years!

    I find the best practice is to use a keyword on the html or body tag (normal, small, etc) and use percentages from there. But I’m not a web designer, just a web developer…

  21. February 1, 2006 by Diane

    but if a person really needs to make text larger that a website has specified in pixels, all that person has to do is go under the Accessibility dialog in IE’s internet options and check “Ignore font sizes specified on Web pages” and then everything will be the size they want it to be.

    That’s all well and good, Charlie, but in my many years in tech support and watching the way people work and use their browsers (and other software), the majority of web users aren’t going to be aware of that option and won’t know to use it. I’m always amazed at the way many people actually use, or rather UNDER-use, the many features of any browser.

    This is especially true for older folks who use the web and would be very likely to want to increase the size of text on a web page. The senior citizen web user demographic is growing significantly but grandma and grandpa are not likely to be very computer saavy and go digging into their browser options.

    I actually prefer to size my text in pixels, but I’ve had to learn NOT to BECAUSE of IE’s resizing issues. It’s a pain in the patoot to say the least.

  22. I think the ideal situation would be that px where in fact fixed and em zoomable.

    Zoomable pixels are contrary to how the rest of the page’s meassurements, what makes font pixels different from ordinary pixels?

    Don’t get me wrong, I know the reasons for zooming, that many developers don’t know about accessibility and make text hard to read, but when working with zoomable layouts it would really help to be able to fix a line-height sometimes. I think that’s what we should strive for, tell people about accessibility, not make CSS un-intuitive and harder to work with.

  23. I don’t know what it was, but in 2000, 9px arial just looked cool. Gosh, what were we thinking?!

    Boy is it great that “Big Dumb, beautiful design is in” - I think Scrivens said that.

  24. why not use pixels in your default stylesheet and overwrite this in your IE specific stylesheet with a percentage or small/medium/etc.

    The only problem I can think of is handhelds. A 14px fontsize on your handheld (PDA or cell) will probably be to large. This because too little text can fit on such a small screen which will require more scrolling and makes the page less ‘scanable’.

  25. Opera’s zoom feature is by far the best implementation of handling user preference for text size.

    And I agree it would be much easier if all browsers behaved the same, but playing Devil’s Advocate for a second, I’d quite like a means to absolutely fix a font size if I so choose. A CSS rule along the lines of font-size:12px fixed; would be nice :)

  26. Does anyone see any potential problems that would make using pixels for text size a bad idea even if all browsers allowed their users to resize text specified in pixels?

    Does anyone see any potential problems that would make using the font size I am happy with a bad idea, in any circumstance ever?

    Seriously. I have a perfectly reasonable font size. Why do people insist on messing with it? It causes very obvious problems, but what is gained?

    Leave the base font size at 100%, make reasonable increments and decrements for headings and fine-print, and you neatly sidestep every font sizing problem ever, and it Just Works - for everybody. No Ctrl-+, no browser refusing to resize, no accessibility problems… why is there such resistance to common sense?

    Because the browser’s default font size is too big? Fire up, say, Word, or your email application and take a look at the font size in those applications. It’ll be about the same as the default font size for your browser too. So unless you go to the trouble of reconfiguring your email client and word processor to get rid of those awful, evil, terrorist-supporting medium-sized fonts, I suggest that maybe, just maybe the default font size is perfectly reasonable.

  27. Funny, today I changed my CSS body{} from % to px, because some users where complaining about “very small text sizes”. Short term: use px size, but that’s kinda against my own vision, so i plan a “Why i my text size so small”-FAQ :-)…

  28. Perhaps I’m being obtuse here, but why would you think you could resize pixels?! Pixels are not relative, they are absolute. 9 pixels are 9 pixels. They should not become 18 pixels because the user doubled their display size. Why would a designer bother specifying an absolute unit like that?

    Ems, Exs and other relative units are more suited for what you are talking about. Imho

  29. February 2, 2006 by Brownspank

    Doesn’t the following line do the trick?

    body { font-size: 62.5% } /* 1px = 0.1em */

    Thus allowing you to use ems easily.

  30. 20: Quick note on the Mac OS X browser question - as a general rule, modern Mac OS X browsers now default to 16px, 96dpi serif as the default font. Even the 2-day-old SeaMonkey! :-P
  31. Best comment in this thread:

    When using new zoom feature in IE beta 2 whole page is scaling and most of the time adds horisontal scroll bar. So, for this moment it’s pretty much useless. Opera did here much better job scaling pages without giving scroll bar and also much faster.

    How to screw up a new browser. Don’t allow users to increase absolute text sizes (pixels) and make those who already have difficulty reading a page scroll horizontally to view the entire page.

    Maybe we all could get rich shorting Microsoft stock…

  32. I think the real problem is that we need some sort of new CSS property … something like base-font-size: 10px.

    So if you had a base-font-size: 10px, the browser would say “OK, I’d normally give you 10px if the user didn’t have any special font preference, but this user has specified that he likes the minimum setting of 16px, so I’ll honor that value instead, and any em values specified in this element’s children will scale happily.”

    But if you had a font-size: 10px, the browser would say “OK, 10px it is. Set in stone. No ifs, ands, or buts. And by the way, any em values specified in this element’s children will be based on 10px, too, so I don’t know why you even bothered to use ems.”

    That way, Firefox wouldn’t be inconsistent with how it handles “px”, which is really “px” for everything but text, in which it’s “px unless you press CTRL++”.

    This makes sense to me, but I also need sleep. Anyone? Am I completely insane?

  33. I don’t like the whole concept of pixel based font sizes. Designers that wish to use them tend to give me the impression that they’re aiming for pixel perfection, and such authors usually fail to realise that every user could potentially be looking with different settings.

    For example, consider a user that has changed default font-size in his browser from the default 16px to 20px (or higher). Then, when he visits some sites that have specified the font sizes as follows:

    1. body { font-size: 13px; }
    2. body { font-size: small; }
    3. body { font-size: .8125em; }
    4. body { font-size: 81.25%; }

    At the default browser setting of 16px font-size (at least in Firefox), all of these will typically result in a font size of 13px. However, for the user that has increased the default font-size, the site with the size specified in pixels will be 13px, regardless of the settings; whereas all of the other sites will be automatically increased.

    Of course, it is possible to increase the font-size while viewing the page, but why does the author need such precise control over font sizes? Why inconvenience the user by making them manually increase the font-size when they visit your site and the decrease it again when they leave?

    It could very well be a bug in Firefox that prevents it from automatically scaling pixel based font-sizes based on the font-size preference; I don’t know. But, regardless of whether it’s a bug or not, it’s an unnecessary risk and completely unnecessary grab for control over the user’s browser. Do not use pixel font sizes, even if IE7 adds support for scaling them.

    Personally, I strongly recommend and make use of the font-size keywords and rarely use anything below ‘small’. Occasionally, I’ll use ems when I need a little more fine grained suggestive power, but not very often.

  34. Nick wrote:

    I think the real problem is that we need some sort of new CSS property … something like base-font-size: 10px.

    There has been some discussion of ‘rem’ unit on www-style, which stands for something like root-element em unit, which gives all the power of the ‘em’ unit without all the nasty compounding effects. Thus, if you specify:

    li { font-size: .9rem; }

    Then, the font size will be the same even for nesed lists, unlike the result you get with ‘em’ units.

  35. All this designer fad with font-size: 76% and the like is wrong. The assumption should be that the user has set (or agrees with the browser default that) the default browser font as the size they are comfortable reading.

    Any deviation from that by the page author needs to be very carefully considered. 76% for body type is basically requesting a size just three-quarters of what the user is telling you they’re comfortable with. That’s arrogance: most users are not savvy enough to over-ride this.

    I find the base font size used on this page way too small; I doubt you’ll find anyone that thinks it’s too big. Sure, I can resize it up, but why should you make me do that? Design your site to work with 100% font size, and no-one can complain. If the user wants to read microfonts, they can set their browser up appropriately.

  36. February 2, 2006 by Mikko

    What i think would solve everything once and for all would be if all browsers dropped the font resize feature. That would give us developers a fixed unit to work with. If it´s pixels or ems dont matter they are all the same. But then text size would be sized relative to your design/layout…

    In print we use 1pt = 0.35 something mm. We dont use any other unit just because we make a larger print.

    Just include the opera/ie7 zoom function in every browser and get the textzoom out the window… So now i said it. I´ll be quiet now. :)

  37. February 2, 2006 by Michaël Guitton

    In response to Houser in #28, pixels may not be the perfect solution but they aren’t an absolute unit either…

    Good news :-) Everyone may read Jeffrey’s original article here.

  38. I really like the idea of a “rem” unit like Lachlan mentioned. That would be ideal, for me, because I’d rather think of font-sizes in relation to one base size, rather than in relation to the font size of their container. It just gets too complicated.

  39. It’s a shame when no single option works for everyone.

    There’s always the style sheet switcher

  40. This debate has been raging forever and I have yet to be convinced of anything, but I am a “designer” so I do prefer pixels and I dont’ think there’s anything wrong with putting importance on the overall polished look of your site - and font sizes have a lot to do with that.

    35 said:

    The assumption should be that the user has set (or agrees with the browser default that) the default browser font as the size they are comfortable reading. … 76% for body type is basically requesting a size just three-quarters of what the user is telling you they’re comfortable with. That’s arrogance: most users are not savvy enough to over-ride this.

    First he says that the assumption is that users agree with the default browser size if they haven’t changed it and then he goes on to say that most users are not savvy enough to over-ride font sizes they don’t like.

    I personally think that most folks that may not like the large text size used in a certain site because the designer was using 100% (and therefore the default text size of the browser) they would have no idea that it had anything to do with browser defaults. They would just think that the text size at that site was a little big and they would not know how to change that.

    However, if someone really has a difficult time reading many sites I would think they might investigate what to do about that. This investigation could quickly lead them to any other modern browser besides ie and they would be good to go.

  41. I’ve struggled on occasion with what choice to use and discovered, like most design techniques it varies by the site. For my personal site I set body {font-size: 16px; } and then adjust as needed throughout the stylesheet using ems. It’s not perfect but I found it a decent compromise.

  42. February 4, 2006 by Richard

    One of the posters above has a point. Currently if you want elements (text or other) to be resizable, you specify them in em’s. If you don’t want them to be resizable, you specify them in pixels (at least in IE). Making pixel text resizable breaks that consistency.

    That’s why IE has this particular point right (though not much else). Either you don’t scale up anything specified in pixels (IE 6), or you scale up everything specified in pixels (IE 7 beta 2).

  43. February 4, 2006 by Fabian

    I second Richard

  44. February 4, 2006 by Roger Johansson (Author comment)

    Sorry for not taking part in this discussion - I have no proper Internet access at home since my move.

    First of all, one thing that is clear to me regarding font size is that there is no way to please everybody. No matter how you specify (or don’t specify) font size, it will break the expectations of some people.

    Second, the main reason I would like to use pixels is not to gain pixel perfect control - that is impossible. What it would do is let me stop thinking about inheritance and make it easier to say things like “I want everything in this sidebar here, except this block of text, to have slightly smaller text than the rest of the page”. I hope you get the idea.

    I do not like the idea of browsers not resizing pixels when the user asks for it. That control should not be taken away from the user. So in my opinion, IE/Win gets it wrong (IE/Mac does/did it right).

  45. Why don’t they include more fonts for webpages.It seems the fonts don’t work really good in IE7 beta2 like in firefox.I think it should let users choose wich fonts to use for every website accessed,that is the choosen fonts can override website specified fonts no matter what webpage fonts or plain text fonts.

  46. February 6, 2006 by juaron

    The method referred to by Brownspank

    Doesn’t the following line do the trick? body { font-size: 62.5% } /* 1px = 0.1em */ Thus allowing you to use ems easily.

    has always seemed the easiest to me (since de body font-size now becomes 10px you can scale everything else using ems without having to make difficult calculations (11px = 1.1em, 12px = 1.2em, etc)), but in some cases some form of inheritance does seem to happen. I haven’t exactly figured out when exactly though. Besides, I don’t know if this wouldn’t cause any trouble in FF/mac.

  47. I love it when when there’s font-size: 62.5% on body. Gives me really readable text throughout a page since I always set ‘minimum font size = 14px’ in Firefox and Opera. No problem - just large text at my end.

    I think pixels can be used in cases where inheritance create problems. Generally I’ll use ‘em’ and ‘%’, start large on body (at least 100%), and scale down further in if I want smaller text.

  48. February 6, 2006 by DrDoc

    There are ways of using pixels, but allowing them to be resized according to user preferences in Internet Explorer (i.e. through “View > Text Size”). And, it does not break your layout either.

    How to: Get pixel fonts to resize in IE

  49. February 7, 2006 by Jason Berry

    I’ve been using:

    body { font-size: 100%; }

    wrapper {
    font-size: 0.75em; /* default font size for your site */
    

    }

    … with success. Since I have some sort of wrapper/container block on 99.9% of the site I develop on this has worked well for me, and seems to render fairly damn consistently across browsers/platforms.

  50. Two things:

    1) Any expectation from the part of the designer as to the actual font size (and face!) that will reach the visitor, will be proved wrong eventually. The only sensible thing we can do is to make sure that the default is decent, and (equally important!) that the relative ratio between the page elements (fonts, spacings, margins) stays the same.

    Let the people (in fact, assume they will) change the font size to their liking. As long as proportions are kept, who are we to force anything on them?

    There’s still the issue of designs which embed images. To this, the only solution I can see for now is using SVG’s and specifying their size in ems or another relative unit. Which, of course, is utopical, given the state of SVG support.

    2) I wish that browsers also provided a maximum font size in their preferences. Or, even better, I dream of a browser that could determine the smallest and biggest font on any one page, match them to your chosen minimum and maximum sizes, and scale everything in between accordingly. Now that would be something.

  51. February 9, 2006 by desade

    Pixels must be absolute. Like a previous poster said, it’s wrong to distinguish font pixels from other pixels. Therefore, pixel-based font sizes should not rescale when changing the font size in a browser (they should however rescale when zooming.) Because of this, pixels shouldn’t be used to specify font sizes except when absolutely necessary.

    So what then? Percentages and em:s (to me it’s insane to mix in em:s, why not go with percentages all the way? because that’s what you’re doing) have their probles. Not only the problems that are a cause of inheritance, but one is assuming that the default font size of the browser is set to a particular value when designing. Also, a lot of web developers tend to decrease the default size (say 76% of default font, then use 100% of that as main body text). Since different web developers will assume different default values, we’re still going to have to zoom in and out on different pages.

    Points don’t rescale in IE. Apart from that, one is assuming people have their DPI correctly set.

    Finally, there’s keyword sizes (x-small, small, medium, large, x-large). They do rescale in IE and don’t have any inheritance problems. However, you’re giving up a lot of fine-tune control.

    If I had anything to say about things, and I don’t, I’d make point sizes work something like keyword sizes. Base the corresponding pixel sizes on the users DPI, but also include an option in user agents to rescale the point size (with a percentage.) The idea is similar to rem:s, but with a difference: people have a pretty good idea how large “10 points” or “16 points” ought to be for them. “1rem” in size might mean nothing. Is it supposed to be the size of main text on a “normal” page?

  52. February 9, 2006 by Matthew Smith

    I personally prefer the browser not to resize text based on the user’s preference, if I specify pixels in my design. I think IE has gotten it right when it comes to the zoom feature in IE7. If the user wishes to increase the font size, the rest of the page should increase proportionally. I think IE6’s current implementation is correct, it was just missing the key zoom feature.

  53. desade: Apart from that, one is assuming people have their DPI correctly set.

    What does “correctly” mean? Is there a rule saying that a certain DPI should be used with such and such resolutions and physical screen sizes?

    I guess my take is: the visitor is always right. I (the designer) won’t dictate/expect anything and attempt to do my best whatever fonts they use.

  54. Does anyone see any potential problems that would make using pixels for text size a bad idea…

    Yes, certainly. I had hoped, the message that designing for the web is quite different from print design would have spread by now. One of the lessons: Give up control, let your design be flexible and adaptive, care for user experience.

    When overriding default font sizes one makes presumptuous assumptions about the user’s preferences; actually, they are flatly ignored.

    While both pixels and em/percent/keywords may abuse the user’s preferences, the latter’s usage still allows for respecting user settings. Pixels are a fait accompli.

    The zoom mechanism of browsers should be understood as a fallback mechanism for illegible text. Unfortunately, usage of this mechanism has today become a prerequisite for reading many prolific sites.

    Felix Miata, known to many css-discuss readers as a fervent proponent of user-controlled font size, has written an article worth reading, entitled Web Browser Default Text Size.

    The number one of Nielsen’s Top Ten Web Design Mistakes of 2005 is legibility problems:

    About two-thirds of the voters complained about small font sizes or frozen font sizes;

    This should make one think twice about unneccessary meddling with font sizes.

    To sum it up: do not

    Learn to give away control over design for the benefit of the user. Do not use pixel or em/percent units with a value less than 1em or 100% for main text.

  55. I think almost as big a problem with Internet Explorer is the fairly limited scope of it’s text-scaling function. Consider this site, for example. On my screen (which is admittedly quite hi-res), the text is about 3mm high on IE’s default “medium” setting, but scales to about 6mm high on “largest”. Even that is not huge. If IE were to resolve the scalable pixel-based font sze issue, they will also need to address the way they implement scaling.

    I think their whole-page zooming is a good idea to a point, although this will have the potential to introduce horizontal scrollbars, where text-resizing would just increase the vertical scrolling (upto a point). I’ve just tested a site I am currently developing using Opera’s zoom functionality - running at 1024 x 768, I can zoom upto 150% before getting horizontal scrollbars. The big plus to this approach is that CSS image replacements also scale.

    I guess ideally, both options should be available to the user - it should really all be about giving control to the user afterall. Similarly, as developers perhaps we should be making more effort to make sites configurable to users.

  56. February 11, 2006 by Roger Johansson (Author comment)

    Jens: I am not arguing for complete control here. I thought I had made that message clear. I am all for flexible design and I don’t think using pixels to specify font size is a good idea in general.

  57. I wonder where did this idea that users just love to have more control came from. Sure, more control never hurts, but if users is forced to apply it - that means that usability is not here. iPod Shuffle, anyone? Design is about sensible defaults.

  58. Rimantas: Control to the user comes from the old saying “you can’t please everybody all of the time”.

    I agree that there is a need to apply sensible defaults - if the user cannot find the controls you offer, there is no point offering the control in the first place. But the Internet is available to so many people with such diverse backgrounds and needs that it would be arrogant to assume we as designers/developers know what is best for all users. All I meant in my previous comment is we should allow the user to exercise control if they wish to, not that they must be forced into making decisions - sorry if I gave the wrong impression there.

  59. Roger: I perfectly understood your first comment.

    However, reading the majority of other comments, I get the impression that quite a few authors still favour pixels and small font size, thus putting the burden of illegible text and consequently the neccessity to zoom pages on the user.

    Thence my comment (commenting these comments :-)).

  60. body { font-size: 62.5% } /* 1px = 0.1em */

    There’s no way that can be accurate. You’re saying that you want fonts 62.5% of whatever the user’s default font size is. If the person’s default font size is 16px, then 1px = 0.1em. But, if the person has any other size default fonts, the math breaks down.

    I’m not saying there’s anything wrong with setting your font size to 62.5%. But, you should do so knowing that setting your font size in pixels means you are sizing relative to the user’s default. That’s not what Roger is talking about here — he’s talking about specifying exact, pixel sizes for fonts. The only way to do that is to use pixels.

  61. you can resize pixels in IE by turning them into ems:

    http://www.tiuvizeta.it/provapixel.htm

  62. March 15, 2006 by Screwlewse

    I have been using a style from Clagnut that really works wonders. It uses the following rules:

    html { font-size; 100%; } /* Somehow Fixes IE */

    body { font-size: 62.5%; } /* sets font to 10px */

    Container { font-size: 1.1em; }/* 1.1em = 11px */

    h1 { font-size: 1.9em; } /* 1.9em = 19px; */

    This is fairly accurate across browswers and OS’s. I have been happy to see my sites’ text look the same in firefox/mac as with IE/Win.

  63. Quoting Dustin Diaz:

    I don’t know what it was, but in 2000, 9px arial just looked cool. Gosh, what were we thinking?!

    I think we are going to say a similar thing in 2012:
    “We don’t know what it was, but in 2006 but we thought 14px Trebuchet just looked cool” as everybody will have 2048x1536 monitors. I believe what we need is using metrics system to define font sizes which the user agent will interpret as a floating point pixel size based on its screen DPI, mandatory anti-aliasing of text on high-end systems with little-to-no rounding errors, and preferrably high-quality up-down scaling of bitmaps, while still allowing the user to change the size of the font, of course…

  64. April 10, 2006 by Johan B

    I haven’t found anyone actually suggesting that what we need is a way for the browser to tell the stylesheet what the user wants (but I haven’t read every comment).

    What I would like to be able to do is to define text-sizes that I (or the designer and the customer) thinks looks good with the layout, but when the user has set the browser to always use larger textsize I would like to know that in the stylesheet. Something like condintional comments but for wanted font-size. This way we can create a nice-looking layout for most browsers but users with special settings can get larger text-size, and possible wider columns also.

    Failing this the .rem suggestion is very good and something that I have wanted for years. Cannot everyone who likes this idea write to MS and suggest it? Maybe they can find time to implement this, and if they do, I think Firefox and the others will get it very quickly also.

    By the way, I would actually like to be able to get this “settings” information even on the server side. I would like it to be added as some kind of “accept” part of http.

  65. Thanks to all who’ve commented here. This has been really informative. I’m dealing with a related set of comments on this post in whcih I introduce a script that, on page load, sets 1em to whatever # of pixels you want.

    What I’m beginning to see is that …, well I’m beginning to see a lot of different things. One is that the semantics of “default font size” has been clobbered. It should mean “the size to use if the page doesn’t specify one.” It’s become “my preference for the base font size (i.e., the size I like my normal reading text to be).” This is partly the fault (mostly the fault) of browser designers as this “default size” is retained between app startups whereas the viewer’s “text bigger/smaller” menu option choice is not.

    Another thing is that IE’s market share is still forcing the issue. It’s amazing how many web developers, some commenting above, believe 62.5% is (has to be, should be) the same as 10px. I’m getting some similar responses to my post in which the 16px default font size is assumed to be correct and so common as to be a standard.

    I’m also thinking that the script I came up with isn’t best used to get 1em to equal some # of pixels. It’s real benefit is that it can figure out what the browser’s default font size is (in pixels) at the time the page loads, even if the text has been bumped or or down via a menu option. That seems to be the information that designers/developers don’t have access to in order to intelligently set font sizes in their designs. I should probably be looking at solutions to that.

  66. July 19, 2006 by Jonathan Schofield

    Unless I’ve missed the exception above, the underlying assumption in this whole thread is that we’re primarily talking about body text. In that respect, I place myself firmly on the side of all those advocating scalable fonts. I’ve long since shaken off the ‘print designer’ view that font sizes and other design measurements should be fixed and absolute and almost always specify font sizes in percentages or ems.

    I say ‘almost’ because there are occasions when I’d like an h1 or an h2 to be pretty big by default - say, 30px or bigger. Maybe it’s a vestige of the print designer in me, but why not create a really visually punchy headline when it’s right to do so, and in a manner that doesn’t use images? (I’ve read that Google doesn’t attribute the same value to h1 content if it’s held within an alt tag to an image - someone please tell me if that’s wrong!)

    In such cases, I would argue that there’s no merit in headlines of this kind of size getting any bigger. In fact, if they do so, they can force a layout to break when it wouldn’t otherwise - other elements being allowed to scale as indeed they should. So…

    Wouldn’t it be nice if all web browsers could agree to allow the user to resize text, no matter which unit is used to specify its size?

    Well, actually, I feel this is one area where Windows Explorer is right. As long as it’s done with intelligence and understanding, one ought to be able to fix a font size in pixels. The intelligence is knowing whether a font is big enough already for this to be a reasonable decision. The understanding is being aware that one ought also to provide a ‘zoom layout’ stylesheet for those who need to see things differently.

    The fact that there are unfortunately too many sites with font sizes fixed at sizes way too small for this to be a good thing doesn’t mean that browsers should compensate for these failings.

    But then maybe the answer is Skippy’s idea of a max-font-size property. Perhaps that would be a better solution?

  67. September 11, 2006 by Sugar Daddy

    The link in this article did not point me to Zeldman’s original article, so I used Google and the Wayback Machine to find the original article.

    One of Wayback Machine’s copies

  68. I’m enamored.

    Microsoft DOES listen.

    Internet Explorer 7 the final release scales THE WHOLE SITE IN TANDEM WITH THE FONTS ON REQUEST.

    That makes EVERYONE HAPPY.

    The designer is happy because you’re not messing with their design my messing with the font sizes relative to everything else.

    The most likely viewers of your website are happy because their new browser helps them be able to read with their not quite 20/20 vision.

    Okay, someone is still unhappy.

    The coders on Sun workstations with 120dpi screen density settings are still unhappy but should change to Mozilla and shut up.

    I’ve used one of these workstations around the time most people were using 9 or 10px font sizes and it was painful.

  69. April 24, 2007 by eric

    Why do people — designers, yet — persist in perpetuating the myth that pixels are a reliable cross-browser type scaling measure?

    They’re just not. I’ve actually tested this, I’m not just talking out of my ass: There’s no 1:1 mapping between pixel sizes on different platforms.

    It’s a dynamic world. Give up your obsessive need to control all aspects of presentation and deal with it.

  70. April 24, 2007 by eric

    … oh, and, Ean Bowman: I’m unhappy, because the relative position of elements on the screen has just been severely munged. Which is a significant usability problem.

    When I want to scale text, I want to scale text — not graphics as well. Why would I want to scale graphics?

    Your assumption that “everyone is happy” is a markedly design-centric assumption. I want information and functionality. “Design” per se does not give me those (though functionally appropriate design can obviously enhance information transfer and functionality).

  71. Who claimed it was a 1:1 ratio across platforms? I’ve simply claimed that opera and IE scale well.

    Elements are not a reliable measure of font size either. NOTHING IS.

    Therefore, getting it as close as possible using methods which fare well across many platforms is a modern developer’s best option. (I’ve tried too, I run Linux at home, on servers at work, etc. I’ve used Solaris workstations and a variety of platforms.)

    Besides, it’s just CSS. If what the px-wise font does somehow breaks it’s a 2 characters on one line for each instance fix.

    Just what platform are you using that the fonts are so terribly off that the user can’t read what is on the screen? Even PDAs and phones read anything I’ve ever done in pixels fine!

    I realise not all system FONTS are even AVAILABLE on all platforms. Viewing pages can be nigh completely different on different platforms. The bottom line here is readability and REASONABILITY.

    If you have better solutions propose them. Don’t call everyone else stupid and just bitch. That makes you a dumb loser… I don’t think you’re a loser. :P

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.