CSS Typography

Most of a website is text. Typography is therefore the highest-leverage skill in CSS: font choice, size, spacing and measure decide whether reading feels effortless or exhausting.

Font families

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

The list is a fallback chain: the browser uses the first font installed on the user's device, then the next, ending in a generic sans-serif. Named fonts must be quoted when they contain spaces.

Loading web fonts

Self-host or use a privacy-friendly CDN (this site uses Bunny Fonts), then declare the family:

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

font-display: swap shows fallback text immediately and swaps in the real font when ready — never leave users staring at nothing.

Size and scale

body  { font-size: 1rem; }        /* base: 16px by default */
h1    { font-size: 2.25rem; }
h2    { font-size: 1.75rem; }
small { font-size: 0.875rem; }

Use rem (relative to the root font size) so the whole page respects a user's browser settings — a core accessibility habit. Keep a simple ratio (for example ×1.25) between heading levels; avoid jumping from 16 px straight to 40 px.

Line height and spacing

p        { line-height: 1.7; }         /* unitless = multiplier */
h1       { line-height: 1.15; letter-spacing: -0.02em; }
p + p    { margin-top: 1em; }

• Prefer unitless line-height — it multiplies each element's own font size instead of freezing one pixel value.
• Body copy likes 1.5–1.8; headings tighten to 1.1–1.3.
• A slight negative letter-spacing makes big headings look tighter and more premium.

Text properties cheat sheet

Truncating text with an ellipsis

.card__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Expected output: long titles cut off with "…" inside their container. All three properties are required (and the element must be block-level with a constrained width).

A complete article style

.article {
  font-family: Georgia, "Times New Roman", serif;
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #1e293b;
}
.article h2 {
  font-family: system-ui, sans-serif;   /* headings switch to sans */
  font-size: 1.6rem;
  line-height: 1.25;
  margin-top: 2.2em;
}
.article a {
  color: #4f46e5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  background: #f1f5f9;
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}

Expected output: a serif reading column with sans-serif headings, comfortable spacing, indigo links and tinted inline code — the pattern used by blogs and docs worldwide.

Common mistakes

• px everywhere — px ignores user font preferences; use rem for sizes.
• Tight line-height on paragraphs — 1.0 on multi-line text is unreadable.
• Long unbreakable lines — cap with max-width: 65ch; without it, lines run 200 characters.
• Justified text with text-align: justify — rivers of white space appear on the web; prefer left-aligned.
• Loading five font weights — each is a network request; ship only what you use.

Practice checklist

1. Style a paragraph block: rem sizes, 1.75 line-height, max-width: 65ch.
2. Add a drop cap with ::first-letter (from the pseudo-elements chapter).
3. Shrink your browser's font size (Cmd/Ctrl + minus) — your layout should adapt, not break.

Under text sits the box everything lives in — The Box Model is next, and it changes how you see every element.