Text and Fonts

Most of a website is text. If your text is pleasant to read, your whole site feels professional, even before you touch layout or color. A few CSS properties do most of the work.

Choosing a font

The font-family property sets the typeface. You usually give it a list of fonts, separated by commas:

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

This list is called a font stack, and it works like a backup plan. The browser tries Georgia first. If the visitor's device does not have it, it tries Times New Roman. The last word, serif, is a generic family: it tells the browser "if all else fails, use any serif font you have". The two big generic families are serif (letters with small feet, like a newspaper) and sans-serif (clean letters without feet, like most apps).

Notice that font names containing spaces, like "Times New Roman", go in quotes. Setting font-family on body is a common trick: because elements inherit text styles from their parents, one rule sets the font for your whole page.

Size, weight, and style

Three properties handle the basics:

• font-size sets how large the text is, for example font-size: 1.125rem;
• font-weight sets how thick the letters are. bold and normal are the common values.
• font-style: italic; slants the text.

Breathing room between lines

Here is a small change with a big payoff. The line-height property controls the space between lines of text, and browsers default to a value that is a bit cramped for comfortable reading:

p {
  line-height: 1.6;
}

A plain number like 1.6 means "1.6 times the font size". Values between 1.5 and 1.7 make paragraphs noticeably easier to read. Try toggling this on your own site and you will see the difference immediately.

Alignment

The text-align property lines text up: left (the default in English), center, or right. Centered text works nicely for headings and short lines, but keep paragraphs left-aligned, because centered paragraphs are hard to read.

h1 {
  text-align: center;
}

Put together, a simple but genuinely good-looking text setup for your website is just this:

body {
  font-family: Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #333333;
}