A design comes to you with measurements in pixels, but your project uses rem to respect the user's accessibility settings. You need to know how many rem equal 24px, and the answer depends on a value that changes with context: the base font size, which isn't always the default 16px everyone assumes.
Why converting CSS units isn't a simple fixed rule of three
Most CSS unit conversions depend on a variable reference value, not a universal fixed ratio:
- px to rem: depends on the root element's (
html)font-size, which by default is usually 16px, but may have been changed in the project. - px to em: depends on the specific parent element's
font-size, which can differ at each point in the document. - vw and vh: depend on the viewport's size (the browser's visible window), so their pixel value changes depending on the screen.
This means there's no fixed conversion table valid for every case: the correct result depends on your project's specific context.
How to convert CSS units correctly
- Enter the value you want to convert.
- Set your project's base
font-size(if different from the standard 16px). - Set the viewport size if you need to convert to or from
vw/vh. - Get the exact conversion to
px,rem,em,vw,vhorptin real time.
You can do it free with the CSS unit converter on this site.
When to use each unit (the part that actually matters)
- px: absolute, predictable control, but doesn't respect the user's font size preferences in their browser.
- rem: relative to the root font size, the recommended choice for typography and spacing that should scale consistently if the user changes their accessibility settings.
- em: relative to the parent element, useful when you want a value to scale along with a specific component's font size, but can create unexpected cascading effects if nested across several levels.
- vw/vh: relative to the browser window's size, ideal for elements that should occupy a proportion of the screen regardless of resolution.
- pt: a unit inherited from print, rarely recommendable in modern web design.
Why rem has become the recommended standard for typography
A user who increases their browser's default font size (for example, due to low vision) expects all text on a site to scale accordingly. A design built entirely in px ignores that preference; one built in rem automatically respects the user's adjustment, because rem is always calculated relative to the root font size configured in the browser.
Frequently asked questions
Why doesn't 16px always equal the same value in rem? Because the equivalence depends on the project's configured root element font-size, which may have been changed from the browser's default.
When should I use em instead of rem? When you want a value to scale specifically with its immediate parent element's font size, not the global root font size.
Do vw and vh change if the user resizes the window? Yes, by definition they're relative to the viewport's current size, so their pixel equivalent changes if the window is resized.
Is anything I convert saved? No, the calculation happens in your browser.
Convert between px, rem, em, vw, vh and pt in real time for free with the CSS unit converter, with configurable base font-size and viewport.