Discuss: How to Size Text in CSS

by Richard Rutter

1 Untitled

Aren’t the problems with em sizes on IE6 and IE7 caused by the fact that an em is a bit smaller on those browsers? .9759 times the size of a “regular” measure, if I’m not mistaken.

posted at 03:26 pm on November 20, 2007 by Kari Pätilä

I’ve always followed the 62.5% method – setting your body to have a font size of 62.5% means that any browser where the user hasn’t deliberately* changed their default font settings will set 1em equal to 10px. This means subsequent calculations are much easier and you can increase/decrease not only your text sizes but your entire grid, depending on how large/small the text is.

For an example, see the top few rules of this CSS file to see font sizes being easily calculated.

posted at 04:15 pm on November 20, 2007 by Ben Sekulowicz

3 Untitled

Sorry, the asterisk above was because if a user has set their font-size to be something different, I don’t want to be ‘that guy’ – the one who changes it, (see also, resizing browser windows).

posted at 04:16 pm on November 20, 2007 by Ben Sekulowicz

4 Constant Line Height

For those that want to use constant line height, your article will be useful; and those that don’t can ignore that part of it. However, although you cite others for regarding this as good typography , I gather that you embrace the concept yourself. This certainly isn’t the accepted wisdom for print, and it is ironic that the ALA page on which your article appears doesn’t go along with this either. I don’t accept every aspect of the ALA style (block paragraphs are my own special hate), but the smaller leading for items in the sidebars just seems to work. The converse I do not find to be true. I’m all for grids and rhythm on a page, but I think fixed leading irrespective of type size is out of tune.

posted at 04:34 pm on November 20, 2007 by David Leader

5 The 62.5% method

I’d like to echo Ben’s comment above; the 62.5% method is surely one of the most widely used em-sizing techniques but doesn’t get any coverage in this article.

Personally I set my font-size:62.5% on the <html> element, leaving my <body> free to set a sensible em size to cascade down.

posted at 05:16 pm on November 20, 2007 by James Smith

6 THE 62.5% METHOD?

Wouldn’t this then cause anyone with a different browser default(I use 14px) to be shown text that is clearly not the same size as the designer intended them to see? If you apply the 62.5% method to my browser, you would then be presenting me with 8px text.

Should you really force some of your users to resize the text before they can read anything on your site?

posted at 05:48 pm on November 20, 2007 by Adam Weis

7 Something new to try

I too have been using the 62.5% method ever since I picked it up from some WordPress themes I was looking at. It has worked well for me, but I am going to try this method in my newest site I am about to start work on. I really appreciate the time the author took to make screen shots to show the comparisons.

Now… if only our clients understood how hard it is to get the fonts sizes consistent in all browsers… :)

posted at 05:53 pm on November 20, 2007 by Douglas Neiner

8 Was just about to join the flame war but...

I’m pissed as anyone else that you did not mention the 62.5% rule. I was like.. ‘who is this amateur?’. But then I see the link to Clagnut. You are the person the internet has to thank for the 62.5% rule! ! Well thank you.
I would, however, like to have seen some review of the techniques that CSS frameworks like YUI, Blueprint, and Tripoli use.

posted at 06:14 pm on November 20, 2007 by paul irish

9 here is the original 62.5% article on clagnut

http://clagnut.com/blog/348/

posted at 06:16 pm on November 20, 2007 by paul irish

10

Thanks, @Paul Irish. Exactly.

Mr Rutter is the author who introduced the 62.5% rule many of us are already using. And now he is introducing a new best practice, based on experimentation shown in the article, and a desire to control the vertical grid as well as the font size.

Perhaps readers will forgive this innovator for continuing to innovate on our behalf, and will now actually consider what he has to say in the article, instead of criticizing him for not sticking with the rule he himself gave us.

posted at 06:50 pm on November 20, 2007 by Jeffrey Zeldman