Convert rem to px Root em ↔ Pixels Free Online Secure
Type a value in rem and read it in px at once. The arithmetic happens in your browser, nothing is sent anywhere, and what the conversion depends on is written out below rather than assumed.
Nothing uploaded
Common sizes — Convert rem to px
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
Where these units come from
The pixel in CSS is not the pixel in your screen. When displays stopped having a predictable density, a page measured in real pixels became a page that shrank as screens got sharper, so the CSS pixel was redefined as a reference length: about 1/96 of an inch seen at a comfortable reading distance. Everything else on this page is built on that. The em is older than the web — in metal type it was the width of a cast block, named after the capital M — and in CSS it means the font size in force, which is why it changes as you nest elements. The rem was added to escape exactly that: it is the em of the root element and never compounds. The vw arrived with responsive design: one hundredth of the viewport's width, whatever that turns out to be.
Where you meet them
These are the units of every stylesheet. Pixels size borders, shadows and anything that should not scale; rem sizes type, spacing and layout, so that one change at the root resizes a whole interface; em sizes things that should follow their own text, like the padding inside a button; vw sizes headings and hero sections that must fill the screen on any device. Converting between them is the daily arithmetic of turning a design handed over in pixels into a stylesheet that scales.
Questions people ask
Why is 16 px the usual starting point?
Because that is the default text size in every major browser, and a stylesheet that does not override it inherits it. One rem therefore equals 16 px on a default setting, which is where the familiar conversions come from: 0.5 rem is 8 px, 1.5 rem is 24 px. If a user has enlarged the default in their browser settings, those same rem values grow with it — which is precisely the point of using them.
Should I use rem or em?
Rem for anything that should follow the page as a whole — type scale, spacing, layout widths — because it is measured from the root and never accumulates. Em for anything that should follow the text it sits in: the padding of a button, the gap beside an icon, the indent of a quotation. The common mistake is nesting em-sized elements inside one another, where 1.2 em inside 1.2 em becomes 1.44, and then 1.73, until the text at the bottom of the page is twice the size intended.
Is the answer exact?
Where both units are defined in terms of one another by whole numbers, yes — the page says so above the figure, and the only rounding is in how many digits are shown. Where the ratio has no finite decimal, the page shows twelve significant digits and says the relation is approximate rather than pretending otherwise.
Does anything I type leave my device?
No. The arithmetic runs in your browser; nothing is uploaded and there is no server to upload it to. Load the page once and it keeps working with the network switched off.
Why you need to convert rem to px
You open a stylesheet and see padding: 2.25rem on a card and font-size: 0.8125rem on a caption. They are good values, written the way modern CSS should be written, and they tell you nothing at a glance. How big is that card padding on the screen? Will the caption be readable? Does it match the 36 px and 13 px in the design file you were handed? To answer, you convert rem to px: you multiply by the root font size and read the answer in the unit the design tools use. It is the reverse of the usual direction, and it is what you do when you read code, check a mockup against a build or explain a layout to someone who thinks in pixels.
The conversion is easy; what makes it worth a page is the base. A rem is not a size, it is a multiple of a size, the font size of the root element. In a browser that nobody has told otherwise that size is 16 px, so 1 rem is 16 px, 2.25 rem is 36 px and 0.8125 rem is 13 px. But the root can be changed by the stylesheet, and the reader can change it in the browser, and then every rem value in the page moves with it. The page therefore asks for the base and uses it, instead of hiding it.
The calculation happens in your browser, and nothing is uploaded. Below you will find the formula, a table of common values, what the conversion keeps and cannot keep, the situations in which developers need to convert rem to px, and a few habits that keep a rem-based stylesheet easy to read.
The formula and the base
px equals rem multiplied by the base
The formula is one multiplication: px = rem × base. With the usual base of 16 px, 1.5 rem becomes 24 px, 0.75 rem becomes 12 px and 4 rem becomes 64 px. The page prints the base beside the result, so a line such as 1.5 rem = 24 px (16 px) states what it assumed and you can see at once if it matches your project.
Finding out your base
Look in the stylesheet for a rule on html or :root that sets font-size. If there is none, the base is the browser default of 16 px. If there is one, such as 62.5%, take that percentage of 16: 62.5% gives 10 px. In the browser's developer tools you can also select the root element and read its computed font size, which is the number to type in the base field.
When the root size is fluid
Some sites make the root size grow with the window, using a clamp expression. Then 1 rem has no single pixel value at all: it is 15 px on a phone and 18 px on a wide monitor. In that case any conversion is a snapshot. Type the base you see at the width you care about, and understand that the answer is valid at that width only.
What the conversion keeps and what it cannot
It keeps the proportion
One rem is whatever the root font size is, so a layout written in rem keeps its shape when that size changes. When you convert rem to px, the pixel value is that same proportion made concrete for one particular base. The ratio between two sizes, for example a heading of 2 rem over body text of 1 rem, does not change however you convert it, and that ratio is the thing a good layout depends on.
It cannot know your reader's settings
The number depends entirely on the base. If the reader has raised their browser's default text size, which many people do and are entitled to, then 1 rem is not 16 px for them, and the figure you see is right only for the base in the field. Treat the pixel value as a way of understanding the design, not as a promise of what every visitor will see.
Rounding
Because the base is usually a whole number, the result of multiplying is usually exact. 0.8125 rem is exactly 13 px at a base of 16; 0.6875 rem is exactly 11 px. If you get a long decimal, it is a sign that the rem value was calculated from a different base than the one you typed.
Common values
The table at the foot of the page
The page includes a table of the pixel values that common rem figures correspond to at the base you set: 0.5 rem is 8 px, 0.625 is 10, 0.75 is 12, 0.875 is 14, 1 is 16, 1.125 is 18, 1.25 is 20, 1.5 is 24, 2 is 32, 3 is 48 and 4 is 64. These are the values that turn up most often in spacing and type scales, and knowing them by heart makes a stylesheet readable at a glance.
Reading a stylesheet in pixels
A useful exercise is to take a stylesheet you did not write and translate its main values into pixels once, writing the results in a note. A body size of 1 rem, headings of 1.5 and 2.25 rem, a container gap of 2 rem: in pixels, 16, 24, 36 and 32. Seen this way, the logic of the design appears, and you can compare it with the design file without a calculator.
How to convert rem to px here
Type the rem value
Enter the size in rem in the first field. Decimals are accepted, so 0.8125 works as well as 1.
Set the base
Leave it at 16 if your CSS does not change the root size. Change it if it does. The result updates as you type.
Read the pixel value
The answer appears at once, with the base shown beside it, so you can tell what was assumed. Copy it into your notes or compare it with the design file.
Where these units come from
The CSS pixel
When displays stopped having a predictable density, a page measured in real pixels became a page that shrank as screens got sharper. So the CSS pixel was redefined as a reference length: about 1/96 of an inch seen at a comfortable reading distance. A pixel in a stylesheet is therefore not a dot on your screen but a unit of length that the browser maps to as many dots as the screen needs.
The rem
The em is older than the web: in metal type it was the width of a cast block, named after the capital M, and in CSS it means the font size in force, which is why it changes as you nest elements. The rem was added to escape exactly that: it is the em of the root element and never compounds. To see the difference in numbers, convert px to em and compare it with what you get when you convert rem to px.
When developers convert rem to px
Checking a build against a design file
A designer hands over a file in pixels; the developer wrote the code in rem. To check that the page matches, they convert rem to px and compare numbers. A mismatch shows up at once: 1.375 rem is 22 px, and if the design says 24, one of them is wrong.
Reading unfamiliar code
When you inherit a stylesheet, rem values hide the real sizes. Converting a handful of the main ones gives you a map of the design: how large the type is, how wide the gutters are, where the breakpoints fall.
Writing bug reports and documentation
People who test a page describe what they see in pixels. A developer who says the padding is 2.5 rem means little to a tester; 40 px means something. Converting makes the two sides understand each other.
Setting values that must be exact in pixels
Some things have to be an exact number of device pixels or look soft: a one-pixel border, an icon drawn on a 24 px grid. If a size must land on the pixel grid, converting rem to px tells you whether it does at your base.
Traps when you convert rem to px
Forgetting a changed root size
If the root is set to 62.5% or to a clamp expression, the standard factor of 16 does not apply. The result is wrong by the ratio of the two bases. Always check the base first.
Confusing rem with em
Em is relative to the element's own font size, not to the root. A value of 1.5em inside a heading of 24 px is 36 px, but inside a paragraph of 16 px it is 24 px. This page converts rem, which has no such ambiguity. For em, see em to px.
Assuming the screen shows the same pixels
A CSS pixel is not a device pixel. On a high-density display one CSS pixel may be two or three device pixels. The conversion gives CSS pixels, which is what the design tools and the stylesheet both use.
Rounding too early
If you round 13.333 px to 13 and then convert back, you get 0.8125 rem, not the 0.8333 you started with. Keep the original rem value when it matters.
Questions people ask before converting
How many pixels is 1 rem?
Sixteen, in a browser whose default has not been changed.
How many pixels is 2 rem?
Thirty-two at the default base. At a base of 10 it would be 20.
Why is my browser showing something different?
The reader's setting or a rule in the stylesheet has changed the root size. Look at the computed font size of the root element in the developer tools.
Is rem the same as em?
No. Rem refers to the root element and em refers to the element itself.
Is my number uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With px to rem, which divides instead of multiplying.
Habits that make a rem stylesheet easy to read
Write the pixel value in a comment
A line such as gap: 1.5rem; /* 24px */ costs a few characters and saves the next reader a conversion. It also records the base you assumed.
Use a small scale
A project that uses only a handful of rem values, such as 0.5, 1, 1.5, 2 and 3, is easy to learn: after a day you know them in pixels without thinking. When you convert rem to px for such a stylesheet you are only confirming what you remember.
Name your values
With custom properties, such as --space-md: 1.5rem, the stylesheet describes intent instead of numbers. The name carries the meaning, and the number sits in one place.
Test with a different default size
Raise the default text size in your browser and look at the page. If it holds together, the layout is truly built in rem. If it breaks, something was left in pixels.
Using the pixel value well after you convert rem to px
Compare ratios, not just numbers
When you convert rem to px for a whole stylesheet, look at the ratios between the sizes as well as the sizes themselves. A type scale in which each step is about 1.25 times the previous one gives 16, 20, 25, 31 and 39 pixels; a scale of 1.5 gives 16, 24, 36 and 54. Spotting the ratio tells you what the designer intended, and lets you extend the scale consistently when you need a new size.
Translate for people who think in pixels
Not everyone on a team reads rem. Project managers, copywriters and clients often work from screenshots and ask for a heading to be a little bigger. If you can say that the heading is 36 px now and would be 40 px at 2.5 rem, the conversation is short. The page is useful as a quick bridge between the two vocabularies.
Check touch targets and minimum sizes
Guidelines for touch screens ask for targets of at least about 44 px, and guidelines for text ask for body copy of around 16 px or more. Both are stated in pixels. To verify a stylesheet written in rem against them, convert rem to px and see whether the buttons and the text clear the line.
Mind the zoomed case
The value you get is for the base you typed. If your readers may enlarge the text, try the conversion again with a base of 20 or 24 and see what the layout asks of the screen. A card that is comfortable at 16 can overflow at 24, and the best time to find out is before the page is published.
Related converters
The same family of tools covers the neighbouring conversions. To go back to rem, use px to rem. For sizes relative to the element, there are px to em and em to px, and for sizes relative to the screen, px to vw and vw to px. For the colours in the same stylesheet, HEX to RGB and HSL to HEX are at hand, and for class names, text to kebab-case turns a phrase into a name that CSS accepts.
A worked example
Say you are reviewing a pull request and the stylesheet has a hero section with padding: 5rem 1.5rem, a title of 3.5rem and a lead paragraph of 1.25rem. The design file says 80 px and 24 px of padding, a 56 px title and a 20 px lead. You type 5 and read 80 px, type 1.5 and read 24, type 3.5 and read 56, type 1.25 and read 20. All four match, so the build is faithful. If the title had been 3.25 rem, you would have read 52 and spotted the difference before it reached the designer.
A short checklist
Before converting
Find the base: the root rule in the stylesheet, or the computed size in the developer tools.
While converting
Type the rem value, check the base shown beside the result and note the pixel figure.
After converting
Compare with the design file. If the numbers differ, check the base before you suspect the code.
Common mistakes
Using 16 without checking
It is the default, not a rule. Check the root.
Treating the pixels as final
The answer holds for one base. A reader with a larger default sees larger pixels.
Mixing up rem and em
They look alike and behave differently. Use the right page for each.
Your numbers stay on your device
The calculation happens locally. Your values are used by your own browser and nothing is sent anywhere. There is nothing to delete afterwards and no account to create. That is the plain way to convert rem to px.
Summary
To convert rem to px here, type the size in rem and read it in pixels at once, using the formula px = rem × base. The base starts at 16 px, the default of a browser, and you can change it to match your CSS. The conversion keeps the proportion, since one rem is whatever the root font size is, and it cannot know your reader's settings, so the figure is right only for the base in the field. The table of common values, from 0.5 rem at 8 px to 4 rem at 64 px, helps you read a stylesheet at a glance. Nothing is uploaded.