Font Metrics

Fonts are typically measured in a unit specific to the printing industry called the point. A point (abbreviated "pt") is the traditional printer's and typographer's unit for specifying the size of fonts, the spacing between adjacent lines, and the thickness of rules, among other things. It is still used a lot, although some countries and publishers now prefer to use the metric system, specifically, the millimeter (mm) and centimeter (cm). There are three variants of the point:

• The continental European point (the Didot point = 0.376065mm)

• The Anglo-American point (the pica point = 0.351461mm)

• Another Anglo-American point (defined as 1/72in. = 0.352778mm)

CSS uses only the last one. It does so because that point's value is in between the other two values. Also, it conforms to the point size used in PostScript printers, which is the most common type of printer.

To understand how type is sized, you first need some information about what makes up a letter. The x-height is the size of the body, or main part, of the letter and is approximately equal to the height of the x of the font. The ascender is that part of the lowercase letter that extends above the x-height. The descender is that part of the lowercase letter that extends below the x-height.

Type sits on an imaginary horizontal line called the baseline. For example, notice this line of type you now read. All of it sits on a baseline. Figure 5.9 shows the parts of a letter sitting on a baseline.

Figure 5.9. Parts of a letter.

The size of type is usually obtained by measuring from roughly the top of its ascenders to the bottom of its descenders. (In the days of metal type, the font size was the size of the letter body; refer to Figure 5.2.) The measurement is expressed in points. The difference of a point is more noticeable in smaller sizes than in larger sizes. Text type, which is type used for running text, is generally 14pt or less. Common sizes are 10pt and 12pt. Display type, which is the type used for headings, is generally bigger than 14pt.

Although different fonts may be of the same point size, they may appear to be different sizes. This is typically because the x-heights of fonts vary. Some fonts may have a large x-height, while others in comparison have a small x-height. Because type of one size has just so much height it can work with, a large x-height is often combined with short descenders and ascenders, while a small x-height is combined with long descenders and ascenders. So, the visual impression of size that a font makes is largely caused by the font's x-height in combination with the size of its ascenders and descenders. As Figure 5.10 shows, Times Roman has a relatively large x-height and therefore relatively short descenders and ascenders in comparison to Bernhard Modern, which has a relatively small x-height and relatively long descenders and ascenders. Notice that the Times Roman sample appears bigger than the Bernhard Modern sample even though both are the same point size.

Figure 5.10. Because of differences in x-heights, the Times Roman sample (a) looks bigger than the Bernhard Modern sample (b) even though both are the same point size.

This relationship is important because it is one factor that affects the readability of your font on a user's screen. A font with a large x-height is often easier to read in smaller sizes than one with a small x-height. As the font size increases, this difference lessens.