Type Size & Line Height

In Web design, type size is set using one of two CSS properties, either font, which is a shortcut for setting several different font values or font-size, which is used only to set the size. The space between lines of text in a block can also be set in the font property or using the line-height property.

						font: normal 16px/24px century, serif;
					
					
						font-size: 16px;
					
					
						line-height: 24px;
					

Any of the relative or absolute size-value units listed earlier in this chapter can be applied to set the font size or line height. Or you can use specific keywords to set absolute sizes, which can then be adjusted with relative-size keywords. Line height can also be set as a numeric value, without any units, setting the spacing between lines as a multiple of the font size.

Understand how type is measured

A typeface’s height is measured from the cap height (the height of the tallest capital letter) to the descender, with some breathing room added at the bottom to prevent characters on different lines from overrunning each other even if the line height is equal to the font size. The exact bottom buffer is set by the type designer. Taller uppercase letters—“b,” “d,” “f,” “h,” “i,” “k,” “l,” and “t”—often rise slightly above the cap height but are not included in the measurement. Although each character in the font might have a different visual height, they occupy the same amount of space vertically, even if they do not fill it.

Even if set to the same size, though, a font’s x-height will likely vary, leading some fonts to look taller than others, and often making them more readable, as is the case between Times and Georgia.

The width of a character is simply its visual width plus any space beside it. The space may vary from letter to letter and can be kerned—the process of adjusting letterspacing to optimize the legibility of that particular font. The one exception to this is monospace fonts, which always occupy the same width regardless of the character.

Size fonts with absolute keywords for consistency, and avoid relative keywords

In addition to specific units of measurement, you can set font sizes using relative and absolute keywords. The keywords are self-explanatory, as good keywords should be:

• Absolute-size keywords— xx-small, x-small, small, medium, large, x-large, and xx-large—set the type to a specific size as defined by the browser. Medium is the default browser font size.

• Relative-size keywords— smaller and larger—make text smaller or larger relative to its parent element’s font size. Unfortunately, different browsers use different algorithms to determine the relative font size change, making them unreliable for browser interoperability.

Table 4.3 presents the pixel equivalent size of each of the absolute-size keywords as well as the effect of the relative-size keywords. As mentioned, each browser has a slightly different algorithm for computing relative sizes, so there is some browser variance, which is compounded when relative sizes are nested. Microsoft Internet Explorer and Firefox are the most consistent, but even they vary when using smaller font sizes.

Although the range for absolute keywords is limited, they are an easy way to quickly apply a set scale to your type. Since relative font sizes are so inconsistently calculated between browsers, they are not recommended.

Setting type size to scale for fluid typography

Consider one fact of Web design: Everything on the screen is resizable, and there is nothing you can do about it. No matter what units you use, all it takes is a keystroke by the user to enlarge the text, potentially upsetting your carefully set type.

Learning to live with and take advantage of the vagaries of Web design will make you a better Web designer, and dealing with your font sizes expanding is no different.

So, the default size of text in a Web browser is medium or 16px. Rather than trying to set all of our font sizes individually, it is better to set a scale. Start with the body font size set to 100% (16px), and then use em values to scale from that size, as desired:

							body {
							font-size: 100%;
						
						
							line-height: 1.125em;
							}
						
						
							h1 {
							font-size: 2em;
							}
						
						
							p {
							font-size: 1em;
						
						
							line-height: 1.5em;
							}
						

If you then want to reduce the overall size of text on your page and you are using relative values, you need only change the percentage value set in the body. For example, 75% would create a document with a base font size of 12px, scaling all other sizes proportionally.

Alternatively, if you want more precise control, you can set a pixel value for the body font size to override the browser setting. This may cause some browsers to scale poorly, though, if the user manually increases the text size.

Size header and body copy to improve scannability and readability

One truism of the Web is that readers tend to scan a page. Once they find what they are looking for, they go into reading mode. While we will deal with a more holistic approach to creating scannable text in Chapter 6, the most immediate and reliable way to guide the reader’s eye to important content is through a texture of type sizes. By treating the major page components—headers and body text—with a consistent scale for size, you can create a rhythm that improves scannability.

Heading sizes range between 18 and 32 pixels, while the most popular font sizes for body copy range between 12 and 16 pixels. Smaller font sizes for body copy may be encountered, but they are generally too small for comfortable reading and should be avoided.

A general rule of thumb is that the largest header font should be roughly twice the size of the body copy or larger,

body copy font size × 2 ≤ header font size

with the lower-level headers gradually decreasing, on a consistent scale, in size toward 1em.

One important factor to keep in mind while determining your font size is that 16px is the default font size set by browsers. Text is intended to be at least that large for easy reading. Many designers size body text x-small (10px to 11px) in the belief that it looks better and is easier to design with, especially if you are concerned with getting everything above the imaginary “page fold” or scroll line (see page 112 for more about this). However, larger fonts with a judicious use of white space will create text that is easier to scan and read. You need to give your body copy enough breathing room.

Choose a line height that gives your body copy breathing room

Beyond the size of the text, one of the most frequently overlooked factors in creating readable text is the line height and the width of the column in proportion to the font size. It’s important to stress that line height is not the space between lines of text—as it is often mistakenly thought of—but the space from the baseline of one line of text to the baseline of the next line of text.

A minimum font size to line height ratio of 2:3 is recommended for any extensive body copy:

						body font size × 1.5 ≈ line height

So, a font size of 16px would require a line height of 24px or higher. To simplify matters, you could apply a line height of 1.5em, 150%, or just set a numerical value of 1.5. All of these will add the correct line height, regardless of how the copy is resized.

							line-height: 24px;
						
						
							line-height: 1.5em;
						
						
							line-height: 150%;
						
						
							line-height: 1.5;
						

In addition to font size, column width affects the optimal line height. Narrow columns and shallower blocks of text, such as headers, require less line height to be quickly scannable. Generally speaking, you can reduce the font size to line height ratio in this case as low as 1:1.125. In order to preserve a more uniform page grid, however, designers often keep the line height consistent regardless of the column width, and use font, style, and color changes to better differentiate columns.

Choose a column width that will not tire your readers out

Another important consideration for readability is the column width. Reading slows the longer a column grows—after a certain amount. A comfortable column width is easily derived from the page’s base font size. Although not an absolute and dependent on the typeface, a good rule of thumb to determine a comfortable column width is to multiply the font size by 28:

						body font size × 28 ≈ column width

This is a rough value. The multiple can range anywhere between 25 and 33, depending on your preference. Generally, though, if we assume a font size of 16px for our body copy, a comfortable column width will be around 450px.

Again, ems can come to our rescue to simplify matters, by allowing us to set a column based on the font size:

							width: 28em;
						

For a fluid design that makes optimal use of the available screen real estate, set the maximum and minimum column widths within the comfort range:

							min-width: 25em;
						
						
							max-width: 33em;
						

The column width will expand or contract as space is available within the Web design, but never stretch too wide or too narrow for comfortable reading.