PX to EM converter
24 px is 1.5 em when the parent font size is 16 px. Convert CSS lengths between pixels and em in either direction against the parent font size, and get a ready-to-paste value for nested components and accessible spacing. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Value
- 24
- Parent
- 16
- Source unit of 'value'
- px
- To
- em
- Result
- 1.5
- From label
- pixels
- To label
- em
- Result css
- 1.5em
This px to em converter turns a CSS length from pixels into em units, or from em back into pixels, using the parent element font size in pixels as the reference base. The identities used here are fully deterministic: em equals px divided by base, and px equals em times base. Small checks you may already know include twenty-four pixels to em with base sixteen yielding one point five, and zero point eight seven five em to pixels with base sixteen yielding fourteen. The engine uses only finite arithmetic with no network calls, no sampling, and no date-dependent shortcuts.
Where px–em conversion fits in design systems, CSS, and software
Design systems often store spacing and type tokens in pixels for design tools while production CSS prefers em for nested components that should scale with local font size, so a single deterministic converter prevents hand-calculator drift when a designer, frontend engineer, or student rewrites a stylesheet. Accessibility audits convert fixed pixel paddings into em so text zoom and user font settings enlarge hit targets proportionally; email templates and legacy skins still mix absolute and relative lengths and need a quick offline check before a release.
Teachers assign homework that needs a fast check of sixteen-pixel body text and twenty-four-pixel headings without trusting opaque apps that silently switch to rem or drop the base. Developers call the same contract from scripts to seed deterministic test vectors for theme generators, to normalize user-entered sizes before sizing demos, or to satisfy programming-challenge statements that demand exact ratios rather than a hand-waved estimate.
Product tools use the rewrite when a learner or agent types twenty-four pixels and a sixteen-pixel base and the UI must show one point five em side by side with the pixel echo. Pair it with general unit converters when the same form must also handle length or data size, and keep rem or viewport tools separate when the cascade root or viewport is the reference instead of the parent font size.
What you can do with it
Design tokens and type scales
Convert pixel type and spacing tokens into em for nested components that should scale with the parent font size.
Stylesheet rewrites and accessibility
Rewrite fixed pixel paddings and line heights into em so text zoom enlarges layout proportionally.
FAQ
What does the px to em converter cost?
It is free in your browser on this page.
How are px and em related?
With a parent font size base in pixels, em = px / base and px = em * base. One em equals the parent font size.
What happens if the base font size is zero?
A zero base makes em = px/base undefined (division by zero).
Does this tool convert rem, percent, or viewport units?
No. It only converts between px and em given an explicit parent font size in pixels. Use dedicated tools for rem or other CSS units.
Why are results rounded to a precision?
Default precision is 10 decimal places; you can set precision from 0 to 15.
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/conv/typography-px-em \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"base":16,"from":"px","to":"em"}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-em", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"base": 16,
"from": "px",
"to": "em"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-em",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"base": 16,
"from": "px",
"to": "em"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-em", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"base":16,"from":"px","to":"em"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"base":16,"from":"px","to":"em"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-em", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"value": 16,
"base": 16,
"from": "px",
"to": "em"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_em",
"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.
Limits
max_abs_value | 1000000000000000 |
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
Relative typography depends on that base: one em equals the computed font size of the parent, so sixteen pixels with a sixteen-pixel base is one em, and one point five em with the same base is twenty-four pixels.
What px and em mean and what the response contains
A CSS length conversion between pixels and em answers a narrow layout question: given a magnitude in one unit and a parent font size in pixels, what is the equivalent magnitude in the other unit so spacing, type scale, and component sizes stay proportional when the cascade changes. Pixels are absolute device-independent lengths in CSS; em is relative to the computed font size of the parent element, so the same em value scales when the parent font size changes. Canonical ids are px for pixels and em for the relative em unit; everyday spellings such as pixel, pixels, and ems normalize to those ids so forms, query strings, and spreadsheets can reuse the same contract without inventing private enums. This calculator accepts a numeric value, a base font size in pixels, a source unit, and a target unit, then returns the converted result rounded to a stable precision, the canonical from and to identifiers, human-readable labels, an intermediate value in pixels, a compact result_css string such as 1.5em, and a short formula reminder. There is no viewport math, no rem root lookup, and no media-query simulation: the engine either multiplies and divides by the supplied base inside the supported magnitude range or rejects the input with invalid_input. Rejected cases include missing value, base, from, or to; non-finite numbers; magnitudes above the documented ceiling; unknown unit strings; and any base that is zero or numerically zero, because em equals px over base would divide by zero.
How value, base, and units are read and how results stay reproducible
Optional scientific notation on numeric strings is allowed when it parses as a finite decimal; embedded spaces, hex prefixes, and non-numeric tokens are rejected with a clear message so a bad cell does not become a wrong type size. Computation bridges through pixels: if from is em, multiply value by base to obtain pixels; if to is em, divide that pixel magnitude by base. Same-unit requests echo the value after validating base, which keeps the contract uniform for forms that always send a parent size. The preferred fields are value for the CSS length magnitude, base for the parent font size in pixels, from for the source unit, and to for the target unit, with aliases amount, length, n, quantity, and size for the value; base_px, parent, parent_font_size, font_size, and root for the base; unit, from_unit, source, and input_unit for from; and target, to_unit, output_unit, and into for to so heterogeneous clients can share one contract. Zero is a valid value and simply yields zero in the target unit, but a zero base always fails with invalid_input because relative em conversion is undefined without a non-zero parent font size. An optional precision field, with aliases decimals and dp, chooses how many decimal places to expose for value, base, result, and value_px, defaulting to ten and capped at fifteen so JSON goldens stay stable. Pair the free browser run on this page with the priced API when you need the identical mathematical result inside an automated pipeline without re-implementing typography math yourself.
Where px–em conversion fits in design systems, CSS, and software
On this page the work runs entirely in your browser; through the API each successful lookup costs $0.002, failed validation is not charged, and nothing is stored after the response returns. That split — free interactive exploration and a priced, identical API — matches the rest of the KIT tier-A catalog and lets you move from a classroom demo to an automated pipeline without changing the mathematical result.
Integration use cases
Deterministic CI fixtures
Generate reproducible px↔em pairs for theme generators, unit tests, and design-system pipelines.