CSS Typography

Most of what a visitor experiences on a page is text, which makes typography one of the highest-leverage things to get right in CSS.

Choosing a font

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

font-family takes a comma-separated fallback list — the browser tries each in order and uses the first one it can find. system-ui uses the operating system's default UI font, and ending the list with a generic family (sans-serif, serif, or monospace) guarantees the browser always has something to fall back to, even if a custom font fails to load.

Weight, style, and transform

h1 {
  font-weight: 700;
  font-style: normal;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

font-weight takes numeric values from 100 (thinnest) to 900 (boldest) — 400 is normal and 700 is bold, matching the keywords normal/bold. Not every font ships every weight; requesting a weight the font doesn't have makes the browser either fake it (synthetic bold, which often looks poor) or fall back to the nearest available weight. text-transform: uppercase is a styling-only transform — it doesn't change the underlying text, which matters for accessibility and for copy-pasting.

Line height and readability

p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 65ch;
}

line-height controls the vertical space a line of text occupies. A unitless value like 1.6 is relative to the element's own font size (so it scales correctly if font size changes) and is preferred over a fixed pixel value for that reason. max-width: 65ch limits a paragraph's width to roughly 65 characters per line — the ch unit is based on the width of the 0 character in the current font, and 45–75 characters per line is the commonly cited sweet spot for comfortable reading.

Alignment and spacing

.quote {
  text-align: center;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}

text-align handles horizontal alignment (left, center, right, justify). letter-spacing and word-spacing fine-tune the gaps between characters and words respectively — small adjustments here can make uppercase headings or condensed fonts feel less cramped, but overusing either hurts readability rather than helping it.

Loading a custom web font

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face registers a custom font so it can be referenced by name elsewhere. font-display: swap tells the browser to render text in a fallback font immediately and swap to the custom font once it loads, instead of leaving text invisible while the font downloads — an important detail for perceived performance.