Design a Fluid Type Scale

Layout & Responsive · typography, responsive, hierarchy

Updated 2026-07-28

Scale type between sizes rather than switching at breakpoints. Fixed steps mean the headline is right at two widths and wrong at every width in between.
Set a floor and a ceiling for every step. Text that keeps growing on a wide monitor becomes a billboard, and text that keeps shrinking on a narrow phone becomes unreadable.
Scale headings more than body copy. Large type has room to move, but body text has a comfortable range of roughly sixteen to eighteen pixels no matter how big the screen is.
Keep the line length in the target range as the size changes. Measure, not font size, is what decides whether a paragraph is comfortable, so cap the container as well as the type.
Tighten line height as size increases. A ratio that reads well at body size looks loose and disconnected at display size.
Tighten letter spacing on large type and loosen it on small uppercase labels. A single tracking value across the scale will look wrong at both ends.
Respect the user's own font size. A scale built entirely on viewport width ignores people who have already told the browser they want larger text.
Keep the steps distinct. If two levels end up within a pixel or two on common screens, the hierarchy disappears and you have two names for the same size.

A type scale is a system of relationships, and fluid sizing only works when the relationships hold at every width.