Skip Site Navigation «

Font Size

vnav«labs«CSS«font-size

The purpose of this page is simply to confirm a theory of mine on font sizes. It works like this — you set the default font size on the <body> to 16px and use a conditional comment stylesheet for IE to set the same to medium. Then all the browsers should be on the same page, so to speak. Now the designer can use exact percentages to control font sizes with their goals in mind and still remain elastic according to the user's preference.

Pixy has a wonderful favelet which will help you to see what's going on here. Look for List computed (cascading) styles [NEW]. Tantek has some pretty interesting ones too.

FAQ: What is a favelet?

Update: Most of what you read in the first paragraph no longer holds true. What I've now done is reset the font size on the <body> to x-small. That includes IE. So now everything is relative to that benchmark instead of 16px/medium. My apologies to anyone that visited this page today while I was updating the CSS. What we should find in this test are approximate whole pixel values except in the case of Opera which rounds everything up to the next nearest whole number value.

There are so many things to consider when deciding on fonts and sizes it boggles the mind. At least it does mine. Font metrics per design[er] vary, screen resolution, DPI, browsers, platforms, versions...ack! I found an excellent resource if anyone is interested. Have a look at this page titled Toward a standard font size interval system.

This is ~20px or 200%: abmgx0124+,/
This is ~19px or 190%: abmgx0124+,/
This is ~18px or 180%: abmgx0124+,/
This is ~17px or 170%: abmgx0124+,/
This is ~16px or 160%: abmgx0124+,/
This is ~15px or 150%: abmgx0124+,/
This is ~14px or 140%: abmgx0124+,/
This is ~13px or 130%: abmgx0124+,/
This is ~12px or 120%: abmgx0124+,/
This is ~11px or 110%: abmgx0124+,/
This is ~10px or 100%: abmgx0124+,/
This is ~9px or 90%: abmgx0124+,/
This is ~8px or 80%: abmgx0124+,/

For comparison purposes, let's try the 7 keywords as specified by the CSS1 font-size standard. These WILL vary somewhat from browser to browser.

xx-large: abmgx0124+,/
x-large: abmgx0124+,/
large: abmgx0124+,/
medium: abmgx0124+,/
small: abmgx0124+,/
x-small: abmgx0124+,/
xx-small: abmgx0124+,/

Tests under WinXP

Browser:

All four browsers were set to their default text sizes before the tests were performed. My results, including simple naked eye tests, using a screen magnifier and the Javascript tools mentioned above resulted in the exact same font sizes [20px down to 8]. All four also scaled these text strings through their respective interfaces.

The keyword test results were quite interesting. I expected NS and FF to yield the same results as they are both driven by the Gecko rendering engine — they did not. Opera and IE where very similar as I expected as the former has a habit of emulating the latter. Also interesting was the fact that Opera's x-xmall and x-small both displayed at 10px.

Look Ma, a <table>

Win/XP Max OS X
NS FF OP IE FF SF
xx-large: 28 30 32 32 32 ?
x-large: 21 23 24 24 24 ?
large: 17 18 18 20 18 ?
medium: 14 15 16 16 16 ?
small: 12 13 13 14 13 ?
x-small: 10 10 10 10 10 10
xx-small: 9 9 10 9 9 ?

Note: Pixy's favelet did not work with Safari, but it was discernible that x-small was in fact 10px.

All sizes are in pixels of course. As you can see, according to my tests [at least so far] x-small might be a better starting point using this method. 100% = 10px, 160% = 16px...I think you get the idea. This would also to keep the sizes correct in your head as you cascade, or nest, [percentages] one element inside another. In fact, once I get some feedback that's probably what I'll do: 19px font = 118.75% of the <body>? Cough. Ems would work equally well.

Additional Tests

I do not have any legacy browsers installed. Keep in mind that I'm serving XHTML 1.1 here, and there's a lot going on besides these font tests. I have no delusions that these techniques will work with NS4, or even IE5 for that matter.

All my Linux boxes are down at the moment, so I have yet to try this page using Konqueror, etc. What I'm mostly interested in are Macs: Safari, and so on.

This is the source code to my base stylesheet. And this one was written specifically to perform these font-size tests.

Even though I'm sure I haven't thought of everything and have probably made a few errors, so far I'm very encouraged by these results. I welcome as many testers and their feedback as I can get. Thanks!

That wraps up my CSS Lab series. In the next series the fun really starts when we begin to use PHP to automatically generate these pages instead of hand coding each one. Spoiler: The majority of these pages are under 70 lines of code and chunks of content aka paragraphs make up the majority them.

—doug

Related Reading

Didn’t find what you were looking for? Try searching drx for many other helpful CSS resources.

Last updated: Monday, October 20th, 2008 @ 4:35 PM EDT [2008-10-20T20:35:16Z]   home

(c) 2008-2010, Douglas W. Clifton, loadaveragezero.com, all rights reserved.