PX to REM Converter
Convert pixels to rem (and back) for any root font size. Includes a reference table of common sizes you can copy straight into your CSS.
Edit either field; the other updates.
| px | rem | CSS |
|---|
How to convert px to rem
- Set the root font size. Browsers default to 16 px unless your CSS changes it on the html element.
- Type a pixel value to get rem, or a rem value to get pixels.
- Use the table for common sizes.
Why use rem in CSS?
rem is relative to the root (html) font size, so a layout built in rem scales when users change their browser's default text size, an important accessibility feature. 1rem equals the root font size, 16 px by default, so 24 px is 1.5rem.
em is relative to the font size of the current element, which compounds when nested. rem avoids that surprise, which is why it is the common choice for font sizes, spacing and breakpoints.
Avoid setting the root font size in pixels (html { font-size: 10px }) just to make the math easier; it overrides the user's preference. Use the default and convert with this tool instead.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
How many pixels is 1rem?
16 px by default, or whatever the html element's font size is.
What is the difference between rem and em?
rem is relative to the root element; em is relative to the current element's font size and compounds when nested.
Should I use rem for media queries?
Yes. Media queries in em or rem respect the user's font size settings.
How do I convert 14px to rem?
14 ÷ 16 = 0.875rem.