# Type That Reads Well: Scale, Line Length and Pairing

Text reads well when its sizes come from a type scale in rem, its lines hold about 45 to 75 characters, its line height suits body text and headings, and the page uses two fonts at most.

Journeyman · CSS · Web Development · Updated November 1, 2026

## After this lesson you can

- Build a type scale in rem, with each size a fixed step up from the one below
- Keep text readable with a line length of about 45 to 75 characters and a line height that suits body text and headings
- Pair at most two fonts, and add letter spacing only where it helps

## Key takeaways

- A type scale picks one ratio, such as 1.25, and makes each text size that many times the one below it, so the sizes look like they belong together.
- Write the scale in rem, so every size follows the reader's own text setting.
- Lines of about 45 to 75 characters are the most comfortable to read. max-width in ch, such as `max-width: 65ch`, keeps them there.
- Body text reads well with a line height of about 1.5. Big headings need less, about 1.1 to 1.3.
- Use two fonts at most, one for headings and one for body text, and add letter spacing only to short lines in capital letters.

Most of what people do on a web page is read: a recipe, a class syllabus, the details of a job, the market's list of vendors. When the text is right, nobody notices it. When it's wrong, people feel it before they can name it: the lines are so long they lose their place, the headings are random sizes, or there are four fonts fighting. You'll use this lesson on every page with more than a sentence on it: a blog, a portfolio, a menu, the report your class asks you to put online.

## A type scale: steps of the same height

A staircase with steps of random heights is tiring and a little scary: you can't find a rhythm. Steps that all rise the same amount feel natural. Text sizes are the same. A page with sizes of 14, 17, 22, 23 and 31 pixels feels off, even when no single size is wrong.

A **type scale** fixes that. Pick a starting size (your body text, `1rem`) and one number, the **ratio**, such as 1.25. Each size up the scale is the one below it times the ratio:

| Step | Math | Size | Used for |
|---|---|---|---|
| 0 | 1 | `1rem` | body text |
| 1 | 1 × 1.25 | `1.25rem` | `h3`, vendor names |
| 2 | 1.25 × 1.25 | `1.563rem` | `h2`, section headings |
| 3 | 1.563 × 1.25 | `1.953rem` | `h1` on a phone |
| 4 | 1.953 × 1.25 | `2.441rem` | `h1`, the market's name |

Read `1 × 1.25` as "one times one point two five". The sizes are rounded to three decimal places, which is far finer than a screen can show. A smaller ratio, such as 1.2, gives gentle steps for a page full of text; a bigger one, such as 1.333 or 1.5, gives dramatic steps for a poster-like landing page. Type tools and design classes sometimes call these ratios by musical names, such as a *major third* (1.25) or a *perfect fourth* (1.333).

```css
body { font-size: 1rem; }
h3 { font-size: 1.25rem; }
h2 { font-size: 1.563rem; }
h1 { font-size: 2.441rem; }
```

The scale is written in **rem**: `1rem` is the reader's normal text size, 16 pixels unless they've changed it. Someone who has set their browser's text bigger, because small print is hard for them to read, gets every step of the scale bigger too, in the same proportions. Sizes in `px` ignore that setting.

**Try it.** In the `farmers-market` page from *Hierarchy, Alignment and Whitespace* (or any page with headings), put in the four rules above. Then try a ratio of 1.5 instead: step 1 is `1.5rem`, step 2 is `2.25rem` and step 4 is about `5.063rem`. Which suits a market's event page better?

## Line length: about 45 to 75 characters

Newspapers print in narrow columns for a reason. At the end of a line, your eye has to swing back to the start of the next one. When a line is very long, you land on the wrong line and read the same one twice. When it's very short, your eye swings back every couple of words, and reading gets choppy. Comfortable reading sits at about **45 to 75 characters a line**, spaces included.

On a wide laptop, a paragraph with no limit can run 200 characters across. CSS has a unit made for this, the **ch** unit, read "c h" or "character": `1ch` is the width of the zero (`0`) in the element's font. Most letters are about that wide or narrower, so `65ch` holds about 65 characters or a few more:

```css
p {
  max-width: 65ch;
}
```

