How to Build a Type Scale

If your headings and text sizes feel random, the problem is usually a missing system. A type scale is that system, a fixed set of font sizes that relate to each other by a simple ratio. It turns dozens of guesswork decisions into one clear, reusable rule.

This guide is for designers, developers, and founders who want type that feels intentional on every page. I will explain modular scales and ratios, give you a ready-to-use px and rem table, cover responsive type, and walk through a full worked example. By the end you will be able to build a scale for any brand in minutes.

What you will learn

• What a type scale is and why it makes design easier
• How a modular scale and ratio actually work
• A complete px and rem scale table you can copy
• How to make your type responsive across screen sizes
• A full worked example from base size to finished steps

What is a type scale?

A type scale is a defined set of font sizes used across a brand or product. Instead of choosing sizes at random, you pick a base size and a ratio, then generate every other size from them. The result is a small, harmonious set of steps that always look related.

The benefit is consistency and speed. Every heading and label pulls from the same set, so pages feel unified without effort. It is the typographic equivalent of a spacing system, and it pairs naturally with a full brand typography system.

How a modular scale works

A modular scale starts with two inputs: a base size and a ratio. The base is your body text size, often 16px. The ratio is the multiplier you apply to step up or down in size.

To get the next size up, multiply the current size by the ratio. To get the next size down, divide by it. Repeat, and you have a full scale that grows and shrinks in even, musical steps.

Choosing a ratio

The ratio controls how dramatic your jumps in size are. A small ratio keeps sizes close and calm. A large ratio creates bold, high-contrast headings.

Many ratios come from musical intervals, which is where the names come from. Here are the common ones and the feel each gives.

If you are unsure, 1.25 (the major third) is a reliable default. It gives clear hierarchy without extreme jumps. You can always tune it later.

A ready-to-use px and rem scale table

Here is a full scale built from a 16px base and a 1.25 ratio. It shows pixels and rems, since rem is the unit most teams use in code. One rem equals the root font size, usually 16px, so 1rem is 16px.

You can copy these values straight into your design tokens or CSS. Round the pixel values for cleaner numbers if you like, the small rounding will not break the harmony. To generate your own, the free tool at typescale.com is handy, and the units are explained well on MDN.

Why use rem instead of px?

Pixels are fixed, but rems scale with the user's root font size. If someone increases their browser's default text size for readability, rem-based type grows with it. Pixel type does not, which can hurt accessibility.

So a good habit is to define your scale in rem for font sizes. Set the root size once, and your whole scale respects user preferences. This is a small change that makes your brand kinder to everyone.

Making type responsive

A size that looks great on desktop can feel huge on a phone. Responsive type adjusts sizes across screen widths so headings stay in proportion. There are three common ways to do this.

Fluid type uses the CSS clamp function, which sets a minimum, a preferred, and a maximum size. For example, a heading might read clamp(2rem, 5vw, 3rem). That means it never goes below 2rem, never above 3rem, and scales with the viewport in between.

Line height and the scale

Font size is only half of readable type. Line height, the space between lines, matters just as much. As a rule, body text wants a line height around 1.5, while large headings can go tighter, around 1.1 to 1.2.

Bigger text needs proportionally less line spacing, and small text needs more. Tie line height to each step in your scale so it travels with the size. This keeps paragraphs comfortable and headings tight.

A full worked example

Let us build a scale for a fictional product brand called Northwind. Follow the same steps for any project.

1. Pick the base. Body text at 16px, since that reads well on screens.
2. Pick the ratio. The major third, 1.25, for clear but calm hierarchy.
3. Step up. 16 to 20 to 25 to 31 to 39 to 49 to 61, multiplying by 1.25 each time.
4. Step down. 16 divided by 1.25 gives 13 for captions.
5. Assign roles. Map each size to body, lead, H4, H3, H2, H1, and display.
6. Set line heights. Body at 1.5, headings tightening from 1.3 down to 1.1.
7. Add responsive rules. Use clamp so the display and H1 shrink on mobile.
8. Save as tokens. Record each size in rem in your design system.

That gives Northwind a complete, defensible scale in a few minutes. The same recipe works whether you use 1.2 for a dense app or 1.5 for a bold landing page.

Want to apply your scale to a real brand book? Open the Zepixo Brand Guidelines workspace and set your sizes on an editable Typography page in minutes.

Common type scale mistakes

A few errors weaken even a well-built scale. Knowing them keeps your type tidy. Here are the ones to avoid.

The fix is always the same discipline. Define the set once, use only those sizes, and let the ratio do the work. For the broader system, see our brand typography complete guide and our roundup of the best fonts for branding.

Frequently asked questions

What is a type scale?

A type scale is a defined set of font sizes built from a base size and a ratio. Each size is the previous one multiplied or divided by the ratio. It keeps headings and text consistent across a brand.

What ratio should I use for a type scale?

A ratio of 1.25, the major third, is a reliable default for most brands. Use a smaller ratio like 1.2 for dense interfaces and a larger one like 1.414 for bold marketing pages. Test it with real content before locking it.

Should I use px or rem for font sizes?

Use rem for font sizes so type respects the user's preferred text size. Rem scales with the root font size, which helps accessibility. Pixels are fixed and ignore those preferences.

How many sizes should a type scale have?

Most brands need five to eight sizes, from a caption up to a display heading. Too many steps make choices harder and invite drift. Keep the set small and assign each size a clear role.

How do I make type responsive?

Use breakpoints, a two-ratio scale, or fluid type with the CSS clamp function. Clamp sets a minimum, preferred, and maximum size so text scales smoothly. The goal is for headings to stay in proportion on every screen.

What line height should I use?

Body text reads well around 1.5, while large headings can tighten to roughly 1.1 to 1.2. Bigger text needs less line spacing and small text needs more. Tie line height to each step in your scale.

Pick a base, pick a ratio, generate your steps once, and every page you ship will feel like it was designed by the same careful hand.