# Type scale: sizes that look related, with ratios

[Canonical HTML page](https://gradiently.design/guide/typographic-scale)

Pick font sizes by feel and they drift: 18, 22, 23, 30, 31. A type scale replaces those guesses with one base size and one ratio, so every size looks like it belongs to the same family.

## The short version

- A type scale is a short set of font sizes made by multiplying a base size by the same ratio again and again.
- Small ratios such as 1.2 suit dense interfaces, while large ratios such as 1.5 suit posters, social posts and landing pages.
- With a 16 px base and a 1.25 ratio, the scale runs 16, 20, 25, 31, 39 and 49 px.
- Most designs need only five or six sizes, and rounding the results to whole pixels is fine.
- In CSS, a type scale is easiest to maintain as custom properties, made fluid with clamp().

A **type scale** is a set of font sizes built from one base size and one ratio. You start with your body size, say 16 px, and multiply it by the ratio to get the next size up, then multiply again for the next. With a ratio of 1.25 you get 16, 20, 25, 31, 39 and 49 px. Because each step grows by the same proportion, the sizes look related, and choosing a heading size stops being a guess.

## Why a type scale makes sizes look related

The eye reads size as proportion, not as pixels. The jump from 16 to 20 feels the same as the jump from 39 to 49, because both are a quarter bigger. Sizes picked by feel tend to bunch together in some places and leave gaps in others, so two headings end up almost the same size and look like a mistake. A scale gives every level a clear, consistent step, which is the backbone of [visual hierarchy](https://gradiently.design/guide/visual-hierarchy).

## Common type scale ratios compared

Many popular ratios borrow their names from musical intervals, and a scale built this way is often called a modular scale. The name matters less than the size of the step: the bigger the ratio, the more drama between levels and the fewer levels fit on a page.

| Name | Ratio | Feel | Good for |
| --- | --- | --- | --- |
| Minor second | 1.067 | Barely different | Dense data tables, small screens |
| Major second | 1.125 | Gentle | Apps and dashboards |
| Minor third | 1.2 | Calm and clear | Interfaces, documentation, long reading |
| Major third | 1.25 | Balanced | Websites and blogs, a safe default |
| Perfect fourth | 1.333 | Confident | Marketing pages, editorial |
| Augmented fourth | 1.414 | Strong | Landing pages, presentations |
| Perfect fifth | 1.5 | Bold | Posters, social posts, big headlines |
| Golden ratio | 1.618 | Dramatic | Display type with few levels |

Common ratios from small to large. If in doubt, start at 1.25 for the web and 1.5 for social posts.

## Type scale values in pixels

Here is the same 16 px base run through four ratios. Notice how fast the large ratios climb: by step 4, a 1.5 scale is already at 81 px, while a 1.2 scale is at 33 px.

| Step | 1.2 | 1.25 | 1.333 | 1.5 |
| --- | --- | --- | --- | --- |
| Small (step −1) | 13 | 13 | 12 | 11 |
| Body (base) | 16 | 16 | 16 | 16 |
| Step 1 | 19 | 20 | 21 | 24 |
| Step 2 | 23 | 25 | 28 | 36 |
| Step 3 | 28 | 31 | 38 | 54 |
| Step 4 | 33 | 39 | 51 | 81 |
| Step 5 | 40 | 49 | 67 | 122 |

Values rounded to whole pixels. The step below the base is the base divided by the ratio, used for captions and labels.

Rounding is fine. Nobody can see the difference between 31.25 and 31 px, and whole numbers are easier to remember and to line up on a grid.

## How to build your own type scale

1. **Choose the base size** This is your body text. 16 to 18 px suits most websites; on a 1080 px social canvas, start at 40 px.
2. **Pick a ratio from the content** Lots of text and many heading levels want a small ratio. Few words and one big headline want a large one.
3. **Generate five or six steps** Multiply up for headings and divide once for small text. Most designs never use more than six sizes.
4. **Round and name them** Round to whole pixels and name the steps by role, such as caption, body, title and display, not by number.
5. **Set line height per step** Bigger sizes need tighter leading. Body around 1.5, titles around 1.2, display type near 1.0.
6. **Test with real words** Set a real headline, subheading and paragraph. If two steps look too similar, skip one or raise the ratio.

## A type scale for social posts

Social posts need a bigger ratio than web pages, because a 1080 px canvas shrinks to a third of its width on a phone and there are only two or three levels of text. A 40 px base with a 1.5 ratio gives 40, 60, 90 and 135 px, which lines up neatly with the sizes in [font size for Instagram posts](https://gradiently.design/guide/font-size-for-social-media).

A portrait social post with a large statistic reading 3 times faster checkout above smaller supporting text

A stat post needs three clear levels: the figure, the detail and the label. On a 1.5 scale those are 135, 60 and 40 px.

A portrait carousel slide titled Before you post with a short checklist underneath

A list slide uses the lower steps of the same scale, so it sits comfortably beside the stat slide in one carousel.

Using one scale across every slide of a carousel is what makes a set look designed rather than assembled. The same sizes in the same roles, slide after slide. [Text layout for social media posts](https://gradiently.design/guide/text-hierarchy-social) shows how to arrange them.

## How to write a type scale in CSS

Store the scale as custom properties so every component pulls from it. You can chain multiplications with `calc()`, or write the rounded values out. For a scale that grows with the screen, give each step a [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) range: a minimum for phones, a maximum for wide screens and a fluid value between.

```css
/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }
```

Change `--ratio` once and every step updates. Keep `rem` in the minimum of each clamp so text still respects the reader's own font size setting.

### Avoid

- Ten sizes when five would do
- Two headings 2 px apart
- The same ratio for a dashboard and a poster
- Fixed pixel sizes that ignore the reader's font settings

### Do

- Five or six steps, each with a named role
- Skip a step if two levels look alike
- Small ratio for dense screens, large for few words
- rem based sizes, fluid with clamp()

A scale is one part of a larger set of decisions about fonts, spacing and roles. [Typography system](https://gradiently.design/guide/brand-typography-system) brings them together, and [tracking vs kerning](https://gradiently.design/guide/tracking-vs-kerning) covers the spacing values that pair with each step. If you design social content, Gradiently's brand kit holds your heading and body fonts and the Designer applies them to every new size, which makes a scale you settle on once easy to keep.

## FAQ

### What is a type scale?

A set of font sizes made by multiplying a base size by the same ratio repeatedly, so every size is proportionally related to the others.

### What is the best type scale ratio?

There is no single best one. 1.2 or 1.25 suits websites and apps with lots of text; 1.5 or more suits posters and social posts with few words.

### How many font sizes should a design use?

Usually five or six: a small size, body, two or three heading levels and one display size.

### Should I round type scale values?

Yes. Rounding to whole pixels makes no visible difference and makes the scale easier to use and remember.

### How do I make a type scale responsive in CSS?

Use `clamp()` for each step, with a minimum in rem, a fluid middle value using viewport units, and a maximum for wide screens.