Sikau

CSS · Day 4 · about 25 min

Text and fonts

Typography that's a pleasure to read.

Most of the web is text

Good typography is invisible: you just read comfortably. A few properties — font, size, line height, line length — make the biggest difference.

Typography properties

  • font-family — list fallbacks, ending with a generic family like serif or sans-serif.
  • font-weight — 400 normal, 700 bold. font-style: italic.
  • line-height — 1.5–1.7 for body text (no unit = multiple of the font size).
  • Lines of 45–75 characters read best: max-width: 65ch.
  • Web fonts load from services like Google Fonts or your own files with @font-face.

The rest of this lesson

  • Loading a web fontexplain
  • A comfortable reading setupexplain
  • Which line-height?predict
  • Readable paragraphsfill
  • Your turnwrite code
  • Badge quizquiz
  • What you learnedrecap

Continue this lesson free — run real code in your browser

Continue with Google

See all 19 lessons of CSS