The scale that is not a scale

5 systems · 62 steps

The type scales of five design systems, read out of the files they ship, with the ratio between every pair of steps computed.

The finding. None of the five is geometric. A type scale in the classical sense multiplies by one constant; across sixty-two steps the ratio between consecutive sizes wanders in every system — Tailwind from 1.111 to 1.333, Material from 1.0 to 1.375. Bootstrap’s top four headings have no fixed size at all, being viewport expressions, so four of its seven steps cannot be written into a specification. Only IBM’s Carbon publishes a formula, and it is additive rather than a ratio: the increment grows by 2px every four steps.

5systems that publish a machine-readable scale

62steps between them

0that are actually geometric

1that publishes a formula at all

What “geometric” means here. A type scale in the classical sense multiplies by one constant — 1.25, or 1.333, or the golden ratio — so every step stands in the same relation to the one below it. Not one of these does that. The ratio between consecutive steps is computed below for every system, and in every case it wanders.

Tailwind CSS

Tailwind Labs · documentation · read from tailwindcss@3.4.17/stubs/config.full.js

Thirteen fixed steps, each with its own line height.

12 xs

14 sm

16 base

18 lg

20 xl

24 2xl

30 3xl

36 4xl

48 5xl

60 6xl

72 7xl

96 8xl

128 9xl

Ratio between steps: 1.1671.1431.1251.1111.2001.2501.2001.3331.2501.2001.3331.333spread 0.222

GOV.UK Design System

Government Digital Service · documentation · read from govuk-frontend@5.7.1/dist/govuk/govuk-frontend.min.css

Every step has two sizes. The mobile value is the first number, the desktop value the second.

16 heading-s

18 heading-m

24 heading-l

32 heading-xl

Ratio between steps: 1.1251.3331.333spread 0.208

Bootstrap 5

Bootstrap · documentation · read from bootstrap@5.3.3/dist/css/bootstrap.css

h1 to h4 have no fixed size: they are viewport expressions that grow continuously. Only h5, h6 and body are a number.

16 h6

16 body

20 h5

— h1

— h2

— h3

— h4

Ratio between steps: 1.0001.250spread 0.250

4 of 7 steps have no fixed size. They are viewport expressions — calc(1.375rem + 1.5vw) — so the size depends on the window and there is no number to put in a specification.

Carbon Design System

IBM · documentation · read from @carbon/type@11.31.0/scss/_scale.scss

The only system here that publishes a formula. It is additive, not a ratio: the increment grows by 2px every four steps, so the ratio between steps falls as the sizes rise.

Published formula. Yn = Yn-1 + {INT[(n-2)/4] + 1} × 2, from 12px

12 step 1

14 step 2

16 step 3

18 step 4

20 step 5

24 step 6

28 step 7

32 step 8

36 step 9

42 step 10

48 step 11

54 step 12

60 step 13

68 step 14

76 step 15

84 step 16

92 step 17

102 step 18

112 step 19

122 step 20

132 step 21

144 step 22

156 step 23

Ratio between steps: 1.1671.1431.1251.1111.2001.1671.1431.1251.1671.1431.1251.1111.1331.1181.1051.0951.1091.0981.0891.0821.0911.083spread 0.118

Material Design 3

Google · documentation · read from @material/web@2.2.0/tokens/v0_192/_md-sys-typescale.scss

Fifteen named roles in five families of three. Named by job, not by size.

11 label-small

12 body-small

12 label-medium

14 body-medium

14 label-large

14 title-small

16 body-large

16 title-medium

22 title-large

24 headline-small

28 headline-medium

32 headline-large

36 display-small

45 display-medium

57 display-large

Ratio between steps: 1.0911.0001.1671.0001.0001.1431.0001.3751.0911.1671.1431.1251.2501.267spread 0.375

Why this matters for a specification

A type scale is one of the few parts of a design that can be written down as numbers and checked. But “I used a 1.25 scale” is a claim these systems would not survive — the ones everybody copies from do not work that way. Their sizes were chosen, one at a time, for jobs.

Which makes the honest version of the claim easier, not harder: name your sizes, name what each one is for, and name the measure they are set at. That is three facts you can evidence, instead of one ratio you cannot.

What this cannot tell you.

Five systems, not a census. These are the ones that publish a machine-readable type scale that could be read without rendering a page. Plenty of systems have a scale and describe it only in prose or in a picture.
Sizes are converted to px at a 16px root. A system whose user has changed the browser’s base size gets different numbers, which is the point of specifying in rem.
“Not geometric” is a fact about the published sizes, not a criticism. Choosing sizes for jobs is a defensible way to build a scale and may be the better one. What it is not is a ratio, and a specification that claims a ratio should be able to show one.
Where a system publishes a viewport expression rather than a size, the expression is recorded and no size is computed. Resolving it at an assumed window would put this survey’s number where the publisher declined to put one.
Line heights are recorded where the token file carries them and are not compared across systems, because they are variously unitless, rem and px.

Source. each publisher’s published token file, at the version named per row · open-source design systems · MIT, Apache-2.0 and OGL as published · retrieved 2026-09-03. This collection is derived · publishers’ own token files.

The documents. Tailwind — font size · GOV.UK — type scale · Carbon — type sets · Material 3 — type scale tokens

The building

The desk