About the EM to PX Converter
When a stylesheet is written in em, working out what a rule actually renders takes a multiplication plus a look at the surrounding context. This converter does the multiplication for you: enter the em values, set the font size they are relative to, and read the pixel result.
The default reference is 16px, so 0.75em is 12px, 1.125em is 18px and 2.5em is 40px. If the value sits inside a component whose text is 14px, enter 14 instead and the numbers follow. That single field is what makes em debugging manageable, because the same em number means different pixels in different places.
Compounding is the usual reason a value surprises people. A section at 1.2em inside another at 1.2em renders at 1.44 times the base, and a fourth nested level pushes it past double. Converting each level in turn with this tool shows exactly where the drift begins. For a unit that ignores nesting entirely, see REM to PX.
How to use
- Paste the em values, one per line.
- Enter the font size they are measured against.
- Check the rendered size for that context.
- Repeat per nesting level to trace compounding.
Common questions
- How many pixels is 1em?
- Whatever the reference font size is. With the default of 16 it comes to 16px.
- Where do I find the reference font size?
- Open developer tools, select the element and read the computed font-size of its parent.
- Does em work for widths as well as text?
- Yes. For any property other than font-size it uses the element own font size as the reference.
- Why do two identical em values render differently?
- They sit in contexts with different font sizes. Em is always relative, never absolute.