CSS Typography: Fonts and Readable Text

CSS typography controls how text looks and reads. Learn to choose font families, set flexible sizes, tune line spacing and style headings and paragraphs.

Quick answer: Use font-family to choose a typeface and provide fallbacks, font-size to set its size, font-weight for emphasis and line-height to control spacing between lines. Use these properties consistently to create a clear reading hierarchy.

Choose a font family with fallbacks

List a preferred font first and end with a generic family so the browser has another option if a font is unavailable. Quote a family name when it contains spaces.

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
}

A system font stack can keep a page readable without downloading a separate font file. If you use a web font, include sensible fallback fonts as well.

Set flexible font sizes

CSS supports several length units. The rem unit is based on the root element's font size, which makes it useful for sizing text and spacing consistently across a site.

html {
  font-size: 100%;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

Avoid locking body text to a tiny fixed size. Relative sizing lets text respond to browser preferences and gives you a reusable type scale.

Adjust line height and text width

line-height controls the distance between lines. A unitless value scales with the text size and is easy to reuse. Long lines can be tiring to follow, so set a comfortable maximum width for reading text.

article {
  max-width: 68ch;
  line-height: 1.7;
}

Use weight, alignment and decoration carefully

Use font-weight to distinguish headings or important labels. Use text alignment for a clear purpose; left-aligned paragraphs are often easier to scan than fully justified text on narrow screens.

.lead {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
}

.article-title {
  text-align: left;
}

Do not remove the underline from links unless another clear visual cue shows that the text is clickable. Keep keyboard focus visible so people can follow links without a mouse.

Common questions about CSS typography

What does line-height do in CSS?

line-height sets the height of a line box and affects the space between lines of text. A unitless value such as 1.6 scales with the element's font size.

Should I use px, em or rem for font sizes?

All can set font sizes. rem uses the root font size and makes a consistent site-wide scale straightforward; em depends on the current element's inherited size, while pixels represent a fixed CSS length.

How many fonts should a page use?

There is no required number, but a small set of complementary typefaces is easier to maintain and can reduce extra font downloads. Use fallbacks for each font stack.