Typography Overview

Typography is arguably the most important aspect of web design — the majority of what users do on a webpage is read. CSS gives you complete control over how type appears: the typeface, its size and weight, the space between lines and letters, how text aligns, wraps, and truncates. Good typographic CSS is invisible — it just makes reading feel effortless. Bad typographic CSS creates friction that users feel even if they can't articulate why.

The typography properties map

Category	Properties	What they control
Font selection	`font-family`, `@font-face`	Which typeface to use
Font metrics	`font-size`, `font-weight`, `font-style`, `font-stretch`	Size, boldness, italic, width
Spacing	`line-height`, `letter-spacing`, `word-spacing`	Vertical rhythm, character spacing
Alignment	`text-align`, `text-indent`, `vertical-align`	How text is positioned
Decoration	`text-decoration`, `text-transform`, `text-shadow`	Underlines, case, shadows
Overflow	`white-space`, `word-break`, `overflow-wrap`, `text-overflow`	Line wrapping and clipping
Advanced	`font-variant`, `font-feature-settings`, `font-variation-settings`	OpenType features, variable fonts

The type scale concept

A type scale is a set of font sizes with a consistent mathematical ratio between them. Rather than choosing sizes arbitrarily, you pick a base size and a ratio (often 1.25, 1.333, or 1.5), then multiply up and down. This creates visual harmony because the sizes are related.

CSS

/* A Major Third (1.25) type scale starting at 1rem */
:root {
  --text-xs:   0.64rem;   /* 0.8² */
  --text-sm:   0.8rem;    /* 0.8¹ */
  --text-base: 1rem;      /* base */
  --text-md:   1.25rem;   /* 1.25¹ */
  --text-lg:   1.563rem;  /* 1.25² */
  --text-xl:   1.953rem;  /* 1.25³ */
  --text-2xl:  2.441rem;  /* 1.25⁴ */
  --text-3xl:  3.052rem;  /* 1.25⁵ */
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p  { font-size: var(--text-base); }
small { font-size: var(--text-sm); }

Tools like typescale.com and utopia.fyi help you generate type scales — Utopia specialises in fluid scales that smoothly transition between mobile and desktop sizes

A Minor Third (1.2) scale looks subtle but clean for body-heavy sites; a Perfect Fourth (1.333) is more dramatic and suits editorial and marketing pages. The ratio also changes how extreme the steps feel — a 1.5 ratio (Perfect Fifth) creates a very bold hierarchy that works for landing pages but might be too aggressive for documentation.

Web-safe vs custom fonts

Fonts fall into two categories in web CSS:

System fonts — fonts already installed on the user's device. No download, instant render. system-ui, Arial, Georgia, etc.
Web fonts — custom fonts loaded via @font-face or a font service (Google Fonts, Adobe Fonts). Requires network request; can cause layout shift if not handled carefully.

CSS

/* System font stack — no download, always fast */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* System monospace stack */
code, pre {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro',
               Menlo, Consolas, 'Courier New', monospace;
}

/* System serif stack */
.prose {
  font-family: ui-serif, Georgia, 'Times New Roman', Times, serif;
}

The key typography rules for readability

Line length: 45–75 characters for body text (max-width: 65ch). Too wide = eyes get lost. Too narrow = too many line breaks.
Line height: 1.4–1.8 for body text; 1.1–1.3 for headings. Too tight = claustrophobic. Too loose = disconnected.
Font size: 16px minimum for body text. Many users benefit from larger. Never use px for font-size — use rem.
Contrast: WCAG AA requires a 4.5:1 contrast ratio for normal text, 3:1 for large text (18px+ or 14px+ bold).
Font choice: Use system fonts for interfaces; custom fonts for editorial and brand expression. Don't mix more than 2–3 typefaces.

A solid typography baseline

CSS

/* A minimal but solid typographic baseline */
:root {
  font-size: 100%; /* respect browser default — don't fix at 16px */
}

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a2e;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance; /* modern: prevents orphaned words on headings */
}

p {
  max-width: 65ch; /* comfortable reading line length */
  text-wrap: pretty; /* modern: avoids widow words on the last line */
}

Choosing and stacking typefaces — from system fonts to custom web fonts: [font-family](/css/font-family).