Lesson 5 — Styling

Typography

Typography properties control how text looks and reads on a page — font family, size, weight, line height, and spacing all shape legibility and tone.

Core Font Properties

Font stacks list fallback fonts in case the first choice isn't available on a user's device. Line height controls the vertical space between lines of text and has an outsized effect on readability.

CSS — Typography 
body {
    font-family: 'Inter', -apple-system, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
}

h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.centered-quote {
    text-align: center;
    font-style: italic;
}

Common Mistakes

  • Specifying only one font with no fallback stack, so the page looks broken if that font fails to load.
  • Setting a line-height that's too tight (below 1.4 for body text), making paragraphs hard to read.
  • Using font-weight values a font doesn't actually support, which browsers may fake with poor-quality synthetic bolding.
  • Overusing letter-spacing on body text, which hurts readability at small sizes (it's better suited to short, uppercase labels).

Professional Tip

For body text, aim for a line-height between 1.5 and 1.7. This range is comfortable for most readers and is a small change that noticeably improves how professional a page feels.

Your Turn

Style a blog post layout: choose a font stack for headings and a different one for body text, set an appropriate line-height, and centre-align a pull-quote.

Mini Quiz

Why should you list fallback fonts in a font-family declaration?