PX to REM Converter

About the PX to REM Converter

Type a length such as 24px and see it in rem, em and every other CSS length unit at once — %, pt, pc, in, cm, mm, Q, vw, vh, vmin and vmax. Set the root font size (16 px in every major browser unless the user or your CSS changes it), the parent font size that em and % depend on, and the viewport size for the viewport units. A reference table lists the common sizes, with the matching Tailwind CSS spacing number.

To convert a whole file, paste your CSS under Convert a stylesheet. Every px value in a declaration becomes rem, while 1px hairlines, media queries, selectors, comments, strings and url() paths stay exactly as they were. The rest of the file — formatting, comments and order — is not touched, and nothing leaves your browser.

Common uses

• Moving a design from Figma or Sketch, which measure in pixels, to a rem-based stylesheet.
• Converting an older stylesheet to rem so text follows the visitor’s browser font-size setting.
• Checking what a 2.4rem value means on a site that uses the 62.5% root trick.
• Turning print measurements in pt, mm or cm into CSS pixels, or pixels into vw for fluid layouts.

The formulas

The tool uses the definitions in CSS Values and Units Level 4:

• Absolute units: 1in = 2.54cm = 96px = 72pt = 6pc, and 1cm = 10mm = 40Q. So 1pt = 4/3 px and 1mm ≈ 3.7795px.
• rem = the font size of the root (html) element. em = the font size of the parent element when you set font-size, and the element’s own font size for every other property. % here means a percentage of the parent font size, as in font-size: 150%.
• vw / vh = 1% of the viewport width / height; vmin and vmax use the smaller or larger of the two.
• Tailwind spacing: Tailwind CSS v4 spacing utilities are multiples of --spacing: 0.25rem, so p-4 is 1rem — 16px at the default root size.

Why rem instead of px?

Browsers let people choose a larger default text size. Font sizes set in rem (or em) grow with that setting; font sizes in px do not, although page zoom still enlarges them. Using rem for text, and usually for spacing too, keeps layouts in proportion for people who need bigger text — see WCAG’s Resize Text requirement.

Thin lines are the usual exception: a 1px border written as 0.0625rem becomes thicker when the text size grows. That is why the stylesheet converter keeps values below 2px as they are (you can change the minimum).

Media queries are different

In a media query, rem and em always refer to the browser’s initial font size — 16px unless the visitor changes it — and ignore any font-size you set on html (Media Queries Level 4). So 768px and 48rem are the same breakpoint even on a site with the 62.5% root, where 76.8rem would move it to 1229px. The converter leaves @media and @container conditions alone unless you switch that on; when you do, media-query lengths are always converted at 16px, whatever root size you enter. Container queries are evaluated on the container instead, so rem there is the root font size and @container lengths use your root size.

Limitations

• The stylesheet converter changes px to rem (or back) only; it cannot convert to em because em depends on where each rule ends up in the page.
• Values in selectors, strings, comments, url() and custom property names are never changed. Very unusual syntax may be left as it is.
• On screens, CSS inches and centimeters are tied to the CSS pixel, not to a ruler, so 1cm will rarely measure exactly 1 cm on your monitor.
• em and % use the single parent font size you enter; in a real page nested em values multiply.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.