🔤 CSS Beginner

Text & Fonts

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can choose fonts with sensible fallbacks, size text in responsive units, set comfortable line spacing, and load a web font.

Most of a web page is text, so good typography does more for how a site feels than almost anything else. The good news: a handful of CSS properties cover the essentials, and small tweaks to size and spacing make a surprisingly big difference to readability.

1Font family and size

font-family sets the typeface. You give a stack — a list of fallbacks — so if the first font isn't available, the browser tries the next, ending with a generic family:

font-family: 'Inter', system-ui, sans-serif;

The generic families are serif (with little feet, like Times), sans-serif (clean, like Arial), and monospace (fixed-width, like code).

Sizing text: px vs rem

  • px — a fixed pixel size (font-size: 16px). Simple and predictable.
  • rem — relative to the page's base size (1rem usually equals 16px, 1.5rem equals 24px). Preferred for body text because it respects the user's chosen browser font size — an accessibility win.
Keep body text at least 16px (1rem). Smaller text is hard to read, especially on phones, and frustrates older readers.
Fonts and sizes
HTML
CSS
Live preview
What's happening: font-size in rem scales from the page's base size (1rem is about 16px). Try changing the h1 to 3rem, or the .lead colour. The .mono paragraph uses a monospace family.
Key points
  • font-family takes a stack of fallbacks ending in a generic family (serif/sans-serif/monospace).
  • px is fixed; rem scales with the user's base size and is preferred for body text.
  • Keep body text at least 16px (1rem) for readability.

2Weight, spacing, alignment — and web fonts

A few more properties polish your text:

  • font-weight — normal, bold, or numbers 100–900.
  • line-height — space between lines. 1.5–1.6 is comfortable for body text; cramped lines are tiring to read.
  • text-align — left, center, right, justify.
  • text-decoration — e.g. underline, or none to remove link underlines.
  • letter-spacing — fine-tune the gaps between letters.

Web fonts

To use a font most computers don't have (like a Google Font), link it in your HTML head, then name it in font-family:

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

/* then in CSS */
body { font-family: 'Inter', sans-serif; }
Don't load too many web fonts — each one is a download. Two families (one for headings, one for body) is plenty for most sites, and keeps the page fast on slow connections.
Spacing and alignment
HTML
CSS
Live preview
What's happening: Compare the two paragraphs: only line-height differs. The 'airy' one (1.7) is far easier to read than the 'cramped' one (1). Small spacing changes have a big effect.
Key points
  • font-weight (normal/bold or 100–900), line-height (1.5–1.6 for body), text-align and letter-spacing polish text.
  • Load a web font by linking it, then naming it in font-family.
  • Limit web fonts (two families is plenty) to keep pages fast.

★ Practical: style a readable article

In any playground, style a short article so that:

  1. Body text is 1rem with line-height of about 1.6.
  2. The <h1> uses a larger size and a heavier font-weight.
  3. A .lead intro paragraph is slightly larger and a softer colour.
  4. Try a Google web font, falling back to a generic family in the stack.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
The Box Model
Next →
Display & Document Flow