Typography Systems

The heading contract

A heading system is a contract with the reader: a given heading level always represents the same kind of content relationship. H1 is the page subject. H2 is a major section. H3 is a subsection. Breaking this contract — using H3 for visual style rather than structural meaning — destroys the contract for screen reader users and creates maintenance debt as content grows.

Body text rhythm

Body text rhythm is set by line-height. A line-height of 1.5–1.6 works for most body text at standard sizes. As font size increases, line-height should decrease: display text at 48px may need a line-height of 1.1. As measure (line length) increases, line-height should increase: wide columns need more line-height than narrow ones. The Themex scale framework handles the size relationship automatically.

Caption and metadata treatment

Captions and metadata (dates, authors, categories) should be visually distinct from body text through a combination of size reduction and colour reduction. Using both signals prevents them from competing with body text without making them illegible. Avoid italic-only differentiation for metadata — it is too subtle and fails at small sizes.

Display type

Display type (headings above 40px) should almost always be set in a display-optimised variant of your heading font, or a companion display face. Most text fonts have poor optical properties at very large sizes — letter spacing that works at 20px looks too tight at 72px. The Themex systems include display-size letter-spacing adjustments in the token set.

Font loading strategy

Load only the weights and styles you use. A system that uses 400 and 600 weight with no italics should not load italic subsets. Use font-display: swap to prevent invisible text during load. Preconnect to font origins in the document head. The Themex systems are designed around two-weight subsets to minimise load cost.