Design Resources · type systems
Typography scales, fluid headings and readable body text
A flexible type system starts with reading conditions: scale, line length, spacing and the places where the layout must yield.
The useful version of a web practice is the one that can be repeated by someone else. This note keeps the scope tight, names the trade-offs and ends with a way to check the result. Continue with the type systems index or meet the Sites To Use editorial desk behind the notes.
Give the reader a dependable rhythm
A type scale is not a collection of impressive sizes. It is a set of relationships that tells a reader what is a title, what is supporting detail and where a section changes direction. Start with the body size and line height, then build outward from the distance people can comfortably scan.
Fluid values help when they are bounded. A heading can grow between two sensible limits while the surrounding measure keeps the line from becoming theatrical or cramped.
Treat line length as layout
Readable body text usually needs a narrower measure than the surrounding interface. Set the text column deliberately, then let cards, figures and navigation occupy the wider field. This preserves a calm reading voice even when the page has a generous desktop canvas.
Check the longest labels and the shortest screen. A system that works only for placeholder copy is not a type system yet; it is a mood board.
Test hierarchy without colour
Temporarily remove colour and inspect the page as a set of shapes and intervals. If headings still guide the eye, the scale is doing useful work. If everything competes, adjust weight, spacing or wording before adding another accent.
Set tokens around real content
Build the scale with the language and components the site will publish. Place a long heading, a short heading, a dense navigation label, a figure caption and a form error into the same specimen. Start from a comfortable body style, then define a small set of roles such as display, section heading, body, annotation and interface label. Use bounded fluid values only where continuous growth helps. Fixed sizes are often clearer for controls and compact metadata.
Test zoom, text-only enlargement and user spacing overrides before approving the system. The W3C text-spacing guidance is a useful stress condition: content must remain readable and functional when line, paragraph, letter and word spacing are increased. Watch for fixed-height buttons, clipped navigation, overlapping headings and cards whose labels no longer fit. These failures reveal fragile containers, not a problem with the reader's preferences.
Evaluate type services and licences as infrastructure
A typeface purchase includes more than appearance. Confirm whether the licence covers web use, self-hosting, applications, client work and the expected traffic model. Ask which weights, italics, scripts and variable axes are included, whether subset files are permitted and how updates are delivered. Load the real files in the specimen because fallback metrics, bold synthesis and missing glyphs can change both hierarchy and layout.
Compare the recurring cost of a hosted service with the operational work of self-hosting. A hosted library may simplify updates, while local files reduce third-party dependencies and give clearer control over caching. Record file sizes, font-display behaviour, fallback families and the pages most vulnerable to reflow. The strongest choice is the one the team can legally deploy, monitor and replace without redesigning every component.
Sources and further checks
These primary and official references define the standards or product behaviour used in this field note. Accessed August 25, 2026.
