Building a type scale

01Why use a scale

A type scale is a short, fixed list of font sizes that a whole interface draws from. Instead of choosing 17 px here and 19 px there, designers pick from the list. The result is consistent screens and a clear hierarchy, because each step is visibly different from its neighbours.

A scale also speeds up handoff. Developers receive a handful of named styles rather than dozens of one-off values.

02Pick a base size and a ratio

Start with the body size. On the web, 16 px is the common default and a sensible base. Then choose a ratio and multiply step by step. Familiar ratios include 1.2 (minor third), 1.25 (major third) and 1.333 (perfect fourth). A smaller ratio gives a calm scale; a larger one gives stronger contrast between levels.

Example with a base of 16 px and a ratio of 1.25, rounded to whole pixels:

• Body: 16 px
• Step 1: 16 × 1.25 = 20 px
• Step 2: 20 × 1.25 = 25 px
• Step 3: 25 × 1.25 ≈ 31 px
• Step 4: 31.25 × 1.25 ≈ 39 px

Limit the scale to about five to seven sizes. More steps blur the hierarchy.

03Set line height per size

One line height does not suit every size. Body text usually reads well with a generous value, commonly around 1.4 to 1.6. Large headings need tighter spacing, often around 1.1 to 1.3, because big text with loose lines looks disconnected.

Arabic script often needs a little more line height than Latin, because letters carry dots and marks above and below the line. Test real Arabic text, not placeholder Latin.

04Responsive sizes, weight and naming

Large headings that fit on a desktop can overflow a phone. CSS <code>clamp()</code> lets a size grow smoothly between a minimum and a maximum:

Example: this value never drops below 1.75rem or exceeds 2.5rem. <code>font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);</code>

Weight is a second axis. Use two or three weights, such as regular, medium and bold, so that size and weight work together without needing many extra sizes.

1. Choose the body size and a ratio.
2. Generate five to seven sizes and round them.
3. Assign a line height to each size.
4. Name the styles by role, such as heading and caption.
5. Apply clamp() to the largest sizes.

Once the sizes exist, give them names that describe their job instead of their pixel value. Names such as display, heading-1, heading-2, body, small and caption stay valid when a size changes. A name like 25px-bold does not.

• Display and heading styles: large, tight line height, bolder weight.
• Body: the 16 px base, relaxed line height, regular weight.
• Small and caption: use sparingly, and keep them readable. Very small text is hard to read for many people.

Also use relative units such as rem, so text respects the size people set in their browser.

05Sources

• MDN Web Docs. clamp() - CSS: Cascading Style Sheets. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp