Type Scales That Work: A Practical Guide for Product Interfaces

Open the styles panel of almost any mature product and you'll find it: fourteen font sizes, eight weights, line heights chosen one screen at a time. Nobody planned it. It accumulated.

A type scale is the fix — a small, deliberate set of sizes and styles that covers every need in your interface. Here's how to build one that holds up.

Start with fewer sizes than you think

Product interfaces need surprisingly few text sizes. Most can be covered by six to eight:

Role	Typical use	Example size
Display	Marketing headers, empty states	40–56px
Heading 1	Page titles	28–32px
Heading 2	Section titles	20–24px
Heading 3	Card and panel titles	16–18px
Body	Default text	14–16px
Small	Secondary info, captions	12–13px
Label	Overlines, table headers	11–12px

If you need a size that isn't on the scale, first ask whether one of the existing sizes would do. Usually it will.

Choose a ratio, then round

A common approach is a modular scale: each step is the previous size multiplied by a ratio, such as 1.2 (subtle) or 1.25 (more contrast).

Starting at 16px with a ratio of 1.25 gives 16, 20, 25, 31, 39, 49. In practice, round to whole numbers that sit well on your spacing grid — 16, 20, 24, 32, 40, 48. The ratio gets you a harmonious starting point; your eye makes the final call.

Dense interfaces like dashboards and admin tools usually want a smaller ratio. Editorial and marketing pages can afford a larger one.

Line height shrinks as size grows

Body text needs generous line height to be readable — roughly 1.5. Large headings look loose at that spacing and need less, closer to 1.1–1.2.

A simple set of rules:

• Body and small text: 1.5
• Headings 20–32px: 1.25
• Display sizes: 1.1

Express line heights in values that keep text aligned to a 4px grid where you can. It makes vertical rhythm much easier to maintain.

Letter spacing: tighten big, loosen small

Most typefaces are designed for reading sizes. At large sizes they look slightly loose; at very small sizes, slightly cramped.

• Display and large headings: tighten slightly (around −1% to −3%).
• Body: leave at default.
• Small uppercase labels: loosen (around +4% to +8%).

Use weight sparingly

Two or three weights are plenty: regular for body, medium or semibold for headings and emphasis, and perhaps bold for rare cases. Every extra weight is another font file to load and another decision for every designer.

Hierarchy comes from the combination of size, weight and colour. A smaller heading in a darker colour and medium weight can outrank a larger one in grey.

Name roles, not sizes

Name your styles by purpose — heading-2, body, label — rather than by size like text-20. Purpose-based names let you adjust the actual values later (for example, on mobile) without renaming anything, and they make it obvious which style to use.

Responsive type without the headache

Large display sizes often need to shrink on small screens. Keep it simple:

• Body and small sizes rarely need to change.
• Headings and display text can step down one or two levels on mobile.
• Fluid sizing with CSS clamp() lets large text scale smoothly between a minimum and maximum.

Document it in one place

A type scale only works if everyone uses it. Put it in your design tool as text styles and in code as tokens or utility classes, with the same names in both. Show each style with real example content, not "Lorem ipsum."

A quick audit for existing products

1. List every font size currently used in your product.
2. Group them by the role they serve.
3. Map each group to a single size on your new scale.
4. Replace them gradually, starting with the most-used screens.

The result is less visual noise, faster design decisions, and an interface that feels calmer and more intentional — without anyone being able to say exactly why.