Typography Systems

Typography systems create readable, scalable content structure — comprehension comes before visual novelty.

01 — Purpose

Readable, scalable type

Typography systems create readable, scalable content structure — typography should support comprehension first.

Type scale, line length, and hierarchy determine whether users read your content or skim past it. A coherent typography system scales from marketing pages to dense documentation without reinventing sizes per template.

This site defines type scale and weight as tokens in the LSCSS settings layer — see design tokens and font loading.

02 — Principles

Comprehension over novelty

Readable content matters more than visual novelty.

  • consistent scale — stepped sizes, not arbitrary px per heading
  • readable line length — constrain measure for body copy
  • sensible hierarchy — logical heading levels, not styled divs
  • restrained font usage — few families, few weights, loaded deliberately

03 — Practice

Good typography systems

Tokens, hierarchy, and performance working together.

  • define a type scale as tokens — --text-m, --text-l, --text-hero
  • pair display and body families with clear roles — not three sans-serifs
  • use line-height tokens for body vs headings — tighter for titles, roomier for paragraphs
  • limit weights loaded — each weight is bytes and layout risk; see font loading
  • test hierarchy with CSS off — structure should survive without decoration

04 — Avoid

Typography anti-patterns

Tiny body text and decorative overload exclude readers fast.

  • tiny body text — 12px grey paragraphs on mobile
  • inconsistent hierarchy — h3 larger than h2 on some pages
  • decorative overload — display fonts used for UI labels and form fields
  • excessive font families — four typefaces where one sans and one mono suffice
  • long unbroken lines — no max-width on prose blocks

05 — Close

Type that serves content

If users struggle to read it, the visual design has failed.

Audit new pages against your scale. One-off font sizes become debt quickly. Centralise changes in tokens so a readability fix ships everywhere at once.

See design tokens, responsive strategy for scalable type across breakpoints, and colour and contrast systems.