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
16px and use a conditional comment stylesheet for IE to set the
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.
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
to x-small. That includes IE. So now everything is relative to that
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 ~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.
Tests under WinXP
- Firefox 1.0
- Netscape 7.2
- Opera 7.54
- Internet Explorer 6.0.26 [SP2 not installed]
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
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
|Win/XP||Max OS X|
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
Ems would work equally well.
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.
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.
- Clagnut: How to size text using ems