Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Type Scale

A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.

Definition

A type scale is an ordered set of font sizes generated from a base size and a ratio. Restricting the interface to these sizes produces consistent relationships and removes a recurring decision.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. A working interface scale
  3. Practical constraints
  4. In practice
  5. Sources
  6. Continue from here
Atlas39 / displayAtlas31 / page titleAtlas25 / sectionAtlas20 / leadAtlas16 / bodyAtlas14 / secondaryAtlas12 / meta
A 1.25 ratio scale from a 16px base. Steps are distinguishable without being dramatic, which suits dense interfaces.

A working interface scale

Base 16px, ratio 1.25, rounded to whole pixels. Roles are indicative, not prescriptive.

TokenSizeLine heightTypical role
text-xs12px16pxMetadata, table captions, legal text.
text-sm14px20pxSecondary text, dense table cells, form hints.
text-base16px24pxBody text. Never smaller for sustained reading.
text-lg20px28pxLead paragraphs, card titles.
text-xl25px32pxSection headings.
text-2xl31px38pxPage headings.
text-3xl39px46pxDisplay, used sparingly.

Practical constraints

  • 16px is the practical floor for body text. Smaller sizes trigger zoom on iOS form inputs and fail readability for many users.
  • Round to whole pixels for interface sizes. Fractional sizes render inconsistently across platforms.
  • Six to eight steps is usually enough. More steps means indistinguishable neighbours and arbitrary choices.
  • Pair each size with a line height in the scale, so the two are never chosen independently.
  • Define the scale in rem so it respects the user's browser font size setting.

In practice

Different scales for marketing and product

Design systems

Marketing surfaces often use a larger ratio for drama while the product uses a tighter one for density. Both derive from the same base, which keeps them recognisably related.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.