Convert px to em Pixels ↔ Em Free Online Secure
Type a value in px and read it in em 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 em
| px | em |
|---|---|
| 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 you convert px to em
Em is the oldest relative unit in CSS and the one that causes the most arguments. You have a size in pixels from a design file, 20 px of padding on a button, 14 px of space beside an icon, 36 px for a heading, and you want it in em, so that it follows the text it belongs to. When you convert px to em you are asking a particular question: what multiple of the current font size is this? The answer depends on a number the page cannot guess, the font size in force where the value is used, so the converter puts that number in a field and uses it openly.
The reason to write sizes in em is that things which belong to text should grow with the text. The padding inside a button should be larger when the button's label is larger. The gap between an icon and its caption should widen when the caption does. A heading's bottom margin should stay in proportion to the heading. In all these cases the pixel value is wrong as soon as the font size changes, and the em value is right at any size. That is the whole case for em, and it is a strong one.
The calculation happens in your browser, and nothing is uploaded. Below you will find the formula, the reason em needs more care than rem, the nesting trap that produces surprising sizes, the places where em is the right unit, and a method for choosing between em and rem in a real stylesheet.
The formula and the base
em equals px divided by the font size
The formula is one division: em = px ÷ base. With a base of 16 px, a value of 24 px becomes 1.5 em, 8 px becomes 0.5 em and 20 px becomes 1.25 em. The page shows the base next to the result, as in 24 px = 1.5 em (16 px), so you can see what was assumed. The arithmetic is the same as for rem. The meaning is different.
What the base is
For rem, the base is the font size of the root element. For em, it is the font size of the element where the value is used, or, for the font-size property itself, of the parent. That is why em has no single answer: the same stylesheet value means different pixel sizes in different places. If you are converting a padding for a button whose text is 14 px, type 14 as the base. If you are converting a margin for a heading of 32 px, type 32.
The default when you do not know
If you just want a rough figure, leave the base at 16, the size of ordinary text in a browser that nobody has changed. The result is right for a block of normal body text, and it gives you a sense of the proportion even if the element turns out to have a different size.
What the conversion keeps and what it cannot
It keeps the proportion to the text
The result is the proportion relative to the font size in force where the value is used. Written in em, a space grows and shrinks with the text beside it, and that is exactly how spacing around words should behave.
It cannot give you one number for the page
This is the one to be careful with. Em is relative to the font size of the element itself, or, for font-size, of its parent, not to the root. So there is no single answer for a page: the same 1.5 em is 24 px inside a 16 px element and 36 px inside a 24 px one, and em inside em multiplies. The figure on the page is right for the base in the field and for nothing else. If you want one number that holds everywhere, that is what rem is for. To compare, convert px to rem and see how the same pixel value behaves.
Rounding
Division by 16 gives clean values for many sizes and recurring decimals for others. A value like 0.8125 em is fine in a stylesheet, but you may prefer to round to 0.8 or 0.85 if the exact size does not matter. Keep the full figure where precision counts.
The nesting trap
How em compounds
Suppose a list has font-size: 0.875em and its items have font-size: 0.875em as well. The list is 87.5% of its parent. Each item is 87.5% of the list, which is about 76.6% of the parent. A list nested inside an item shrinks again, to about 67%. After three levels the text is very small, and nobody wrote that on purpose. This is what is meant by saying that em compounds.
Why it matters when you convert px to em
If you convert a pixel value to em for font-size, the base you must use is the parent's font size, not the element's own. Many mistakes come from using the wrong one. For other properties, such as padding and margin, the base is the element's own font size. The rule is easy to say and easy to forget: font-size looks up, everything else looks at itself.
How to avoid surprises
Use em for spacing that follows text, and rem for font sizes. That way font sizes never compound, because they refer to the root, and spacing still follows its own text. It is the combination that most modern stylesheets settle on.
Common sizes
The table at the foot of the page
Under the converter is a table of common sizes at the base you set: 8 px is 0.5 em, 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. At a base of 16, these are the same numbers as for rem, which is why people confuse the two. The difference is in what 16 stands for.
Changing the base to match the element
If you set the base to 14 for a small button, the table changes: 14 px is now 1 em, 7 px is 0.5 em and 21 px is 1.5 em. Try it, and you will see how a padding of 1.5 em has a different pixel size in a button of 14 px than in one of 18 px, and why that is useful.
How to convert px to em here
Type the pixel value
Enter the size in pixels in the first field. Decimals are accepted.
Set the font size the em refers to
Type the font size of the element, or of its parent if you are converting a font-size. If you are unsure, leave 16 and treat the result as an approximation.
Copy the em value
Use the figure in your CSS with its unit, as in padding: 1.25em. A number without a unit is not valid for most properties.
Where these units come from
The em in metal type
The em is older than the web. In metal type it was the width of a cast block, named after the capital M, and it was the natural unit of horizontal space on the printed line. Typographers still speak of em dashes and em spaces. In CSS the idea survives in a looser form: one em is the size of the current font.
The pixel and the rem
The CSS pixel is a reference length of about 1/96 of an inch seen at a comfortable reading distance, not a dot on your screen. The rem was added to give developers a unit that is relative but never compounds: it is the em of the root element. Between them, pixel, em and rem cover the three needs: fixed size, size relative to the text, and size relative to the page.
Where em is the right choice
Padding inside buttons and form fields
A button with padding: 0.5em 1em looks the same in proportion at any text size. Make the label larger and the whole button grows with it, which is what you want from a component that may be used in a toolbar and in a hero banner.
Spacing beside icons
An icon followed by a caption needs a gap that scales with the caption. A margin of 0.4em does that; a margin of 6px does not.
Margins around headings and paragraphs
Vertical rhythm in a document is easier to keep when paragraph spacing is in em, since it follows the size of the paragraph. A heading's margin in em stays in proportion as the heading changes size at different breakpoints.
Media queries
Breakpoints written in em respond to the reader's text size, so the layout switches to its narrow form earlier for someone who has enlarged their text. In media queries, em refers to the browser default and not to any element, so it does not compound.
Traps when you convert px to em
Using the wrong base
The most common error. For font-size, use the parent's size; for everything else, the element's own. Check which property you are converting before you type the base.
Forgetting that the parent may be in em too
If the parent's font size is itself in em, you have to follow the chain upwards to know the true size. When a stylesheet gets complicated, switch the font sizes to rem and keep em for spacing.
Expecting one figure for a whole component
A component that contains text of different sizes has no single em value for its parts. Convert each part against its own base.
Mixing em and rem for the same property
A padding of 1rem next to a margin of 1em is legal and often confusing. Choose a rule, such as rem for font sizes and em for spacing, and keep to it.
Questions people ask before converting
How many em is 16 px?
One, if the font size in force is 16 px. If the element's font size is 20 px, then 16 px is 0.8 em.
Is em better than rem?
Neither is better. Rem is better for font sizes and global layout. Em is better for spacing that should follow its own text.
Why is my padding bigger than expected?
Because it is relative to the element's font size, which may be larger than you assumed. Check the computed font size in the browser's developer tools.
Can I use decimals?
Yes. Values like 0.625em and 1.333em are normal.
Is my number uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With em to px, which multiplies instead of dividing.
Choosing wisely when you convert px to em
Decide what the value belongs to
If it belongs to the text, em is right. If it belongs to the page, such as a column width or a section gap, rem or a viewport unit is a better fit. Px to vw expresses a size as a share of the screen width.
Write the intent in a comment
A line like padding: 0.75em 1.25em; /* 12px 20px at 16px */ makes the reasoning visible. When the font size changes later, you will know what the numbers were meant to be.
Keep the component's font size in one place
Set the font size on the component's root element and let everything inside refer to it. Then the em values inside mean the same thing everywhere in the component, and you can convert px to em against a single base.
Good habits when you convert px to em
Convert px to em one component at a time
Do not try to convert px to em for a whole stylesheet in one go. Take a single component, such as a card or a button, decide its font size, and convert each of its spacing values against that size. When the component is done, test it at two or three text sizes. Then move on to the next one.
Use a calculator for the odd values, not the round ones
Values such as 8, 16 and 24 pixels convert to tidy em numbers at a base of 16. Odd values such as 22 or 13 give long decimals. When you convert px to em for these, decide whether the design really needs the exact figure or whether the nearest round em value would be just as good. Designers are often happy to round, and a tidy stylesheet is easier to maintain.
Keep a record of the base
A short comment next to each em value, saying what the base was, helps the next person. If someone changes the font size of the component later, they will know that the spacing follows it by design and not by accident. Writing that down once is worth the time it takes.
Compare with the rem equivalent
If you are unsure whether em or rem fits a value, convert px to em and to rem and ask what should happen when the text size changes. If the value should follow the element's own text, take the em. If it should follow the page, take the rem.
Related converters
The same family of tools covers the neighbouring conversions. To go back to pixels, use em to px. For sizes relative to the root, there are px to rem and rem to px, and for sizes relative to the screen, px to vw and vw to px. For the colours of the same stylesheet, HEX to RGB and HEX to HSL handle the notations.
A worked example
Say a button label is 14 px and the design gives the button 10 px of vertical padding and 20 px of horizontal padding. You type 14 as the base, 10 and read 0.714 em, type 20 and read 1.429 em. In the stylesheet you write padding: 0.714em 1.429em. When the same button is used in a hero with a label of 18 px, the padding becomes 12.9 px and 25.7 px, in proportion. Had you written 10px and 20px, the button would have looked thin around the larger text.
A short checklist
Before converting
Decide which property the value belongs to, and find the font size it should be relative to.
While converting
Type the pixel value and the right base, and copy the em figure with its unit.
After converting
Change the component's font size in the browser and check that the spacing follows. Look for nested em values that compound.
Common mistakes
Using the root size as the base for padding
That is the job of rem. Em refers to the element's own font size.
Using em for every font size
Nested em font sizes compound and surprise you. Use rem for font sizes.
Rounding to a visually neat but wrong number
1.43 is not the same as 1.5 when multiplied by a large font. Keep enough digits.
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 em.
Summary
To convert px to em here, type the size in pixels and the font size it is relative to, and read the result at once, using the formula em = px ÷ base. The conversion keeps the proportion relative to the font size in force where the value is used. It cannot give a single answer for a page: em is relative to the element's own font size, or the parent's for font-size, so the same 1.5 em is 24 px inside a 16 px element and 36 px inside a 24 px one, and em inside em multiplies. For one number that holds everywhere, use rem. Nothing is uploaded.