Font Sizes on the Web

Specifying fonts for websites can be confusing, however, the use of a Cascading Stylesheet (CSS) will provide the greatest control. The use of CSS will allow you to control the pixel or point size, leading or line spacing, color, weight, and more. In short CSS allows the designer to dominate the browser's default font setting

CSS is also used for other items such as positioning DHTML navigation, but that is for the programmer to worry about. Here we are just going to focus on the font aspects, so you can give clear direction to your developer.

What CSS is and how it works

A Stylesheet is just a text document that usually lives in the parent directory of the website and contains code that tells the browser how to display a given font within the <div> tag.

A <div> tag tells the browser what CSS setting to use and surrounds the text within the HTML code.

For example, <div class="body">Body copy here.</div> is what the programmer places in the HTML code. The "body" is the name of the font settings specified in your Stylesheet. You can specify as many different settings as you need in your Stylesheet, just as long as they have unique names. CSS is really simple to implement, and because it is a global document, you only need to update one document to adjust the font size throughout the website.

What CSS code looks like

.bodybold {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:16px;
font-style:normal;
font-weight:bold;
color: #000000;
}

Here is what the text looks like when using the above code.

Breaking down the code

Code	Meaning
.bodybold;	The style name which goes in the <div> tag
font-family:arial,helvetica,sans-serif;	Specifies the font to use
font-size:12px;	Font size: px=pixels, pt=points, em=EM units
line-height:16px;	Specifies the leading size
font-style:normal;	Specifies the style, like underline or italics
font-weight:bold;	Specifies the weight of the font to be bold
color: #000000;	Specifies the font color in hex value

What measurement to use?

Within the CSS code you can choose what measurement you want the font to use: pixels, points, em, etc. For a designer that needs complete control over the font size, pixels or points are the best way to go. If you need to design the site so users can still scale the fonts, use em units.

Pixels vs. Points
Pixel and point measurements are interchangeable when it comes to CSS. You may get some argument from a programmer on this issue, but the fact is a pixel is: a pixel and a point in CSS is 1/72 of and inch. Meaning, with a website resolution at 72 dpi, a point is a pixel.

If you choose to use pixel or point measurements your fonts will stay the size you designate, no matter what the viewer has done to their personal browser settings. However, pixels units are relative to the resolution of the screen. That is why some one with an 800x600 resolution will have larger type than someone with a 1280x800 resolution.

EM Unit
The em unit displays fonts based on the size set in the viewer's browser preferences. For example, if the user has specified 12 point as their default size, then the em unit is based off of 12 point type. This measurement allows the viewer to scale the type as needed for their legibility, and you still control the hierarchy of the type because the size is relative.

This is a hard concept to grasp, but it works in this fashion. If you specify an em unit of 1 (1em) and the viewer's default font size is 12 point, then the font will display in 12 point. However, if the user changes their default font size to 10 point, the font will now display 10 point because the 1em is based of the viewer's default setting.

You can also specify the em size as decimals to get smaller or larger fonts. For example, if the viewer has 12 point as their default setting, and you specify 0.5em, the font will display at 6 point or half of the default setting.

Can you mix measurements?
The answer is yes. In some cases you may want a font to stay a fixed size, like the navigation or the footer, but you want the viewer to be able to adjust the body text. This is where you would use pixels or points for the navigation and em units for the body copy.