Typography

Most of the web is text, so typography — font choice, size, weight, line height and measure — has more effect on how a page looks and reads than almost anything else. This lesson covers the core font properties and the habits behind comfortable reading.

font-family and font stacks

A font stack lists fonts in order of preference; the browser uses the first one installed. Always end with a generic family — serif, sans-serif, monospace, system-ui — as the final fallback. Quote names that contain spaces.

font-size

Use rem for font sizes so text respects the user's preferred browser font size. Body text of at least 16px (1rem) is the accepted minimum for comfortable reading on screens.

font-weight and font-style

Weights go from 100 to 900; normal is 400 and bold is 700. A font only shows the weights it actually includes — otherwise the browser picks the nearest or fakes bold, which looks worse.

line-height

Use a unitless value: line-height: 1.6 means 1.6 times the element's own font size, and it scales correctly for every child. Body text reads best around 1.5–1.7; large headings look better tighter (1.1–1.3).

Measure: line length

The font shorthand

.lead {
  /* style weight size/line-height family */
  font: italic 600 1.25rem/1.5 Georgia, serif;
}

The shorthand requires at least a size and a family, and resets every font property you don't mention.

Variable fonts and font features

Variable fonts contain a continuous range of weights (and sometimes widths or slants) in one file, set with font-weight: 520 or font-variation-settings. font-variant-numeric: tabular-nums makes all digits the same width — essential for tables and prices that should line up.

Building a type scale

Multiplying by a fixed ratio for each step creates harmonious sizes. Common ratios are 1.2, 1.25 and 1.333.

Readability checklist

• Body text 16px or larger, with a line height around 1.5–1.7.
• Lines limited to roughly 65 characters.
• Strong contrast between text and background.
• No more than two font families; use weight and size for hierarchy.
• Left-aligned body text (justified text creates uneven gaps on the web).

Try it yourself