Em to px converter
freeConvert em to pixels instantly. Useful for auditing inherited typography scales and translating tokens to absolute values.
1em×16=16px
Also expressed as
base 16pxQuick reference
Convert em to pixels instantly. Useful for sanity-checking inherited typography scales, translating em-based design tokens to absolute values, or auditing a third-party stylesheet. Set the root font-size with the Base chip; everything updates live.
Common use cases
- Migrating a px-only stylesheet to rem. Paste your existing CSS into the Bulk panel, pick `px → rem`, leave Hairlines preserved so 1px borders stay sharp, and copy the result. The diff view confirms only spacing and sizing values changed.
- Building a fluid type ramp without re-doing the math. Open the Clamp() builder, enter min size + min viewport and max size + max viewport, and the tool emits `clamp(1rem, …, 1.5rem)` with the algebra shown. Drag the preview slider to see the size at any viewport width.
- Quick px ↔ rem during code review. Type a value, see px / rem / em / pt / pc / % / in / cm / mm / vw / vh all at once. The reference table makes 16px ↔ 1rem and similar conversions a one-click affair. Tailwind scale badges flag when a value lines up with `space-N`.
- Auditing a project's root font-size. Paste any CSS into the Bulk panel. If a `:root { font-size: … }` declaration exists, the tool surfaces it and offers to switch the base font-size everywhere — so conversions match how the page actually renders.
Frequently asked
How do I convert em to px?
Multiply the em value by the parent element's font-size. This calculator treats the root font-size as the parent. For nested elements where `em` cascades from a parent with a different font-size, substitute that size in the Base picker to get the correct px result.
What units are supported?
px, rem, em, %, pt, pc, in, cm, mm, vw, and vh. Conversions pivot through pixels, so converting any unit to any other only takes one step. rem and em share the same root font-size in this tool — that's the way they're used in 99% of real CSS; the parent-font-size cascade for em is something you can't infer from a calculator anyway.
How does the tool decide what counts as 1 rem?
Root font-size, which you control with the Base chip in the header (presets 10 / 12 / 14 / 16 / 18 / 20 + custom). 16px is the browser default. The 10px shortcut (`html { font-size: 62.5% }`) yields a base of 10, useful for easy math but make sure your real CSS matches the value you set here.
Is `dpi` a length unit?
No — `dpi` is a *resolution* unit used in media queries (`@media (resolution: 96dpi)`). For length conversions involving physical units, CSS defines `pt`, `pc`, `in`, `cm`, and `mm` (all included here). They convert via the fixed identity `1in = 96 CSS px`, regardless of the device's actual pixel density.
What does the 'Bulk' panel actually change?
It rewrites numeric+unit pairs inside CSS declarations: `padding: 16px` → `padding: 1rem`. The walker tracks comments, string literals, and `url(...)` payloads so they're never touched. You can scope the conversion to spacing/sizing only, typography only, or all properties — and the 'Keep 1px hairlines' checkbox preserves single-pixel borders for crisp dividers.
How does the clamp() builder work?
You give it four numbers: a min font-size, the viewport width at which the minimum should still apply, and the same pair for the maximum. It fits a straight line between those two points and emits `clamp(min, intercept + slope*vw, max)`. Below the min viewport you get the min size; above the max viewport, the max. Drag the preview slider to see what size the formula produces at any viewport width in between.
Why does a converted value show ≈ next to it?
Because the value doesn't round cleanly at your current precision setting. `17px / 16` is `1.0625rem` exactly — that's fine — but `15px / 16` is `0.9375rem`, which most designers don't want as a literal in their CSS. The badge lets you spot 'off-grid' values at a glance so you can nudge them to the nearest clean increment.
Does my CSS leave the browser?
No. All the math runs locally — there's no network call. Safe for proprietary stylesheets, design-system internals, or anything you wouldn't paste into a public formatter.
Are there keyboard shortcuts?
`⌘K` focuses the value input on the Convert tab. On any number field, ↑/↓ steps by 1, `⇧+↑/↓` steps by 10. Selecting a unit from the dropdown updates everything live — there's no Convert button to click.