In this article
Someone with poor eyesight raises their browser's default text size to 24 pixels. Your page, with every font set in px, ignores it. A page built with rem does not. That is the whole argument, and it fits in one sentence.
What a rem is
A rem is relative to the font size set on the root element (the html tag). Browsers default that to 16px, so 1rem is 16px, 2rem is 32px and 0.5rem is 8px. If a reader changes their browser's text size, the root changes, and everything in rem moves with it.
16px, the browser default, is exactly 1rem. Body text usually sits there.
What happens when the reader changes their size
- Their setting is ignored
- Hard to read for people who set it on purpose
- 1rem × 24 = 24px
- Layout, headings and spacing grow in step
Many people change their browser or phone text size on purpose. Respecting it costs you nothing.
rem, em and px side by side
| Unit | Relative to | Good for |
|---|---|---|
| px | Nothing: a fixed size | Hairline borders, shadows, icons that must not scale |
| rem | The root font size | Font sizes, margins and padding, media-query widths |
| em | The parent's font size | Spacing that should follow its own element's text, such as button padding |
The trap with em is nesting: an em inside an em compounds, so 1.2em in a 1.2em parent is 1.44 times the base.
The 62.5% trick, and why to skip it
Some developers set html { font-size: 62.5% } so that 1rem equals 10px, making the maths easier. It works, but it quietly overrides the user's default and can shrink text for people who raised it. Divide by 16 in your head, or let a tool do it, and leave the root alone.
- Leave the root at the default. Do not set html to a px value.
- Write font sizes in rem.
1remfor body,1.25remfor lead text. - Use px for borders and shadows. A 1px line should stay 1px.
- Test with a bigger default. Raise your browser's text size once and see what breaks.
- Think of the viewport as well. For fluid headings, try
clamp()with rem bounds.
Questions people ask
How do I convert px to rem?
Divide the pixel value by the root font size, which is 16 by default. 24px divided by 16 is 1.5rem.
What is the difference between rem and em?
rem is relative to the root font size, so it is predictable everywhere. em is relative to the parent element's font size, so nested ems compound.
Should I use px or rem for font size?
Use rem, so text respects the user's browser settings. Keep px for things that should not scale, like thin borders.
Is 1rem always 16px?
Only when the root font size is the default 16px. If the user or your CSS changes the root size, 1rem changes with it.
Does using rem help accessibility?
Yes. People who set a larger default font size get a page that scales with their choice, instead of one that ignores it.