Convert px to rem Pixels ↔ Root em Free Online Secure
Type a value in px and read it in rem 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 px to rem
| px | rem |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
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 designers and developers convert px to rem
Design tools speak in pixels. A mockup says the heading is 32 px, the gap between sections is 48 px, the button has 16 px of padding. Stylesheets, written well, speak in rem. The gap between those two languages is where this page sits: you type a size in pixels and read it in rem, so that the number you put in the CSS means what the designer meant. To convert px to rem is a small act, but it is done hundreds of times in the life of a website, and a wrong base turns a careful layout into a slightly wrong one everywhere at once.
The reason to bother with rem at all is accessibility and flexibility. A rem is a multiple of the root font size, which a browser sets to 16 px unless told otherwise, and which a reader is free to change in their settings. A layout written in rem therefore keeps its shape when someone with poor eyesight raises the default text size: type, spacing and boxes grow together. A layout written in pixels does not follow, and the reader who asked for larger text gets larger letters in cramped boxes, or nothing at all. That is why almost every modern style guide says the same thing: use rem for type and spacing.
This page does the arithmetic in your browser. Nothing is uploaded, and what the conversion depends on, the base size, is written out below and sits in a field you can change, instead of being assumed behind your back. Below you will find the formula, the table of common sizes, the reasons the base matters, the traps that catch people who convert px to rem in a hurry and a short guide to using the result in real stylesheets.
The formula and the base
rem equals px divided by the base
The formula is one division: rem = px ÷ base. With the usual base of 16 px, a size of 24 px becomes 1.5 rem, 32 px becomes 2 rem and 8 px becomes 0.5 rem. The page shows the result as you type, and it shows the base it used, so the line 24 px = 1.5 rem (16 px) tells you exactly what was assumed.
Where the 16 comes from
The base starts at 16 px because that is what a browser uses when nobody says otherwise. It is not a law of the web; it is the default of the default, and it has been stable for decades. If your CSS never touches the root font size, 1 rem is 16 px for most visitors. If it does, the base is whatever you set.
The 62.5% trick and why people use it
Some stylesheets set the root size to 62.5%, which makes 1 rem equal to 10 px on a default browser, so that 24 px is simply 2.4 rem and the arithmetic is easy to do in your head. It works, but it has a cost: the whole page now depends on that percentage, and any component that expects 16 as the base will come out too small. If your project does this, type 10 in the base field of this page, and every figure will match your CSS.
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. That is the whole reason to write it that way. When you convert px to rem, the number you get is the same proportion that the pixel value had at the base you chose, now expressed in a way that scales.
It cannot know your reader's settings
The number depends entirely on the base. If your CSS sets a different size on the root element, or the reader has changed the default text size in their browser, which many people do and are entitled to, then 1 rem is not 16 px for them. The figure on the page is right only for the base in the field. This is not a flaw of the tool but the nature of the unit: it is relative, and a relative unit has no fixed value to convert to.
Rounding
Division by 16 gives clean results for many common sizes (16, 24, 32, 48, 64) and recurring decimals for others (10 px is 0.625 rem; 13 px is 0.8125). The page gives as many digits as the number needs, and you decide how many to keep in the stylesheet. Browsers handle long decimals without trouble, but a rounded value such as 0.8125rem is easier to read and maintain than one with ten digits.
Common sizes
The table at the foot of the page
Under the converter you find a table of common sizes: 8 px is 0.5 rem, 10 px is 0.625, 12 px is 0.75, 14 px is 0.875, 16 px is 1, 18 px is 1.125, 20 px is 1.25, 24 px is 1.5, 32 px is 2, 48 px is 3 and 64 px is 4. These are the sizes that turn up most often in type scales and spacing systems, and having them in front of you saves a conversion.
A scale built on rem
A useful habit is to choose a small set of rem values and reuse them: 0.5, 1, 1.5, 2, 3 and 4 for spacing, and 0.875, 1, 1.25, 1.5, 2 for type. Designers call this a scale, and it keeps a site visually consistent. When a mockup gives you an odd value such as 22 px, use the converter to see that it is 1.375 rem, and then decide whether to round to the nearest value on your scale.
How to convert px to rem here
Type the pixel value
Enter the size in pixels in the first field. Decimals are accepted, so 13.5 px works as well as 14.
Check 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.
Copy the rem value
Read the figure and use it in your CSS, with the unit written after it: font-size: 1.5rem. Do not forget the unit, since a bare number means something else in most properties.
Where these units come from
The CSS pixel is not the pixel of 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.
Why rem exists
Before rem, developers sized everything in em or percentages, and nested elements multiplied each other: a list inside a list inside a list shrank or grew with each level. The rem gave them one fixed reference, the root, and removed the compounding. If you want to compare the two, convert px to em and see how the same pixel value depends on the element it sits in.
Where you meet rem in practice
Type
Body text is commonly 1 rem, headings 1.25 to 3 rem, small print 0.75 to 0.875 rem. Writing them in rem lets a reader enlarge the whole page by changing one browser setting.
Spacing and layout
Margins, padding and gaps in rem keep the whitespace proportional to the type. When the text grows, the space around it grows too, and the layout stays balanced instead of cramming bigger letters into the old boxes.
Media queries
Breakpoints written in em or rem respond to the reader's text size, so a layout switches to its narrow form earlier for someone who has enlarged their text. It is a refinement worth knowing about, though pixels remain common in breakpoints.
What to leave in pixels
Hairline borders, box shadows and thin icons often look best at fixed pixel sizes, because a border of 0.0625rem that grows to 0.1rem with large text does not help anyone. Use rem for what should scale and pixels for what should not.
Traps when you convert px to rem
Forgetting the base is not always 16
If a project sets html { font-size: 62.5% }, or uses a fluid root size, the factor is different. Check the stylesheet before you trust a number from any converter, including this one.
Converting the root size itself
If you set the root size in pixels, a reader's browser setting is overridden and the benefit of rem is lost. Set the root as a percentage, or leave it alone, so that the user's preference is respected.
Using rem inside a component that sets its own font size
Rem always refers to the root, not to the component. A button with a font size of 14 px and padding of 1rem has padding that does not follow the button's own text. If you want spacing that follows the element's text, that is the job of em.
Mixing units without a plan
A stylesheet that uses px for one margin, rem for the next and em for a third is hard to reason about. Pick a rule: rem for type and spacing, pixels for borders and shadows, and keep it.
Questions people ask before converting
How many rem is 16 px?
One, on a default browser. Sixteen divided by the base of sixteen.
Is rem better than px?
For type and spacing, it is the better choice in most projects, because it respects the reader's settings. Pixels remain right for things that should not scale.
Why does my result differ from another site?
Probably a different base. Check the field: some tools assume 10, some 16, some 14. This page shows the base next to the result.
Do I have to round?
No. Browsers accept long decimals. Round only for readability.
Is my number uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With rem to px, which multiplies instead of dividing.
Choosing wisely when you convert px to rem
Decide on a base for the project and stick to it
Whatever you choose, make it a decision and write it in the project's documentation. A team that disagrees about the base produces components that do not fit together.
Convert at the design stage, not at the last moment
If you convert px to rem while reading the mockup, you build the scale into the design and notice odd values early. If you do it at the end, you discover them as a pile of inconsistent numbers.
Consider the viewport units too
For headings that must fill the screen, px to vw expresses a size as a share of the viewport. It scales differently from rem, and the two are often combined.
Habits that make it easier to convert px to rem
Keep a conversion table in your head
With a base of 16, a few anchors cover most of the work: 4 px is 0.25 rem, 8 px is 0.5, 12 px is 0.75, 16 px is 1, 24 px is 1.5 and 32 px is 2. When a mockup gives you a value between them, you can estimate before you convert px to rem on the page, and use the converter only to confirm. After a few weeks you will know the table without looking.
Let the design system do the work
If your team keeps design tokens, such as spacing-2 or font-lg, store them in rem once, and let everybody refer to the names. Then nobody needs to convert px to rem again, and a change to the scale is made in one place. The converter is the tool you use when you write the tokens, not when you use them.
Write the pixel value in a comment
A line such as padding: 1.25rem; /* 20px */ costs a few characters and saves the next developer from reaching for a calculator. It also records which base you assumed, which helps if the root size is later changed.
Test with a changed browser setting
The proof that a page is built in rem is that it survives a larger default text size. Change the setting in your browser, reload and look. Components that break are the ones where something was left in pixels or where a fixed height cut the text off.
Related converters
The same family of tools covers the neighbouring conversions. To go back to pixels, use rem to px. 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. If your work includes colours as well as sizes, HEX to RGB, RGB to HEX and HEX to HSL handle the notations of the stylesheet.
A worked example
Say a mockup gives a card title at 28 px, a card padding of 20 px and a gap of 12 px between cards, and your project uses the default 16 px base. You type 28 and read 1.75 rem, type 20 and read 1.25 rem, type 12 and read 0.75 rem. In the stylesheet you write font-size: 1.75rem, padding: 1.25rem and gap: 0.75rem. A visitor who raises the browser text size to 20 px sees the same card, scaled by a quarter: the title is 35 px, the padding 25 px and the gap 15 px, all in proportion. Had you written pixels, the title would have stayed at 28 and the card would have looked wrong.
A short checklist
Before converting
Find out the base your CSS uses. Decide which sizes should scale and which should not.
While converting
Type the pixel value, check the base shown beside the result and copy the rem figure with its unit.
After converting
Test the page with a larger default text size in the browser, and look for boxes that no longer hold their text.
Common mistakes
Assuming 1 rem is always 16 px
It is only when nobody has changed the root size, and some readers have. Write the layout so that it works at other sizes as well.
Setting the root size in pixels
It overrides the reader's choice. Use a percentage, or do not set it.
Converting everything
Not every size should scale. Leave borders and shadows in pixels.
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 px to rem.
Summary
To convert px to rem here, type the size in pixels and read it in rem at once, using the formula rem = px ÷ 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: a layout written in rem keeps its shape when the root font size changes. It cannot know your reader's settings, so the figure is right only for the base in the field. The common sizes in the table below the converter, from 8 px at 0.5 rem to 64 px at 4 rem, save you repeating the arithmetic. Nothing is uploaded.