Material typography: scale, tokens and line height

A type scale answers a simple question: what size does each piece of text get. With one in place, the same job looks the same on every screen, and nobody has to invent new sizes screen by screen. The Material Design guide defines 30 type styles in one scale, split into 15 baseline and 15 emphasized styles. The guide also notes that no single product will use all of them. In other words, the scale is a menu to pick from, not a checklist to fill.

The roles and where they appear

The scale organizes styles into five roles that describe their purpose: display, headline, title, body, and label. Each role has three sizes, large, medium, and small. Display styles are the largest text on the screen, reserved for short or important text on large screens. Headlines mark short, high-emphasis text on smaller screens. Titles carry medium-emphasis text that stays short. Body styles cover the longer passages, and labels do the small utilitarian text inside components, such as a button.

From role to token

Each of the 30 styles has a single token that captures all its default properties. That one name holds font, line height, size, tracking, and weight. The guide treats each property as its own token too, for teams that need finer control. In practice, size, weight, and line height move together under one name. A component asks for body medium and gets all three at once.

Your own font on top of the system scale

The scale separates two typefaces. A brand typeface covers the larger styles like headline and display, where expression matters. A plain typeface covers body and label, where readability matters. Roboto is the default for both. The guide suggests replacing Roboto to strengthen brand expression, and it warns against changing the type size, because that can affect how components render and reflow.

Editorial treatment

An editorial treatment is a standalone moment driven by type, where custom sizes grab attention and leave the functional layout behind. The guide uses them to celebrate content, voice the user, or show bespoke features. Variable axes do the work: weight, grade, width, and optical size. Grade is the subtle one. It changes emphasis without reflowing text, which helps when the same text turns heavier in dark mode.

The common mistake

The most common mistake is picking a size by taste and never setting the line height. A size without a line height is only half a style. The guide ties the two together and asks for a line height ratio of about 1.2 for larger styles and about 1.5 for body and label. Set it too tight and the text loses its rhythm. Set it too loose and the lines stop reading as one block. Nielsen Norman Group found that reading speed can differ by 35% between two fonts that are both legible. That is a big gap for a choice people usually make by eye.

What to measure after

Three checks cover most problems. Contrast first: the guide asks for 3:1 on large text and 4.5:1 on small text. Line length second, because a long measure tires the eye. The jump between levels third, since the scale warns against small differences between sizes and asks for real contrast instead.

Where the guide leaves it open

The guide hands over the scale, the roles, and the tokens. It doesn’t decide when a brand is strong enough to leave that scale. It also sets no rule for languages with long compound words, where a headline can overflow a narrow measure. Elsewhere it points out that people read about 28% of the words on an average page. That number matters for a typographic choice, because a reader who scans leans on the visual jump between levels more than on the words. NN/g adds that glancing at a word favors larger, wider, capitalized text while that same all-caps treatment hurts a longer passage, which is a tension the scale itself doesn’t resolve.

For context on these roles, see the post on Material Design, the post on Material tokens and theming, and the post on color roles.