Typography in CSS

Analogy categoryAnalogies

Introduction

Typography is one of the most impactful aspects of web design. CSS provides a rich set of properties to control how text looks and reads, including font family, size, weight, line height, letter spacing, and alignment.

🏏

Cricket analogy: Like a commentator's tone, pace, and emphasis shaping how a cricket broadcast lands with viewers, CSS typography properties like font family, size, weight, and spacing shape how readable and impactful the text on a page feels to visitors.

Syntax

css

p {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
}

Explanation

font-family accepts a comma-separated fallback list, ending in a generic family (serif, sans-serif, monospace) in case earlier fonts aren't available. font-weight controls boldness, typically 400 for normal and 700 for bold, though variable fonts support finer increments. line-height, when set as a unitless number, multiplies the element's font size to determine spacing between lines, improving readability, especially for body text (1.4-1.6 is a common range). letter-spacing and word-spacing fine-tune character and word gaps. text-align controls horizontal alignment, and text-transform can programmatically capitalize, uppercase, or lowercase text without altering the underlying markup.

🏏

Cricket analogy: Like a batting order with a preferred opener and backup options if he's unavailable, font-family lists fallback fonts ending in a generic family; font-weight is like choosing between a steady 400-run knock (normal) and an aggressive 700-run blitz (bold); line-height (1.4-1.6) spaces deliveries like a bowler's over rhythm for readability.

Example

css

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

p {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 65ch;
}

Output

The h1 renders large and bold in a serif typeface with tight line spacing suited to short headline text. The paragraph uses the system's default sans-serif font at a comfortable reading size, with looser line spacing (1.6x the font size) for better readability, and its width is capped at roughly 65 characters per line using the ch unit, a widely recommended maximum for legible body text.

🏏

Cricket analogy: Like a bold match-winning headline in a sports column set in a tight, punchy serif font while the detailed match report below flows in a relaxed sans-serif with generous line spacing, the h1 renders large and tight while the paragraph uses looser 1.6x spacing capped at about 65 characters per line for easy reading.

Key Takeaways

Always provide font fallbacks ending in a generic family name.
Unitless line-height values scale with font-size and are preferred over fixed units.
font-weight values like 400 (normal) and 700 (bold) map to common typeface weights.
Limiting line length (e.g. max-width: 65ch) significantly improves text readability.