Traditional default font-size for Windows-based browsers is 16 pixels and assumes the screen resolution of 96 pixels/inch. However on Macs, the traditional default size is just 12 pixels and a screen resolution of 72 pixels/inch. The Noodle Incident has an amazing article about the different sizes that comes with browsers and PC/Macs.
Because of this, the differences between computers can cause problems for many web developers. Luckily, there is a solution.
As far as font-size goes, we have size options: keyword sizes, pixels, em, points, percentages, or a combination.
Keyword sizes
Examples of keyword sizes are x-small, xx-small, medium, large. Keyword sizes should never be used alone unless used on very loose designs. Keyword sizes are different on several browsers and computers. As well, increasing or decreasing a size which is not set results in an uncontrollable design.
Pixels
Pixels should only be used in dire circumstances. Since pixels can’t be resized in some browsers *cough Internet Explorer*, it will only scare away a portion of your visitors who are vision impared or run high screen resolution monitors. However, a combination of pixels and keyword sizes is a nice alternative.
em and Percentages
em’s are based on percents or suppose to be at least. ems are more so based on the percent relative than percentage based, especially in IE. Here is an example of the differences in Internet Explorer between ems and percentages:
Within IE, change the text-size from medium to a large. You will notice that the ems are much larger than the percentages. This can be fixed for some strange reason however, by changing the body font-size to 100%.
The Noodle Incident has screenshots showing the difference between points, pixels, percentages and ems throughout several browsers and both Mac and PCs. Apparently, using an em and percentage combination is the only way text will display similar between all browsers and computers.
Now that we have a solution, the problem still lies with the large default sizes. A way around this is by lowering the font-size percent for the body. Of course, Internet Explorer again has a problem with this. There are only three percentages (excluding 100%, since there are still some problems with this) which will show the same in IE as other browsers: 62.5%, 76%, 81% and 101%.
While some state setting font-size to 62.5% is the way to go and just using a larger em base, other’s say 101% is just fine because large text is great for readers, or you can just use a smaller em for the paragraphs within the body. However, since many font-families look different it is hard to say which is right. It depends on what you are comfortable with and which font is used. Personally, I prefer using 76% or 81% depending on the font-family.
Written: Dec 6, 2007
ronnie ferez
December 7, 2007 @ 4:54 am
Thank you fro this helpful tips.
Please keep the ideas and tips flowing, you have a great blog here.
jayne d'Arcy
December 12, 2007 @ 12:51 pm
Dealing with the font size is one of the most maddening things I find to work with. I can get a design completed in a few hours, but the tweaking of the fonts will go on for days. Thanks for your article. It explains what I’ve been seeing a lot in some of the premier designers stylesheets.
kameir
May 27, 2008 @ 7:07 pm
Don’t you HATE to have to find workarounds for IE?!