Guide to font sizing with CSS
Posted on February 6, 2010 by Frederik Vig in CSS, Web designFont sizing with CSS and browser support as always been a mystery to me. We used to use pixels, than we switched to ems and percent, then we switched back to pixels again?!.. In this post I’ve tried shedding some light on the matter and explaining the reason for this, and the different ways of doing font sizing on the web.
You have quite a few different measuring units to use in CSS for use with the font-size property (em, ex, px, in, cm, mm, pt, pc, %). We can group these lengths into two groups.
Relative lenghts
- em: the ‘font-size’ of the relevant font
- ex: the ‘x-height’ of the relevant font
- px: pixels, relative to the viewing device (resolution and pixel density)
Absolute lengths
- in: inches — 1 inch is equal to 2.54 centimeters.
- cm: centimeters
- mm: millimeters
- pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
- pc: picas — 1 pica is equal to 12 points.
Percentage values are always relative to a length or other value.
To be honest I only use four of these units. I use points (pt) in my print stylesheet, and px, em and % for my screen stylesheet.
Pixels
When using pixels for your font size you don’t have much to think about, 12px is 12px in every browser. What can be a problem, and what is the main reason that organizations like the W3C advice against using pixels for font size measurement, is the lack of support in browsers like Internet Explorer 6 when changing the browser’s default font size. The reason for this is that most browsers used to use text scaling for this, only enlarging the text on the page. However the newest versions of all the major browsers now use page zooming instead. What this does is increase (or decrease) all the elements on the page, not just the text, by zooming.
Lack of support for page zooming in Internet Explorer 6 can be a problem. If it is you should consider using ems and percent, which all browsers support. You can use ems/percent either for all browsers or by using a conditional comment stylesheet for Internet Explorer 6 and using pixels for the rest. I personally have started using pixels again, simple because it saves me a ton of work, and is much more reliable for measurement than using % and ems.
Ems and percent
If your audience still consists of a lot of Internet Explorer 6 users, you might want to stick with using ems or % for measurement. The rule to follow here is target ÷ context = result.
Example
If we give body a font size of 100% (roughly around 16px in most browsers), we can use that as the context. So if we want 12px in font size for normal text, and 20px for headings, this then becomes the target.
- 12 ÷ 16 = 0,75
- 20 ÷ 16 = 1,25
body { font-size: 100%; } p { font-size: .75em; } h1 { font-size: 1.25em; } |
If we’d used pixels we would have something like this.
p { font-size: 12px; } h1 { font-size: 20px; } |
Okay, say we have some text inside our paragraphs that we want to be 13px. The target becomes 13px, but the context changes, instead of using the body as the context, the paragraph becomes the context. So we get 13 ÷ 12 = 1,0833.
p strong { font-size: 1.0833em; } |
By using the target ÷ context = result rule, everything comes down to maths :).
Here is the live example with ems and percent and here with pixels.
So, what are you using?
nono says:
Post Author February 7, 2010 at 10:37I do not longer support IE6 for these things. px is so much more easier to use and alle other browser support it. If people want text zooming then please for god sake upgrade
Neil says:
Post Author February 12, 2010 at 13:56This is exactly why I use px, keeps everything perfect. People who are still using IE6 should be taken outside and shot, chinese firing squad style.
SImon Day says:
Post Author February 12, 2010 at 16:11If you set the body font size to 62.5% then 10px=1em, 11px=1.1em, 12px=1.2em and so on.
Much, much easier working with 62.5%.
sid says:
Post Author April 20, 2011 at 14:28If you set the body font size to 62.5% then 10px=1em, 11px=1.1em, 12px=1.2em and so on.
Much, much easier working with 62.5%.
nice