Discuss: How to Size Text in CSS
by Richard Rutter
- Editorial Comments
12
@Cameron: Using pixel sizes for all but IE6 is something we’ve done at Happy Cog more than once (see Daniel Mall here for instance).
posted at 05:14 pm on November 20, 2007 by Jeffrey Zeldman
13 What about the keyword method?
I’ve been using the keyword method advocated by Dan Cederholm in Bulletproof Web Design where you set the font size with a keyword and then adjust by percentages off of the keyword. Has worked very well for me and was curious why no mention of it here.
posted at 05:48 pm on November 20, 2007 by derek allard
14
I think the combination of techniques here is brilliant, and will make a great foundation for universal typesetting best practices on the Web. I still can’t help thinking that it’s a ridiculous state of things that one browser dictates so much complexity (however elegantly executed) to achieve such a basic technique. But if we worked around the box model for this long, I think we can handle this until IE6 goes to that single-digit percentile in the sky.
posted at 06:04 pm on November 20, 2007 by Wilson Miner
15 Nothing too new here
Another article about how to work around IE’s shortcomings.
Every other browser on Earth can enlarge or reduce text that is set in pixels. I will continue to specify my fonts in pixels, and if anyone wants to resize it, then they can zoom the whole page or download a more capable browser. Most of the people who are still using IE are the same sort of people who will never even click on their menu bar to see that there are text resizing controls, so it is a waste of my time to use complicated workarounds to accommodate the small minority who expect to resize text in IE. It is Microsoft’s choice to not let my text be resizable, not mine. If people accept IE as their browser, then they are accepting that decision and should live with it.
On the issue of “vertical rhythm” as being good typography: its a bunch of BS. Somebody made that up a year or so ago, but it is certainly not accepted as good typography. In fact, the space between paragraphs should be less than a full line, as that IS accepted as good typography.
posted at 06:26 pm on November 20, 2007 by Brad Kemper
16 EXCELLENT "MATHS"
“Math’ is non-countable. There is no plural of “math”.
posted at 06:27 pm on November 20, 2007 by Brad Kemper
17 RE: NOTHING TOO NEW HERE
@Brad Kemper: The idea of vertical rhythm is much older than one year. Where is it said that paragraphs should have less than a full line between them?
posted at 06:32 pm on November 20, 2007 by Meryl K. Evans
18 Re: Nothing Too New Here
@Brad Kemper: Jason is right, vertical rhythm is as old as dirt. To reiterate, the author’s goal here is to “reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users.”
posted at 07:11 pm on November 20, 2007 by Jody Ferry
19 Thanks
I’d like to thank you for putting so much time and effort into this article. The screenshots were especially useful, and I’m sure they were quite time-consuming to create.
Many of the previous comments make good points (I’m not sure I agree with the one-size-fits-all line spacing technique, either) but I certainly welcome the dialog and any new insights into handling typography in this clunky thing we call a web browser.
posted at 07:14 pm on November 20, 2007 by Philip Hutchison
20 RE: EXCELLENT "MATHS"
@Brad Kemper: “Math” and “Maths” are both correct, as they are both colloquialisms for “Mathematics”. “Maths” is the form more commonly used in non-American english speaking countries. Richard Rutter is from the UK, hence, “maths”.
posted at 07:21 pm on November 20, 2007 by Meryl K. Evans
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)



11 Pondering using this
A good, robust way of writing cross browser font-size CSS is something we’ve been discussing at work recently.
We had previously been using the 62.5% technique and were fairly happy with it until reading about the associated issues with users who had changed the default text-size of their browser (incidentally, it was while exploring the rather useful Blueprint framework that I read this).
One of the team here had suggested using pixel sizes for all but IE6, which would be given it’s own, percentage-based, styles but that just seemed like too much work for my liking (maintenance would also be made more difficult).
As much as using em’s can be a pain while dealing with nested elements, at least we now have a proven solution that would appear to cover all bases.
Thanks to the author for sharing. :)
posted at 05:08 pm on November 20, 2007 by Cameron Yule