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. Default browser root is often 16 px, so 24 px = 1.5 rem unless the project overrides html { font-size }.
Pixels
Root font size (px)
Result
1rem
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.
When to choose something else
• When you need em relative to a nested component font — use pixels to em.
• When you need viewport units (vw/vh) for full-screen layouts.
• When you match 1:1 device pixels on retina borders — 1 px borders often stay in px.
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.
Design handoff workflow
Designers export px from Figma; developers divide by agreed root (document in README). When the project uses 62.5% trick, confirm before converting — mixing assumptions doubles or halves the UI.
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.
Is data uploaded?
No. Conversion runs locally.