What is a Type Scale?

A type scale is the ordered set of font sizes a design system allows, generated from a base size and a ratio to keep typography consistent.

Definition

A type scale is the ordered set of font sizes a design system permits, usually generated by multiplying a base size by a consistent ratio. Restricting text to those steps is what keeps typography consistent across an interface built by many people.

Also written as: Typographic scale, Modular scale

How a scale is built

Pick a base size, usually 16px because it is the browser default and the size body text should generally be. Pick a ratio. Multiply upward and downward.

A ratio of 1.25 (a major third) from a 16px base gives roughly:

12px  ← 16 / 1.25 / 1.067
14px
16px  ← base
20px
25px
31px
39px

Values are then rounded to something sensible. Common ratios run from 1.125 (subtle, good for dense interfaces) to 1.5 (dramatic, better for marketing pages than for applications).

Why restrict sizes at all

Without a scale, sizes get chosen individually, and an application accumulates 13px, 14px and 15px text that nobody intended to be different. It reads as slightly unresolved without any single thing being identifiably wrong.

A scale also makes vertical rhythm tractable. When sizes relate by a known ratio, line heights and spacing can relate to them predictably instead of being tuned per component.

What a size alone does not cover

A size is only part of a typographic decision. A complete token set pairs each step with:

  • Line height - tighter for headings, looser for body text. Roughly 1.2 for display sizes and 1.5 for body is a reasonable default.
  • Weight - which weights are available at which sizes
  • Letter spacing - large display text usually needs slight negative tracking; small text often needs slight positive

Systems that tokenize size alone leave the other three to be re-decided in every component, which is where inconsistency returns.

Semantic naming

Naming steps by role rather than by size is worth doing for the same reason it is worth doing for colour:

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg describes a size. --font-size-heading-2 describes a decision, and changing what it points at does not require finding every heading.

Choosing the fonts

The usual pairing is a display face with character for headings and a highly legible workhorse for body text. The failure mode is choosing two faces that are similar but not identical, which reads as a mistake rather than a decision. Contrast or match; do not almost-match.

Where this fits with Flash DSM

Generated systems include a font pairing and a full scale with size, weight, line height and letter spacing tokens at every step, chosen to suit the product described in the prompt.

Related terms

  • https://flashdsm.com/glossary/design-token
  • https://flashdsm.com/glossary/design-system
  • https://flashdsm.com/glossary/semantic-token