`max-width` means "up to this wide, and narrower when there isn't room", so on a phone the paragraph still shrinks to fit the screen. Because `ch` follows the font, the line length stays right when the reader makes their text bigger. (The `ch` unit is also in *calc(), min() and max(): Math in CSS*, if you'd like more examples.)

**Try it.** Make your browser window as wide as it goes, and look at a paragraph before and after you add `max-width: 65ch`. Count the characters in one line of each, roughly: a long line often runs past 150.

## Line height: room between the lines

Ruled notebook paper has its lines far enough apart that your handwriting doesn't touch the line above. Text needs the same room. **Line height** is the height of each line of text, the letters plus the space above and below them, and `line-height` sets it.

Body text reads well at about **1.5** (one and a half times the text's own size), and anywhere from 1.4 to 1.7 works. Headings are big, so the same 1.5 would leave a gap that pulls a two-line heading apart; they look better at about **1.1 to 1.3**:

```css
body {
  line-height: 1.5;
}

h1,
h2,
h3 {
  line-height: 1.2;
}
```

Write `line-height` with no unit, as a plain number. A plain number means "times this element's own font size", so a `1rem` paragraph gets 1.5rem lines and a `2.441rem` heading gets lines 1.2 times its own size. With a unit, such as `24px`, every element gets the same 24 pixels, and a big heading's lines crash into each other.

![Three copies of the same paragraph from the market's page: at line-height 1 the lines nearly touch, at 1.5 they read comfortably, and at 2.5 the lines drift apart so the paragraph no longer looks like one block](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/4085b8d783db4f9ba470e9dc50c369c8.webp)

## Two fonts at most

A wedding invitation might use a flowing script for the couple's names and a plain font for the date and the address. Two fonts, each with a job. Add a third and a fourth, and it starts to look like a ransom note.

**Font pairing** is choosing fonts that work together. Two fonts are plenty for almost any site:

- **One for headings**, which can have some personality: a serif (letters with small "feet"), a bold sans-serif, a rounded font for a playful brand.
- **One for body text**, which must be calm and clear at a small size. Most screens use a sans-serif.

Make the two clearly different, such as a serif for headings and a sans-serif for text. Two fonts that are almost alike look like a mistake. One font family in two weights, regular for text and bold for headings, is also a pairing, and a very safe one.

```css
body {
  font-family: system-ui, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
}
```

The market's headings get Georgia, a sturdy serif that feels like a printed farm-stand sign, and the text gets the device's own interface font (`system-ui`), which is made for reading on that screen.

## Letter spacing, with a light touch

**Letter spacing** is the space between letters, set with `letter-spacing`. A type designer has already spaced every font carefully for normal text, so leave body text alone. Two places where a small change helps:

- **Short lines in capital letters**, such as a label or a button. Capitals are made to sit next to lowercase letters, so in a row of capitals they look crowded. A little extra space opens them up.
- **Very big headings** can look loose, and a hair less space pulls them together.

```css
.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

h1 {
  letter-spacing: -0.01em;
}
```

Use `em` for letter spacing, so the space grows with the letters: `0.08em` is 8% of the text's size. A market badge such as SOLD OUT or NEW THIS WEEK reads cleaner with it. Never space out a whole paragraph: words start to fall apart into letters.

**Try it.** On your market page, add a line `<p class="label">Open every Saturday</p>` above the `h1` and give it the `.label` rule. Then try `letter-spacing: 0.3em` and `0` to see the range from too much to too little.

## Check yourself

2 questions to try on the lesson page.

## So what

A type scale, a capped line length, the right line height and two fonts are the difference between text people put up with and text people read. Set them once at the top of a stylesheet, and every page you add looks like part of the same site.

## Key terms

- Type scale
- Font pairing
- [Font size](https://www.ask-codey.com/glossary/font-size)
- [Line height](https://www.ask-codey.com/glossary/line-height)
- [Letter spacing](https://www.ask-codey.com/glossary/letter-spacing)
- [rem unit](https://www.ask-codey.com/glossary/rem-unit)

## Cheat sheets

- [Type That Reads Well: Scale, Line Length and Pairing](https://www.ask-codey.com/cheat-sheets/css-design-typography-cheat-sheet)

## Related

- [Hierarchy, Alignment and Whitespace](https://www.ask-codey.com/lessons/css-design-hierarchy-alignment-whitespace)
- [Fonts and Text: Family, Size, Weight and Spacing](https://www.ask-codey.com/lessons/css-fonts-and-text)
- [Web Fonts: Using Any Font You Like](https://www.ask-codey.com/lessons/css-web-fonts)
- [calc(), min() and max(): Math in CSS](https://www.ask-codey.com/lessons/css-calc-min-max)

Source: https://www.ask-codey.com/lessons/css-design-typography