About this tool
The design says 24px, the CSS should use rem: this calculator converts a length into all common CSS units – px, rem, em, pt, %, vw and vh. You set the reference values yourself: the root font size for rem (default 16 px), the parent element’s font size for em and %, and the viewport size for vw and vh.
For whole stylesheets there is the second part: paste CSS and all px values turn into rem at once. Comments, strings and url(…) stay unchanged, and you can leave tiny values such as 1px borders out. Calculate fluid sizes with clamp() using the CSS clamp() Generator, aspect ratios with the Aspect Ratio Calculator.
How it works
- Enter a value and choose its unit, e.g. 24 and px.
- Read the result in all units and copy the value you need.
- Adjust the base values if needed, such as a root font size of 10 px.
- For a whole stylesheet, paste the CSS below and copy the converted version.
Frequently asked questions
How do I convert px to rem?
Divide the px value by the root font size. With the browser default of 16 px, 24px is 24 ÷ 16 = 1.5rem. The other way round you multiply: 2rem × 16 = 32px.
What is the difference between rem and em?
rem always refers to the font size of the html element, so it is the same everywhere on the page. em refers to the font size of the parent element and changes when elements are nested. For spacing and font sizes, rem is usually more predictable.
Why use rem instead of px at all?
When users set a larger default font in their browser, rem values grow with it, px values do not. Pages using rem stay more readable for people with low vision.
Should I convert media queries to rem too?
You can, and it is a good idea, but note: in media queries rem (like em) always refers to the browser’s font size, not to a root font size changed in your CSS. If you use html { font-size: 62.5% }, convert media queries with 16 as the base.