Ask: should this scale?

rem grows with the user's font size; px stays put.

Josh W. Comeaujoshwcomeau.com
When picking between pixels and rems, here's the question you should be asking yourself: Should this value scale up as the user increases their browser's default font size?
The Surprising Truth About Pixels and AccessibilityRead article ↗
Josh W. Comeaujoshwcomeau.com
I recommend using rems for media queries. It means that users who crank up their default font size will see the "mobile" view even on a desktop computer, but this is generally a better user experience than a super-crowded desktop layout with huge text.
The Surprising Truth About Pixels and AccessibilityRead article ↗

1 · Text should grow

Raise the browser font size to 32px.

Text in pxBad

Weekly digest

Three new comments and one request for review.

2 min read
font-size: 14pxComputed14px
Text in remGood

Weekly digest

Three new comments and one request for review.

2 min read
font-size: 0.875remComputed14px
.card   { font-size: 0.875rem; padding: 1rem; }   /* grows */
.card   { border: 1px solid; }                   /* hairline stays 1px */

2 · Breakpoints in rem

Set the font size to 32px, then change the window width.

Breakpoint in pxBad

Plans

Start free and upgrade when you need more.

Teams

Share one workspace across your company.

@media (min-width: 360px)
Breakpoint in remGood

Plans

Start free and upgrade when you need more.

Teams

Share one workspace across your company.

@media (min-width: 22.5rem)
@media (min-width: 22.5rem) {   /* 360px at 16px, 720px at 32px */
  .cols { grid-template-columns: 1fr 1fr; }
}

Why it matters, pros and cons

Why it matters

Users who raise their default font size are asking for bigger everything. px text ignores that request.

Pros

  • Text, padding and line spacing follow the user's setting with one unit.
  • rem breakpoints stack the layout before large text gets crammed into columns.
  • Hairlines and shadows in px stay crisp instead of thickening with the text.

Cons

  • Most users never change the default, so you will rarely see the benefit.
  • Mixing rem and px means a quick check per value: should this scale?
  • Zoom still works with px, so px is not an accessibility failure on its own.