Design
px → rem / em Converter
Convert pixels to rem and em (and vice versa) with a configurable base. Essential for fluid typography and responsive layouts.
px
Browser default is 16px. Change it if your project uses a different base.
px → rem / em
Type the pixels — results are calculated instantly.
px
rem / em → px
Enter a rem or em value — the px equivalent is calculated instantly.
rem/em
px
Quick reference table
Base: 16px
| px | rem | em |
|---|
Key concepts
rem (root em) is a unit relative to the
font-size of the root element (<html>). With a 16px base, 1rem = 16px. Changing the document font-size scales all rem values proportionally, simplifying global responsive design.
em is relative to the
font-size of the parent element (or the element itself when used for font-size). This can create compounding effects in nested elements. rem avoids that problem by always being relative to the root. For spacing and sizing within self-contained components, em can be preferable.
Pixels are fixed and do not respect the user's font size preference in the browser. With
rem, if the user increases their browser's base font size, all content scales correctly, improving accessibility. WCAG 1.4.4 also recommends that text can be scaled up to 200% without loss of functionality.
Some projects use the trick of setting
html { font-size: 62.5%; } so that 1rem = 10px, making mental math easier. Other frameworks or CMS platforms may use a different base. Use the base field to adapt the converter to your specific project.