📖 Notes LESSON 4 OF 26

Typography — Choosing & Pairing Fonts

⏱️ 25 min
🎨 Design

The Most-Used Design Element

Type scale, serif vs sans-serif, font pairing rules, Google Fonts, and typographic hierarchy.

Scale, Style, Pairing

📏
Type Scale
A consistent, limited set of font sizes (e.g. for h1, h2, body) used throughout a design.
🅰️
Serif vs Sans-Serif
Serif fonts have small strokes at letter edges (traditional, print-like); sans-serif fonts don't (clean, modern, common in UI).
🔗
Font Pairing
Combine two typefaces with enough contrast to work together — often a distinct display font for headings, a readable font for body.
🌐
Google Fonts
A free, widely-used library of web fonts, including families used across this course's own site.

Typographic Hierarchy

  • Headings should be visibly larger/bolder than body text.
  • Limit a design to 2 typefaces maximum — one for headings, one for body.
  • Line height (leading) around 1.4–1.6x font size improves body text readability.
  • Line length of roughly 50–75 characters per line is easiest to read.
🗒 Cheat Sheet 📝 Worksheet