# px vs rem: why your font sizes should be allowed to scale

> Pixels are fixed. Rem units follow the reader's own text size. The switch takes one division by 16, and it quietly makes your site usable for everyone who has changed their browser's font size.

Published 2026-10-08 by Toolcloak. 3 minute read. Original: https://toolcloak.pages.dev/articles/px-vs-rem-why-your-font-sizes-should-scale
Related free tool: [PX to REM Converter](https://toolcloak.pages.dev/tools/px-to-rem-converter)

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.

> **In short**
> - **rem** = a multiple of the root font size. By default, 1rem = 16px.
> - px to rem: **divide by 16**. 24px is 1.5rem.
> - Use rem for font sizes and spacing so the page respects the reader's settings.
> - Use px for things that should never scale, such as 1px borders.

## 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.

> **rem = px ÷ root size:** With the default 16px root, 14px is 0.875rem, 20px is 1.25rem and 40px is 2.5rem. If you set the root to something else, divide by that number instead.

**Common pixel sizes in rem (16px root)**

|  | Value |
| --- | --- |
| 12px | 0.75 |
| 14px | 0.875 |
| 16px | 1 |
| 20px | 1.25 |
| 24px | 1.5 |
| 32px | 2 |

*16px, the browser default, is exactly 1rem. Body text usually sits there.*

Try it: [PX to REM Converter](https://toolcloak.pages.dev/tools/px-to-rem-converter). Type a pixel value and a root size and get the rem value, or go the other way.

## What happens when the reader changes their size

**A reader sets their browser text to 24px**

| Your text in px | Your text in rem |
| --- | --- |
| stays 16px | becomes 24px |
| Their setting is ignored | 1rem × 24 = 24px |
| Hard to read for people who set it on purpose | 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.

1. **Leave the root at the default.** Do not set html to a px value.
2. **Write font sizes in rem.** `1rem` for body, `1.25rem` for lead text.
3. **Use px for borders and shadows.** A 1px line should stay 1px.
4. **Test with a bigger default.** Raise your browser's text size once and see what breaks.
5. **Think of the viewport as well.** For fluid headings, try `clamp()` with rem bounds.

## Frequently asked questions

### 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.