px to rem Converter
Set a base font size (usually the font-size on the html element, 16px by default), then type a value into either the px or rem field and the other field updates instantly. Handy when converting CSS font-size, margin, or padding values from px to rem. See also the other CSS tools such as the CSS Gradient Generator.
🔒 Runs in your browser · Your data is never sent to a server
Usually the font-size set on the html element (16px in most browsers' default stylesheet).
Notes
- rem is relative to the base font size (usually the font-size on the html element). Changing the base font size changes the actual px size for the same rem value.
- Changing the base font size recalculates the rem value from the entered px value using the new base font size (if px is empty and only rem is entered, it recalculates px from the rem value instead).
- Results are rounded to 5 decimal places.
Glossary
rem (root em)
A relative unit based on the font-size of the root element (the html element). By default 1rem equals 16px in most browsers, but changing the html element's font-size scales it accordingly. Unlike em, which depends on the parent element's font size, rem always refers to the root element, making sizes more predictable in nested components.
px (pixel)
An absolute unit (a CSS pixel) based on a single pixel on screen. Elements sized in px don't change even if the user adjusts their browser's text size setting.
Base font size
The font size that relative units like rem and em are based on. For rem, it's the font-size set on the html element — 16px by default in most browsers, but it can be changed in CSS or by the user in their browser settings.
FAQ
What is the baseline for converting rem to px?
rem is relative to the font-size of the html element (the base font size). Browsers default to 16px, so 1rem is 16px and 0.5rem is 8px.
What happens to entered values when I change the base font size?
The other field is recalculated with the new base, using the px value if entered (otherwise rem). Set the base to match your project first to avoid surprises.
How is rem different from em?
rem always refers to the html element, while em refers to the parent (or own) font-size, so values compound when nested. rem is easier to reason about.
Share this page