CSS: What font-size property you should use? - July 10th, 2007
The font-size property is one of the most common uses for Cascading Style Sheets (CSS). There are many different measurement units to use when defining the font-size property, divided into two distinct characteristics:
Relative lengths
- pixels are relative to the screen resolution
- xx-small through xx-large are relative to the default browser font size
- percentages, em and ex are relative to the parent element
Absolute lengths
- points and picas - print units
- inches, centimeters, and millimeters - length units
Points and picas are print units and produce unpredictable results when viewed on the screen, for example Macintosh normally displays points almost 25% bigger than in Windows machines. Since users have a variety of monitor sizes and display resolutions, it is advisable to use absolute length units exclusively for style sheets for print.
What to use for screen display?
There’s no right or wrong, however there’s two important facts to consider: Accessibility Vs Control.
If you are concerned about accessibility ems is the unit you should use. Ems is relative to the parent element (commonly the body) therefore the user can control how the font is displayed by changing the default browser settings.
This also means that if a user selects a font-size much bigger or smaller than what you had in mind the page look and layout can change dramatically, for this reason the entire web page layout and design must take this into account.
If you prefer to have control over your design you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen, across different browsers, user settings and different operating systems.
Tino
SEO Programmer
