Text and fonts

Introduction

Most of what people do on the web is read. A page can have a beautiful layout and still be tiring if the lines are too long or too tight. Good typography is mostly invisible: readers simply find they got to the end without effort. A handful of properties makes nearly all of the difference.

How it works

Font stacks. A browser can only use fonts that are available. font-family therefore takes a list, and the browser uses the first one it finds:

body { font-family: "Segoe UI", Roboto, Arial, sans-serif; }

Put quotes around names containing spaces. Always end with a generic family: serif, sans-serif or monospace, and the browser will always have something suitable.

Web fonts. To use a font which a visitor may not have, download it with @font-face:

@font-face {
  font-family: "Brand";
  src: url("brand.woff2") format("woff2");
  font-display: swap;
}

The name in font-family is your own label for it. WOFF2 is the modern compressed format, and all current browsers support it. font-display: swap shows a fallback font at once and changes over when the file arrives, so that visitors on slow connections are never left looking at blank space. Each extra weight is another download, so load only what you use.

Size and weight. font-size sets the size, font-weight takes normal (400), bold (700) or a number from 100 to 900, and font-style: italic slants it.

Line height. line-height controls the distance between lines. Around 1.5 is a good starting point for body text. Write it as a plain number with no unit. A number is multiplied by each element's own font size, while a value in px or em is calculated once and then inherited as a fixed size, which leaves headings cramped.

Line length. A line that is too long makes it hard for the eye to find the start of the next one. Aim for roughly 60 to 75 characters. The ch unit, about the width of a zero, makes this easy: max-width: 65ch.

Other properties.

Use text-transform rather than typing capitals, because screen readers may spell out words typed in capitals letter by letter, and the original text can be copied normally.

Syntax

body {
  font-family: Georgia, serif;
  line-height: 1.6;
}

Example

Line by line

1. Both paragraphs use Georgia, or any available serif font.
2. .bad sets a line height of 1, so there is no space between the lines.
3. .good adds space and limits the width to about 40 characters.

Expected result

A wide, cramped paragraph, and below it a narrower paragraph with comfortable gaps between its lines.

In the real world

Large sites often use the fonts already on a visitor's device, called a system font stack, because that costs no download at all. Publishers invest heavily in type because small changes in readability affect how long people stay and read.

Common mistakes

• No generic fallback at the end of a stack.
• Using px for line height.
• Removing link underlines without another clear signal.
• Typing in capitals rather than using text-transform.

Best practices

• Set your base font on body, so that it inherits.
• Use a unitless line-height.
• Limit the width of long text.
• Use few weights, and few families.

Summary

A font stack lists fonts and ends with a generic family. @font-face loads web fonts, and font-display: swap keeps text visible meanwhile. A unitless line height and a limited line length make long text comfortable to read.

Mark lesson complete