Size text with rem and em, not px

Browsers let readers choose a default text size. Most people never change it, so it stays at 16px. People with low vision often set it larger. In Chrome it’s under Settings, Appearance, Font size.

• rem is a multiple of that setting. 1rem is 16px for most readers, and 20px for someone who has chosen Large.
• px is fixed. Text sized in px ignores the setting.
• em is a multiple of the text the element sits in. Padding of 1em on a button is as wide as the button’s text is tall.

Try it

Change the browser text size. Both cards look the same at Medium. At Large and Very large, the rem card grows with the setting and the px card stays as it is, so its text is no easier to read.

font-size: 16px;
padding: 16px;
/* title */ font-size: 24px;

font-size: 1rem;
padding: 1rem;
/* title */ font-size: 1.5rem;

The Follow button’s padding is in em, so it keeps its shape as its text grows.

What it means for your designs

Keep designing in px. A design at the default setting is right for most readers, and a developer turns your sizes into rem by dividing by 16: a 24px title becomes 1.5rem.

What changes is what you allow for. Some readers see your text up to half as big again, so:

• Let boxes grow with their text. A card with a fixed height clips its title when the text gets bigger.
• Expect more lines. A two-line title at 16px might take three at 24px.
• Give spacing next to text in em or rem, so a button keeps its proportions. A 1px border can stay in px.

In Figma

Design at the default 16px base, as you do now. To check a key component, such as a lot card or a navigation bar, duplicate it and scale the text by 1.5 (24px body text). Whatever breaks there will break for some readers.

When spacing should follow the text, add a note: “Button padding: 0.5em 1em, so it grows with the label.”

Say this to a developer

“Can text sizes be in rem, and padding on buttons and tags in em? And we shouldn’t set a px font size on the page itself, so the reader’s setting still works.”

1
/* Leave the root font size alone: the reader's setting lives there. */
2
body {
3
  font-size: 1rem;
4
}
5

6
h2 {
7
  font-size: 1.5rem; /* 24px at the default setting */
8
}
9

10
.button {
11
  font-size: 0.875rem;
12
  padding: 0.5em 1em; /* in em of the button's own text */
13
}

Watch out for

• Don’t size everything in rem. Borders, hairlines and shadows stay in px, because they shouldn’t get thicker for readers who want bigger text.
• An em multiplies when nested. A list inside a list, each at 0.9em, gets smaller at every level. Use rem for text sizes and keep em for spacing.
• Unitless line heights, such as 1.5, scale with the text. A line height in px doesn’t, so bigger text overlaps.

Browser support

Every current browser, and every browser for more than ten years.