How to Specify Size with Absolute Measurement Units for HTML5 and CSS3 Programming

By Andy Harris

Many times, you need to specify the size of something in CSS3. Of course, font size is one of these cases. The different types of measurement have different implications. It’s important to know there are two distinct kinds of units in CSS.

Absolute measurements attempt to describe a particular size, as in the real world. Relative measurements are about changes to some default value. Generally, web developers are moving toward relative measurement for font sizes.

Points (pt)

In word processing, you’re probably familiar with points as a measurement of font size. You can use the abbreviation pt to indicate you’re measuring in points, for example:

p {
 font-size: 12pt;
}

Unfortunately, points aren’t an effective unit of measure for web pages. Points are an absolute scale, useful for print, but they aren’t reliable on the web because you don’t know what resolution the user’s screen has. A 12-point font might look larger or smaller on different monitors.

In some versions of IE, after you specify a font size in points, the user can no longer change the size of the characters. This is unacceptable from a usability standpoint. Relative size schemes prevent this problem.

Pixels (px)

Pixels refer to the small dots on the screen. You can specify a font size in pixels, although that’s not the way it’s usually done. For one thing, different monitors make pixels in different sizes. You can’t really be sure how big a pixel will be in relationship to the overall screen size.

Different letters are different sizes, so the pixel size is a rough measurement of the width and height of the average character. Use the px abbreviation to measure fonts in pixels:

p {
 font-size: 20px;
}

Traditional measurements (in, cm)

You can also use inches (in) and centimeters (cm) to measure fonts, but this is completely impractical. Imagine you have a web page displayed on both your screen and a projection system. One inch on your own monitor may look like ten inches on the projector. Real-life measurement units aren’t meaningful for the web.

The only time you might use them is if you’ll be printing something and you have complete knowledge of how the printer is configured. If that’s the case, you’re better off using a print-oriented layout tool (like a word processor) rather than HTML.