Building a type scale you can actually use

Open the styles of almost any website that has grown over a few years and you will find a collection of font sizes that nobody planned: 15 pixels here, 17 there, a 22 that someone added for one banner, a 31 that nobody remembers choosing. Each was reasonable at the time. Together they make the site feel slightly unsteady, because the reader's eye never learns what each size means.

A type scale fixes this. It is simply a short, deliberate list of sizes, each with a clear job, that you reuse everywhere. Here is how to build one that stays useful rather than becoming another rule nobody follows.

What a type scale actually is

At its simplest, a type scale is a sequence of sizes produced by multiplying a base size by a fixed ratio. If your base is 16 pixels and your ratio is 1.25, you get 16, 20, 25, 31, 39 and so on. Going down, you divide: 12.8, then 10.2.

The ratio matters because it creates consistent jumps. When every step up is the same proportion larger than the last, the hierarchy feels intentional. The reader can tell a section heading from a subheading without thinking about it.

But the maths is only a starting point. The real goal is a set of sizes you can remember, name and apply without opening a calculator.

Step one: choose your base size

The base is the size of your body text, and everything else hangs from it. For most websites, 16 pixels is the minimum sensible base, and many sites read better at 17 or 18. Text that is too small is the most common reason a site feels hard to read on a phone.

A good way to decide: set a paragraph of your real copy at 16, 17 and 18 pixels in your chosen body font, then read each on a phone held at a normal distance. Fonts with small x-heights often need the larger end. Pick the one that feels effortless.

Step two: pick a ratio that suits your content

Ratios are often given names borrowed from music, but you only need to understand the effect:

• Small ratios (around 1.125 to 1.2) give gentle steps. They suit content-heavy sites such as documentation, blogs with many subheadings, or dashboards, where you need several levels of hierarchy without enormous headings.
• Medium ratios (around 1.25 to 1.333) are a sound default for most business websites. Headings stand out clearly while still fitting comfortably on a phone.
• Large ratios (around 1.5 and above) create dramatic contrast. They work for portfolios, event pages or landing pages with few words and big statements, but the top sizes become very large quickly.

If you are unsure, start with 1.25. It rarely looks wrong.

Step three: generate, then round and trim

Run the numbers, then make them human. Here is a scale built from a 16 pixel base with a 1.25 ratio, rounded to whole numbers:

• 13 (small print, captions)
• 16 (body)
• 20 (large body, lead paragraphs, small headings)
• 25 (third-level heading)
• 31 (second-level heading)
• 39 (first-level heading)
• 49 (display, used sparingly)

Rounding is not cheating. Nobody can see the difference between 31.25 and 31 pixels, but you will certainly notice the difference in how easy the numbers are to remember and apply.

Now trim. Most sites do not need seven sizes. A local plumber's website might genuinely use only five: caption, body, small heading, page heading and hero headline. Every size you remove is one fewer decision for everyone who touches the site later.

Step four: give each size a name and a job

A list of numbers is easy to ignore. A list of roles is much harder to break. Name each size by what it does rather than how big it is:

• Caption: image captions, legal notes, timestamps.
• Body: paragraphs, list items, form inputs.
• Lead: the introductory paragraph under a page title.
• Heading small: card titles, sidebar headings.
• Heading medium: section headings within a page.
• Heading large: the page title.
• Display: the hero headline on the home page, and nowhere else.

When someone later wants a "slightly bigger" heading for a promotional block, the answer becomes a question: which role is it? Usually one of the existing sizes fits.

Step five: set line height and weight alongside size

Size alone does not make a style. Each role in your scale should have a matching line height and weight, because large text needs proportionally less leading than small text.

A rough starting point:

• Body and caption: line height around 1.5 to 1.6.
• Small and medium headings: around 1.25 to 1.35.
• Large headings and display: around 1.1 to 1.2.

Large headings with body-style line height look loose and disconnected when they wrap onto two lines. Tightening them makes a wrapped headline read as a single thought.

Step six: make it work on small screens

A 49 pixel display heading is lovely on a laptop and overwhelming on a phone, where it might fit only two or three words per line. The simplest fix is to use a smaller ratio on narrow screens. Keep your base the same, but compress the steps so the top of the scale shrinks while body text stays readable.

With CSS, you can let the larger sizes shrink smoothly between a minimum and maximum using the clamp function:

h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); }

This keeps the heading at 2rem on small screens, lets it grow with the viewport, and caps it at 3rem on wide ones. You do not need to do this for every size. Body text and captions are usually best left fixed, and only the top two or three sizes need to flex.

Keeping the scale alive

A scale only helps if it is used. A few habits keep it intact:

• Store sizes as named variables or styles, never as one-off numbers typed into individual elements.
• When a design seems to need a new size, try every existing size first. It usually does not.
• Review the site once in a while and look for strays. Fold them back into the nearest role.

Your type scale checklist

• Body size chosen by reading real copy on a phone, usually 16 to 18 pixels.
• One ratio selected to suit the amount of content and hierarchy you need.
• Sizes rounded to whole numbers and trimmed to five to seven.
• Every size named by its role, not its pixel value.
• Line height and weight defined for each role.
• Larger sizes adjusted for narrow screens.
• All sizes stored as reusable styles, with no stray values.

A good type scale is not impressive to look at. It is a short list that quietly makes every page feel like it belongs to the same site, and that is exactly the point.