About the PX to REM Converter
A rem is the font size of the root element (<html>), which is 16px in every browser unless the user or the page changes it. The conversion is a division: rem = px / root font size, so 24px is 1.5rem at the default size. An em uses the font size of the element itself (of the parent, for the font-size property), which is why nested em values compound and rem values do not. A percentage on font-size works like em × 100. A CSS pt is fixed at 1/72 inch and CSS defines 96px to the inch, so 1pt is always 1.333px and 12pt is 16px.
Sizing in rem is an accessibility matter: a reader who sets the browser's default font size to 20px gets larger text only where the stylesheet uses relative units. WCAG success criterion 1.4.4 asks that text can be resized up to 200% without loss of content. Browser zoom scales px too, but the font size preference does not. For this reason, do not set html { font-size: 16px }; leave the root alone or use a percentage such as 62.5%, which makes 1rem equal to 10px while still following the user's setting.
The bulk converter reads the stylesheet as CSS rather than as plain text. It only rewrites values of declarations, so class names such as .w-16px, comments, quoted strings and url() contents are never changed. Values inside calc(), shorthands like margin: 4px 8px, negative numbers and custom properties are converted. Hairlines are usually better left in px, since a 1px border should not grow with the font size: the threshold keeps every value at or below the size you choose. Note that rem inside a media query always refers to the browser's initial font size, not to the font size set on html.
How to use it
- Set the root font size if your project does not use the default 16px.
- Type a value and choose its unit to see it in every other unit.
- Paste a stylesheet into the CSS panel to convert all of its px values to rem, or switch to rem → px.
- Adjust the decimals, the px threshold and the properties to skip, such as border*.
- Copy or download the converted CSS.