Converter px·rem·em
| px | rem | em | pt | % (16px base) |
|---|
The px-to-rem converter is one of the most searched tools among front-end developers working on WordPress themes, design systems and scalable CSS architectures. Using relative units like rem and em is essential for building accessible, responsive and maintainable layouts: rem values scale relative to the browser root font size, while em values are relative to the parent element.
With this tool you can:
- Convert any px value to rem and em in real time
- Set a custom base font size (default 16px, adjustable to match your theme)
- Convert in the reverse direction (rem → px)
- Copy the CSS output with one click, ready to paste into your stylesheet
Especially useful when translating a Figma mockup into CSS code: design files typically use pixel measurements, but production requires relative units to respect user accessibility preferences. Indispensable for anyone working with typographic scales, spacing grids and CSS custom properties in custom themes.
How to use this converter
- Edit any of px, rem or em — the other two update live.
- Set root font-size (often 16px on
html) for rem. - Set EM context to the parent element's font-size when working in em.
- Use the table for common sizes (4–128px) and CSS output for snippets with rem, em, pt and a custom property.
- Copy CSS (header) and Copy (right panel) grab ready-to-paste code.
Great for design systems, WordPress themes, Figma handoff and accessible refactors.