Convert em to px Em ↔ Pixels Free Online Secure
Type a value in em 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 em to px
| em | 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 convert em to px
A stylesheet says margin-bottom: 0.75em on a heading, and padding: 0.4em 0.9em on a button, and a line-height of 1.3em on a block of text. They are good, flexible values, and they are almost impossible to picture. How many pixels is that margin? Does the button padding match the 6 px and 14 px in the design file? To find out you convert em to px: you multiply by the font size the em refers to, and read the answer in the unit the design tools use. It is a question developers ask when they review code, check a build against a mockup, debug a spacing problem or hand over a finished component to someone who thinks in pixels.
Em is the trickiest unit in CSS to convert, because it has no fixed value. An em is the font size in force where the value is used, or, for the font-size property itself, the parent's. So 1.5 em might be 24 px in one place and 36 px in another, in the same stylesheet, from the same rule. The converter therefore does not guess. It asks for the font size the em refers to, shows it beside the answer and calculates with it. If you do not know the size, the sections below explain how to find it in your browser.
The calculation happens in your browser and nothing is uploaded. Below you will find the formula, how to find the right base, what the conversion keeps and cannot keep, how nested em values multiply, when developers need to convert em to px, and a few habits that keep an em-based stylesheet understandable.
The formula and the base
px equals em multiplied by the font size
The formula is one multiplication: px = em × base. With a base of 16 px, 1.5 em becomes 24 px, 0.75 em becomes 12 px and 2 em becomes 32 px. The page prints the base beside the result, so a line such as 1.5 em = 24 px (16 px) says exactly what was assumed. If the element's font size is 20 px, type 20, and 1.5 em becomes 30 px.
Finding the base in your browser
Open the developer tools, select the element and look at its computed font size. That is the number to type in the base field for any property other than font-size. For font-size itself, select the parent and read its computed size instead. It takes a few seconds and removes the guesswork entirely.
When you cannot see the page
If you are reading code without the page, follow the chain of font sizes upwards from the element: its own font-size if it has one, otherwise its parent's, and so on to the root, which is 16 px unless the stylesheet or the reader changed it. Where a size is given in em, multiply along the chain. This is tedious, which is why most teams settle on rem for font sizes.
What the conversion keeps and what it cannot
It keeps the proportion to the text
The result is the pixel size the em stands for at the base you typed. Written in em, a space or a size follows the text it belongs to, and the conversion shows what that comes to for one particular size of text.
It cannot give you one answer 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 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 the two, convert rem to px and see how a root-relative unit stays fixed.
Rounding
Multiplying by a whole-number base gives exact results for most values. If the base is a decimal, for example 13.5 px, a value such as 1.2 em gives 16.2 px. Browsers handle fractional pixels, but when you need whole pixels, for a hairline border or an icon on a grid, round deliberately and check how it looks.
How nested em values multiply
A list inside a list
Take a page whose body text is 16 px. A list has font-size: 0.875em, which is 14 px. The items inside it also have font-size: 0.875em, which is 14 × 0.875 = 12.25 px. A list inside an item does it again: 10.7 px. Three levels deep and the text is tiny, and nobody decided it should be. When you convert em to px for a component and the answer looks too small, nesting is the first thing to check.
Walking up the chain
To know the true pixel size of nested em, multiply the base by each value on the way down: 16 × 0.875 × 0.875 = 12.25. The converter does one step at a time. For a chain, convert the first value, use the answer as the base for the second and continue. It is the same arithmetic the browser performs.
How to stop it compounding
Use rem for font sizes, so that every size refers to the root, and keep em for spacing, so that padding and margins follow their own element's text. In that combination, nothing compounds, and the em values you convert are always relative to a font size you can read at once.
Common values
The table at the foot of the page
The page includes a table of the pixel values that common em figures correspond to at the base you set: 0.5 em 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. At the default base these are the same numbers as for rem. Change the base and the table changes with it, which is a good way to see what em really does.
Try two bases side by side
Type 1.5 with a base of 14, then with a base of 20. You get 21 and 30 pixels. That is the whole difference between em and rem in one experiment: the same figure, two elements, two sizes.
How to convert em to px here
Type the em value
Enter the size in em in the first field. Decimals are accepted, so 0.714 works as well as 1.
Set the font size the em refers to
Type the font size of the element, or of its parent if the property is font-size. If you are unsure, leave 16 and treat the result as an approximation.
Read the pixel value
The answer appears at once, with the base shown beside it. Copy it into your notes or compare it with the design file.
Where these units come from
The em
The em is older than the web. In metal type it was the width of a cast block, named after the capital M, and typographers still speak of em dashes and em spaces. In CSS it means the font size in force, which is why it changes as you nest elements.
The pixel and the rem
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. The rem was added to escape the compounding of em: it is the em of the root element and never multiplies. If you work in both, convert px to em to go the other way.
When developers convert em to px
Checking a build against a design file
A designer hands over a file in pixels, and the code is in em. To check that the page matches, you convert em to px using each component's font size. A button with a label of 14 px and padding of 0.714em 1.429em should come out at 10 px and 20 px, and if the design says 12 and 24, one of them is wrong.
Debugging spacing
When a gap looks too large or too small, the cause is usually an em value that refers to a larger or smaller font than you expected. Converting it with the computed font size of the element tells you at once whether the arithmetic is the problem.
Reading unfamiliar code
Inherited stylesheets are full of em values whose pixel sizes you must reconstruct. Converting a handful of the main ones, with the right bases, gives you a map of the design.
Writing documentation and tests
People who test a page describe what they see in pixels. A developer who says the padding is 0.9em means little to a tester; 12.6 px means something. Converting makes the two sides understand each other.
Traps when you convert em to px
Using the wrong base
The commonest error. For font-size, use the parent's size; for all other properties, the element's own. Check the property before you type the base.
Forgetting a parent in em
If the parent's size is itself in em, you have to follow the chain. Use the computed value from the developer tools to cut it short.
Assuming the screen shows the same pixels
A CSS pixel is not a device pixel. On a high-density display one CSS pixel can be two or three device pixels. The conversion gives CSS pixels, the unit that the design tools and the stylesheet share.
Taking the answer for a promise
If the reader enlarges the text or the component is reused with another font size, the pixels change, as they are meant to. The converted number describes one situation, not all.
Questions people ask before converting
How many pixels is 1 em?
As many as the font size in force: 16 px for ordinary body text at the default, 24 px inside a 24 px element.
How many pixels is 2 em?
Twice the font size in force. At 16 px that is 32 px.
Why does my browser show something different?
The element's real font size is different from the base you typed. Read the computed font size in the developer tools.
Is em the same as rem?
No. Em is relative to the element, rem to the root.
Is my number uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With px to em, which divides instead of multiplying.
Habits that keep an em stylesheet understandable
Comment the base
A line such as padding: 0.75em 1.25em; /* 12px 20px at 16px */ costs a few characters and saves the next reader a conversion. It records the base you assumed.
Set the font size once per component
Define the component's font size on its root element, and refer to it with em inside. The base is then the same for every value in the component, and you can convert em to px against it with confidence.
Keep em for spacing, rem for type
It is the split that most stylesheets settle on, and it keeps the arithmetic simple. For sizes relative to the screen, px to vw and vw to px are the tools.
Test at a different text size
Raise the default text size in your browser and look at the page. If the spacing follows the text, the em values are working. If it does not, something was left in pixels.
A method for the awkward cases
Work from the outside in
When a component is deep inside others and its em values look confusing, start at the outermost element whose size you know and work inwards, converting one level at a time. Write each pixel size in a note as you go. After two or three levels the whole chain is on paper, and you can see exactly where a surprising number comes from. It takes a minute and replaces an hour of guessing.
Decide whether to simplify
If you have to convert em to px through four levels to understand a layout, the stylesheet is telling you something. Consider moving the font sizes to rem, so that each one refers to the root, and leaving only the spacing in em. The page will look the same and will be far easier to read next year.
Related converters
The same family of tools covers the neighbouring conversions. To go back to em, use px to em. 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 RGB to HEX handle the notations.
A worked example
Say you are reviewing a button component. The label is 14 px, the CSS says padding: 0.714em 1.429em and a gap of 0.5em between an icon and the label. You type 14 as the base, then 0.714 and read 10 px, 1.429 and read 20 px, 0.5 and read 7 px. The design file says 10, 20 and 8. Two of three match, so you look at the gap: 8 px at a base of 14 would be 0.571 em, and someone rounded it to 0.5. You raise it in the review, and the fix is one number.
A short checklist
Before converting
Find the font size the em refers to, from the developer tools or from the chain of font sizes in the code.
While converting
Type the em value, set the base and read the pixels, noting the base shown beside the result.
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 right only when the element's font size is 16 px.
Confusing em with rem
They look alike and behave differently. Use the right page for each.
Forgetting that em compounds
A value inside a nested element is relative to a size you may not have seen. Follow the chain.
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 em to px.
Summary
To convert em to px here, type the size in em and the font size it refers to, and read the result in pixels at once, using the formula px = em × 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 itself, or to the parent 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.