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.
