Convert em units to pixels
At a 16 px parent font size, 1.5em is 24 px, and at 20 px the same value becomes 30 px. Enter the em value and the parent size to see the real pixel length of a margin or a heading. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Em value
- 1.5
- Parent font size px
- 16
- Pixels
- 24
- Css value
- 24px
- Precision
- 6
The em to pixels converter shows the real pixel length represented by a relative CSS em value at a specific parent font size. Enter the em measurement and the parent element's computed font size in pixels, and the calculator multiplies them to return a stable pixel value plus a ready-to-read CSS value. This is useful when reviewing typography, spacing, component dimensions, and responsive interfaces whose actual size changes with inherited text settings.
Understand what an em measurement represents
An em is a relative CSS length whose rendered size depends on font context. For many properties, one em corresponds to the computed font size of the element on which the property is used; when you are reasoning from an inherited or parent setting, the supplied parent font size provides the practical reference for the preview. That means an em value does not identify one permanent number of pixels.
At a sixteen-pixel reference, one em is sixteen pixels and one and a half em is twenty-four pixels. At a twenty-pixel reference, those same relative values become twenty and thirty pixels. This converter makes that dependency explicit instead of silently assuming a browser default.
The tool does not inspect a web page, resolve a cascade, load stylesheets, or guess which ancestor controls a property.
Use real-size previews in CSS and design work
Frontend developers can use the conversion while reviewing components that scale with local typography. A button with horizontal padding of 1.25em may look balanced at a sixteen-pixel font size but occupy a different real width inside a card whose inherited size is eighteen pixels. Converting both cases makes the impact visible before opening browser developer tools.
Designers can translate relative tokens into pixel annotations for handoff without changing the source token system, and accessibility reviewers can compare the physical consequences of larger inherited text settings. Keep the scope precise. This calculator converts em to px only; it does not convert px back to em, resolve rem against the root element, evaluate percentages, account for viewport units, or simulate browser zoom and device pixel ratios.
CSS pixels are the result, not hardware screen pixels. Because both paths use the same pure algorithm, a checked example can move into a build pipeline without changing its arithmetic.
What you can do with it
Preview component spacing
See the pixel padding or margin produced by an em token at a component's actual parent font size.
Prepare design handoff
Add concrete pixel annotations while retaining relative em values in the production design system.
FAQ
Does one em always equal sixteen pixels?
No. It equals sixteen pixels only when the relevant font-size reference is sixteen pixels. Supply the actual parent font size.
Can I convert a negative em value?
Yes. Negative relative offsets and margins can be valid CSS, so negative em values are accepted.
Does the result represent physical device pixels?
No. It represents CSS pixels. Browser scaling and device pixel ratio determine how CSS pixels map to hardware pixels.
Which parent font size should I enter?
Enter the computed font size of the parent element in pixels, for example 18 if a card inherits that size. The tool does not read your page or guess which element sets it, so you supply that number yourself.
Can it also convert rem, percentages or pixels back to em?
No. It only goes from em to pixels. It does not resolve rem against the root element, percentages or viewport units, and it does not simulate browser zoom or screen density.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/str/em-to-px \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"em_value":1.5,"parent_font_size_px":16}'const res = await fetch("https://api.kit.forhosting.com/str/em-to-px", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"em_value": 1.5,
"parent_font_size_px": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/em-to-px",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"em_value": 1.5,
"parent_font_size_px": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/em-to-px", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"em_value":1.5,"parent_font_size_px":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"em_value":1.5,"parent_font_size_px":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/em-to-px", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"em_value": 1.5,
"parent_font_size_px": 16
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.em_to_px",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
The calculation runs deterministically with no network access, storage, randomness, or date-dependent behavior, and automated API requests cost $0.002 each.
Understand what an em measurement represents
The response repeats the input values, returns the calculated number under pixels, and includes a css_value such as 24px. It also states the formula so the result remains easy to audit. You provide the already known computed parent font size, making the result deterministic and suitable for quick design checks, documentation, tests, and API workflows.
Calculate pixels and control rounding
Both required values must be finite numbers, and the font-size reference must be greater than zero because a zero or negative computed font size is not a meaningful basis for this preview. Zero and negative em measurements are accepted: zero is useful for generated token tables, while negative relative offsets and margins are valid in many CSS layouts. By default, the pixel result is rounded to six decimal places. No unit text is accepted inside the numeric fields: send 1.25 rather than 1.25em and 18 rather than 18px. The calculation is pixels equals em_value multiplied by parent_font_size_px. Rounding affects the returned pixels and css_value, while the input values remain visible for traceability. The implementation also normalizes negative zero to ordinary zero, avoiding surprising values in JSON comparisons. Inputs with NaN, Infinity, missing fields, unsupported types, excessive magnitude, or a result beyond the supported bound are rejected as invalid_input instead of producing misleading output.
Use real-size previews in CSS and design work
The output is also useful for test data: a theme generator can call the API, store the returned pixel value, and assert that a component preview uses the expected dimensions for a chosen parent size. Interactive calculations run in the browser, while an automated request costs $0.002.
Integration use cases
Create stable test fixtures
Generate deterministic expected pixel sizes for theme builders, component tests, and CSS documentation.
Technical questions
What formula converts em to pixels?
Multiply the em value by the parent font size in CSS pixels: pixels = em_value × parent_font_size_px.
What does an API request cost?
Each automated API request costs $0.002. The interactive browser calculation is available free on this page.