Create a balanced typography scale.

A type scale: sizes that belong together

Most layouts do not need more fonts.
They need better sizes.

Open any page that feels messy. Count the font sizes. Often there are nine or ten. 13, 14, 15, 17, 19, 22, 26, 31…
Every size was chosen on its own. None of them were chosen together.

A type scale fixes that. It is a short list of sizes, all related by one number.
Nobody sees the math. Everybody feels the calm.

✦ Why sizes matter more than fonts

People scan before they read. In the first seconds, the eye looks for order. What is the title? What belongs together? Where do I start?

Size answers those questions faster than any other tool. Faster than color. Faster than bold.
That is why a clear set of sizes is the backbone of every good layout. A beautiful font on a random set of sizes still looks unsure of itself.

✦ How a scale works

You need two things. A base size and a ratio.

The base size is your body text. On screens that is usually 16 pixels.
The ratio is the step between sizes. Multiply the base by the ratio and you get the next size up. Divide and you get the next size down.

An example with base 16 and ratio 1.25:

• 12.8 px — small labels, captions, legal lines
• 16 px — body text
• 20 px — lead text, small headings
• 25 px — section headings
• 31.25 px — page headings
• 39.06 px — large titles
• 48.83 px — hero or display text

Seven sizes. One logic. You may round them to 13, 16, 20, 25, 31, 39 and 49. The relationship stays intact.

✦ The ratios and their character

The names come from music. A major third is the interval between do and mi. In sound, the two notes vibrate in a 5 to 4 relation. That is 1.25.
It is a lovely idea: sizes that sound good together.

• 1.125 (minor second). Very small steps. For interfaces with a lot of information and little room.
• 1.2 (minor third). Subtle. Good for apps, dashboards and documentation.
• 1.25 (major third). Balanced. A safe start for most websites.
• 1.333 (perfect fourth). Clear steps. Good for blogs, magazines and portfolios.
• 1.414 (augmented fourth). Strong contrast. The same ratio as an A4 sheet.
• 1.5 (perfect fifth). Dramatic. Big headings, confident pages.
• 1.618 (golden ratio). Very expressive. Beautiful on large screens. Easily too loud on a phone.

A small ratio feels quiet and precise. A large ratio feels bold and editorial.
Choose the ratio the way you choose a tone of voice.

✦ How to use this generator

1. Enter your base size. Start with 16.
2. Choose a scale ratio from the list. Start with Major Third, 1.25.
3. Type your own preview text. A real headline from your project works better than a sample.
4. Look at the steps. Is the difference between two neighbors clear enough? If not, choose a larger ratio.
5. Click Copy CSS and paste the variables into your stylesheet.
6. Use Reset to start again with a different combination.

Then the most important step. Use only these sizes. No exceptions "just for this one button".
Every exception makes the next exception easier.

✦ Choosing the base size

16 pixels is the default in every browser. It is a minimum, not a goal.
For long reading, 17 to 20 pixels is often more comfortable. For dense tools, 14 or 15 can work for labels, but rarely for paragraphs.

Test on a phone, at arm's length. Read a full paragraph. If you lean in, the base is too small.

✦ How many steps do you need?

Fewer than you think.
Most sites work with four to six sizes: small, body, heading, large heading, and sometimes one display size.

Give the steps names that describe their job. --text-small, --text-body, --heading-2, --heading-1.
Then your CSS explains itself. And a new colleague uses the right size without asking.

✦ Line height changes with size

Small text needs air. Body text works well around 1.5 to 1.6 times the font size.
Large headings need less. Around 1.1 to 1.25. With too much line height, a two-line heading falls apart into two separate lines.

Spacing can follow the scale too. The gap above a heading can use a step from the same series. That is how a page gets rhythm: sizes and spaces that belong to one system.

✦ Line length

A good size can still be tiring if lines are too long.
Aim for roughly 45 to 75 characters per line for body text. Around 65 feels natural to most readers.

On a wide screen, do not let paragraphs run from edge to edge. Give the text column a maximum width. Let the space around it breathe.

✦ Mobile and desktop

A dramatic scale that looks great on a laptop can shout on a phone. A 49-pixel heading fills half the screen.

Two solutions. Use a smaller ratio on mobile and a larger ratio on desktop. Or let CSS scale the sizes smoothly with clamp(), for example font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem).
The heading grows with the screen, but never below or above the limits you set.

✦ Pixels or rem?

Design in pixels if that helps you think. Build in rem.
One rem is the browser's base size, usually 16 pixels. When visitors enlarge their default text size, everything in rem grows with it. Everything in pixels stays stuck.

That is not a detail. For people with low vision it decides whether they can read your site at all.

✦ In practice

A blog. Base 18 pixels, ratio 1.25. Headings at about 22, 28 and 35 pixels.
Enough difference to scan. Calm enough to read for ten minutes.

A dashboard or web app. Base 14 or 16 pixels, ratio 1.2. Many small labels, few large headings.
Space is scarce. Small steps keep the interface tidy.

A campaign landing page. Base 16 pixels, ratio 1.5 on desktop. The headline gets big and bold.
On mobile the ratio drops to 1.25, so the headline still fits in two or three lines.

A presentation. Fewer steps, larger base. Body at 28 pixels or more, one heading size, one title size.
People read slides from a distance. The scale should respect that.

✦ Four questions before you choose a ratio

1. What do you want to say? Quiet and informative, or loud and expressive?
2. What must be seen first? Only that heading gets the largest size.
3. What can go? Extra in-between sizes. Round them to the nearest step in the scale.
4. What is the next small step? Replace every font size in your CSS with a scale variable.

✦ Common mistakes

• Body text that is too small. 16 pixels is a minimum on screens.
• Headings that differ by one or two pixels. They look like mistakes, not choices.
• Using size, bold, color and capitals at the same time to show importance. Pick one or two.
• A different scale on every page of the same site.
• Copying a scale from another site without checking it with your own font. Some fonts look larger or smaller at the same size.
• Forgetting the small end of the scale. Captions and labels need a planned size too.

✦ A small checklist

• Body text is at least 16 pixels on screen.
• Four to six sizes in total, each with a named job.
• Line height is tighter for headings than for text.
• Paragraphs have a maximum line length.
• Sizes are stored as variables in rem, not typed by hand.
• The scale is checked on a phone and a large screen.

✦ Try this

The one-size page. Set a whole page in 16 pixels. No size differences at all. Create hierarchy only with space, weight and position.
It is harder than it sounds. It shows how much work size normally does for you.

The three-ratio test. Set the same page with 1.2, 1.333 and 1.5. Print all three or place them side by side.
Which one fits the content? Not the prettiest. The one that fits.

✦ Words worth knowing

• Base size. The size of your body text. Everything is measured from here.
• Ratio. The multiplier between two neighboring sizes.
• Hierarchy. The order in which things are seen and read.
• Leading. The space between lines. In CSS: line-height.
• Measure. The length of a line of text.

✦ From the classroom

We start with one size only. A whole page in 16 pixels. Hierarchy through space and weight.
Then we add a scale. Students are always surprised how few sizes they really need.

Fewer sizes. Clearer steps. More calm.
That is the whole idea.