Pixels to rem
Convert pixel values to rem for modern CSS layouts. rem scales with the user's root font size — better for accessibility than fixed px.
How to convert px to rem
1. Enter the pixel value from your design (e.g. 32 px).
2. Set the root font size (default 16 px if unchanged).
3. Copy the rem result into your stylesheet.
4. Use rem for font sizes, spacing, and component scale; px for hairline borders if needed.
Px to rem examples
Body and heading type
16 px = 1 rem (default). 24 px = 1.5 rem heading. 14 px = 0.875 rem small text.
Custom root 10 px (design systems)
Some teams set html { font-size: 62.5% } so 1 rem = 10 px. Then 32 px design token = 3.2 rem.
Spacing scale
8 px grid → 0.5 rem at 16 px root. 16 px padding = 1 rem; consistent rhythm in Tailwind-like scales.
When to convert px to rem
• When you implement Figma specs in responsive CSS with accessible zoom.
• When you align with design system tokens defined in rem.
• When users override browser default font size — rem layouts adapt.
rem vs em in component CSS
em compounds inside nested elements with different font sizes — padding in em grows with local text. rem stays tied to root, giving predictable spacing across components. Many teams use rem for layout scale and em only for letter-spacing or micro-adjustments tied to local type.
Frequently asked questions
What is rem?
rem = "root em". 1 rem equals the font size of the html element, not the parent.
Why not use px everywhere?
Fixed px ignores user font preferences. rem respects root scaling for accessibility (WCAG).
Default root font size?
Most browsers default to 16 px on html. Users can change this in settings.
Formula?
rem = px ÷ rootFontSizePx. Example: 20 px ÷ 16 = 1.25 rem.
Does rem work for margins and padding?
Yes — rem applies to any CSS length property, not only font-size.