Rem to PX Converter
Convert between rem and px instantly, with a custom root font-size and a quick reference table.
Advertisement
Default is 16px. Change it if your project sets a different html { font-size }.
Type in either box — the other updates live.
| rem | px |
|---|
What is rem?
rem ("root em") is a CSS unit relative to the font-size of the root (<html>) element. With the browser default of 16px, 1rem = 16px, 1.5rem = 24px, and so on. Unlike em, it doesn't compound through nested elements, which makes layouts predictable.
Why convert?
Designs are usually spec'd in px, but accessible CSS is written in rem so text scales with the user's font-size preference. This converter bridges the two — set your project's root size once and translate freely.
FAQ
What is rem in CSS?
rem stands for "root em". One rem equals the font-size of the root (<html>) element, so with the default 16px root, 1.5rem = 24px.Why is the default root font-size 16px?
16px is the default font-size in all major browsers when no CSS overrides it. Many projects change it (e.g. 10px for easier math, or 62.5%), which is why this converter lets you set a custom value.
What is the difference between rem and em?
em is relative to the font-size of the element's parent and compounds through nesting; rem is always relative to the root element, making it predictable.When should I use rem instead of px?
Use rem for typography and spacing that should scale when users change their browser's default font size — an important accessibility win. Use px when a size must stay fixed regardless of settings.
Advertisement