CSS px to rem and em: Conversion, Fluid Type, and Viewport Units
October 29, 2026
In CSS, px is a fixed unit (1/96 of an inch on screens), while rem and em are relative. One rem equals the root element's font size, which is 16px in most browsers by default. Using rem for sizes respects a user's preference for larger text.
The conversion: rem = px ÷ root font size. With a 16px root, 24px = 1.5rem, 14px = 0.875rem, 12px = 0.75rem, and 40px = 2.5rem. Going the other way, 1.25rem = 20px.
Skip the math and get your answer instantly:
Open the Length Converter →Conversion Table
Memorize the multiples of 4 and 8, which are common in design systems. If you set the root to 62.5% (10px) to simplify the arithmetic, then 1rem = 10px, but this overrides user preferences if done with a fixed px value, so use a percentage rather than px. Letting the root be 100% keeps accessibility intact.
| Pixels | rem (16px root) | Typical use |
|---|---|---|
| 12 px | 0.75 rem | Small captions |
| 14 px | 0.875 rem | Secondary text |
| 16 px | 1 rem | Body text |
| 20 px | 1.25 rem | Large text |
| 24 px | 1.5 rem | Subheading |
| 32 px | 2 rem | Heading |
| 48 px | 3 rem | Display |
The em Unit and Compounding
An em is relative to the font size of the element itself (for font-size, relative to the parent's). This makes it compound: if a parent has 20px font and the child is 1.5em, the child is 30px; a grandchild at 1.5em is 45px, a total of 2.25 times the parent. That is useful for components that scale from a single font size (padding in em scales with the text) but a hazard for nested lists. Use rem for font sizes to avoid compounding, and em for spacing tied to the local text size.
Fluid Typography With clamp()
clamp(min, preferred, max) lets the size scale with the viewport but stay within bounds. For example, font-size: clamp(1rem, 2.5vw, 2rem). 1vw is 1% of the viewport width. At a 640px viewport, 2.5vw = 16px (the minimum), at 800px it is 20px, at 1,280px it is 32px (the maximum), and beyond that it stays at 2rem. Mixing rem and vw in the preferred value (e.g., 1rem + 1vw) keeps zoom accessibility, because pure vw doesn't respond to the user's text-size settings.
Practical Advice
Use rem for typography and layout dimensions where scaling with the user's settings matters, px for borders and fine details, and percentages or fr units for widths. Media queries in em also respond to the user's base font size. Test by changing the browser's default font size and zooming to 200%. Avoid fixing line-height in px; use unitless values such as 1.5.
Frequently Asked Questions
How do I convert px to rem?
Divide pixels by the root font size, typically 16.
What is 24px in rem?
1.5rem with a 16px root.
Why does em compound?
It is relative to the parent's font size, so nested values multiply.
What does clamp() do?
It sets a value that scales between a minimum and a maximum.
Why avoid fixed px for text?
It may ignore users' font-size preferences.