What is a typography scale in UX design?
A typography scale is a set of predefined type sizes that follow a consistent mathematical ratio, creating a harmonious and hierarchical relationship between different text levels in an interface. Instead of choosing font sizes arbitrarily for each text element, a type scale defines a base size and a ratio, then derives all other sizes by multiplying or dividing by that ratio. Common ratios include the major third at 1.25, the perfect fourth at 1.333, and the golden ratio at 1.618. These produce different degrees of contrast between type levels, from subtle to dramatic.
Why use a typography scale in interface design?
A consistent type scale creates visual harmony because all type sizes have a mathematical relationship to each other. It supports visual hierarchy by ensuring that the size differences between headings, subheadings, and body text are sufficient to be immediately apparent during scanning. It creates consistency across an interface because all designers and developers work from the same defined set of sizes rather than making independent size decisions. And it integrates naturally with design tokens where type sizes can be stored as named variables and referenced throughout the codebase.
How to choose the right typography scale?
The appropriate scale ratio depends on the visual density and character of the interface. A larger ratio like the golden ratio or major sixth creates dramatic size differences that suit editorial or marketing interfaces with clear typographic hierarchy. A smaller ratio like the major second or minor third creates subtle differences that suit dense data interfaces where many levels of text must coexist without one dominating. The base size matters as much as the ratio: a 16px base with a 1.333 ratio produces different sizes than a 14px base with the same ratio. Test the scale with real content across the different text levels in the interface to verify that the hierarchy reads correctly at every level.