REM to PX Converter
Convert between REM and PX values using a custom root font size.
CSS developers constantly convert between rem and pixel values when building responsive layouts. This converter calculates the equivalent value in either direction based on any root font size, with a reference table for common values — saving you from the mental arithmetic of rem × 16.
Your result will appear here...
How to Convert Between REM and PX
- Enter a value in rem or px — type the CSS unit value you want to convert.
- Set the base font size — the root font size (default is 16px in most browsers).
- Click Convert — the tool calculates the equivalent value in the other unit.
- Use in your CSS — copy the converted value directly into your stylesheet.
Frequently Asked Questions
What is the difference between rem and px? ▼
Pixels (px) are absolute units — 16px is always 16px regardless of context. Rem (root em) is a relative unit based on the root element's font size. If the root font size is 16px, then 1rem = 16px. Rem scales when users change their browser font size, making it better for accessibility.
Why should I use rem instead of px? ▼
Rem respects user font-size preferences. Users who set larger default fonts (for accessibility) will see your layout scale proportionally with rem. Pixels ignore this setting. Using rem for font sizes, spacing, and breakpoints creates more accessible, user-friendly designs.
What is the default base font size? ▼
Most browsers default to 16px for the root font size. This means 1rem = 16px by default. You can change it with CSS: html { font-size: 62.5%; } sets the base to 10px, making rem calculations easier (1rem = 10px, 1.6rem = 16px).
What is the difference between rem and em? ▼
Rem is always relative to the root (html) element's font size. Em is relative to the parent element's font size. Nested em values compound (an em inside an em inside an em can become unpredictable), while rem always refers to one fixed reference, making it more predictable for layout.
When should I still use pixels? ▼
Use px for: borders (1px borders should stay 1px), box-shadows, very precise positioning where scaling would break the design, and media query breakpoints (though rem breakpoints are increasingly recommended). For font sizes and spacing, prefer rem.
Is my data stored? ▼
No. All conversions happen in your browser. No data is sent to any server.