CSS References
CSS PX-EM Converter
Designers think in pixels, but em and rem make layouts scalable and accessible. Converting between them is simple arithmetic once you know the base font size. This page explains the formula, gives a ready-made conversion table at the standard 16px base, and shows why rem is the right choice for accessible sizing.
The conversion formula
em and rem are multiples of a base font size. By default browsers use 16px as the root font size. To convert, divide the pixel value by the base; to go back, multiply.
/* px -> em / rem */
em = px / base /* e.g. 24 / 16 = 1.5em */
/* em / rem -> px */
px = em * base /* e.g. 1.5 * 16 = 24px */
/* base defaults to 16px unless :root font-size changes it */em is relative to the element's own font-size; rem is relative to the root. At the root, 1em and 1rem are the same. The table below uses the common 16px base.
Conversion table (16px base)
| Pixels (px) | em / rem | Typical use |
|---|---|---|
| 8px | 0.5rem | Tight spacing, small gaps |
| 10px | 0.625rem | Fine print |
| 12px | 0.75rem | Captions, labels |
| 14px | 0.875rem | Secondary text |
| 16px | 1rem | Base body text |
| 18px | 1.125rem | Comfortable body text |
| 20px | 1.25rem | Lead paragraph |
| 24px | 1.5rem | Small heading (h3/h4) |
| 28px | 1.75rem | Sub-heading |
| 32px | 2rem | Heading (h2) |
| 36px | 2.25rem | Large heading |
| 40px | 2.5rem | Display heading |
| 44px | 2.75rem | Hero heading |
| 48px | 3rem | Large hero / display |
Why rem is better for accessibility
When a user increases the default font size in their browser settings (a common need for low vision), values set in px do not respond — they stay fixed. Values in rem scale with that root font size, so your whole interface grows proportionally. This is why accessible design uses rem for text and spacing.
- Keep :root at the browser default (do not set html { font-size: 62.5% } unless you understand the trade-offs).
- Size text and spacing in rem so they honour the user's preferred font size.
- Use em for values that should scale with a component's own text, like icon or padding inside a button.
- Use clamp() with rem and vw for fluid type that still respects user zoom.
:root { font-size: 100%; } /* respects user setting, ~16px */
body { font-size: 1rem; line-height: 1.6; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
.btn { padding: 0.75em 1.25em; } /* scales with the button's text */Avoid setting font sizes in px on body text — it prevents users who rely on larger fonts from resizing your content.