CSS Tutorial – Font Sizing

You can use Cascading Style Sheets (CSS) is to modify the font or typography of the page. There are several ways to describe font sizes.

In the font-size property, you’ll know that there are many different measurements to use when defining the size of the font.

Relative lengths

xx-small through xx-large – relative to the default browser font size
percentages – relative to the surrounding text
em and ex – relative to the parent element
pixels – relative to the screen resolution

Absolute lengths

points and picas – print units
inches, centimeters, and millimeters – length units

What not to use

Many Web designers have use point sizes to define their font sizes on the screen. But points are a print unit of measure. So when you specify 14-point type, it might display much larger or smaller than you expect. You can notice the difference between Macintosh and Windows. Macintosh typically displays things almost 25% smaller than the same page on Windows. Web designers should definitely continue to use points as font-size lengths in their style sheets. But the points should be limited to style sheets for print.

What to use

The case for ems

If accessibility is your biggest concern, then you should use ems. Ems are sized so that the font size is relative to the parent element. In the case of most Web pages, this is the body element – and so the font is sized relative to the standard size of the browser.

Using ems as your font size measurement ensures that your pages will be accessible to most browsers and platforms. Plus, if your readers choose to change the default font size on the fly, your page will scale to that new size.

The problem with ems is that you lose control over the exact look of your page. Some people may have a much larger or smaller default size than you are used to, and with ems, your fonts will scale relative to that size. This can result in strange font sizes.

The case for pixels

If control over the look of your Web page is your biggest concern, then 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.

Pixels are the measure of resolution, and the resolution of your customers’ monitors can affect the readability of your type. For example, most Windows machines are set at 96 dpi, while most Macintosh machines are set at 72 dpi. So, a font set at 72px will be 1 inch (approximately) tall on a Macintosh and three quarters of an inch tall on a Windows machine. Also, some OS’s (most often Linux and Unix) can make fonts extremely jagged and hard to read if they try to scale the font sizes from the pixel sizes embedded on the OS.