Convert pixels to rem at any base font size

Pixels turn into rem with a single division: the pixel count divided by the base font size. At the browser default that base is 16px, so 24 pixels give 1.5rem and 14 pixels give 0.875rem. The rem unit refers to the text size of the html element, the root of the document [1].

This is the more common direction in day-to-day work. The mock-up arrives with measurements in pixels, because that is how design software counts, and the stylesheet is written in rem so the layout answers the reader’s settings.

The result carries four decimal places, because at a 16px base a single pixel is exactly 0.0625rem and type sizes produce values such as 0.875 or 1.125.

Below you will find a table of 30 values at three bases, how to automate the conversion inside a project, and a rundown of CSS properties with a verdict on which of them to move to rem. The journey the other way is handled by the rem to pixels converter.

The formula holds one operation: rem = pixels ÷ base font size. It is the reverse of the multiplication that turns rem into pixels.

Take a 20px spacing value: at a base of 16 it comes to 20 ÷ 16 = 1.25rem. The same value at the 10px base from the 62.5% technique gives 2rem, because dividing by ten happens in your head.

Values from a mock-up often produce fractions: 18 pixels is 1.125rem, 30 pixels is 1.875rem and 22 pixels is 1.375rem. All three are exact, and that is how most design systems store them, so you write them into the stylesheet as they are.

The em unit works the same way, only dividing by the font size of the parent instead of the root – that calculation is done by the pixels to em converter. If the measurement is headed for paper instead, the same file is handled by the pixels to inches converter.

For a single value the converter above is enough. For a whole stylesheet the arithmetic moves into a tool that runs it every time the project builds.

In a preprocessor you write a function that divides the given number by the base. In Sass it looks like this: @function rem($px) { @return math.div($px, 16) * 1rem; }, and then a rule reads padding: rem(24) and produces 1.5rem. The base then lives in one place and changes once.

The second route works on a finished stylesheet and asks for no change in how you write. The postcss-pxtorem plugin, added to the build step, walks the output file and swaps pixels for rem against the base you set. Over the last 30 days the npm registry recorded more than 870,000 downloads of it [2].

The third route is CSS custom properties. You write --space-6: 1.5rem once in the stylesheet and refer to the name instead of the number. The conversion then happens a single time, while defining the scale, rather than at every rule.