Pixels to em units
Convert a pixel size into em: 24 px inside a 16 px parent is 1.5 em, ready to paste as 1.5em. Text and spacing then grow with the parent font size and with the reader's own settings. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Px
- 24
- Parent
- 16
- Em
- 1.5
- Em css
- 1.5em
- Ratio
- 1.5
- Precision
- 10
This pixels-to-em converter turns a CSS font size given in pixels into em units using the parent element font size as the reference base. The identity used here is fully deterministic: em equals px divided by parent. Designers, frontend engineers, and accessibility auditors use this conversion when rewriting fixed pixel type scales into scalable stylesheets that grow with user font settings and nested component context. The engine uses only finite arithmetic with no network calls, no sampling, and no date-dependent shortcuts.
Where px-to-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 and line-related sizes 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 parent 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 parent and the UI must show one point five em side by side with the pixel echo. Keep rem or viewport tools separate when the cascade root or viewport is the reference instead of the parent font size, and keep this converter focused when the question is strictly pixels to em units for scalable, accessible typography.
What you can do with it
Design tokens and type scales
Convert pixel type and spacing tokens into em so nested components scale with the parent font size.
Stylesheet rewrites and accessibility
Rewrite fixed pixel font sizes into em so text zoom and user font settings enlarge layout proportionally.
FAQ
What does the pixels to em converter cost?
It is free in your browser on this page.
How are pixels and em related?
With a parent font size in pixels, em = px / parent. One em equals the parent font size, so 24px with parent 16 yields 1.5em.
What happens if the parent font size is zero?
A zero parent makes em = px/parent undefined (division by zero).
Does this tool convert em back to pixels, or rem?
No. This capability only converts pixels to em given an explicit parent font size in pixels. Use dedicated tools for reverse or rem conversion.
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/str/px-to-em \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"px":24,"parent":16}'const res = await fetch("https://api.kit.forhosting.com/str/px-to-em", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"px": 24,
"parent": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/px-to-em",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"px": 24,
"parent": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/px-to-em", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"px":24,"parent":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"px":24,"parent":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/px-to-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
{
"px": 24,
"parent": 16
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.px_to_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 twenty-four pixels with a sixteen-pixel parent is one point five em, and fourteen pixels with the same parent is zero point eight seven five em.
What pixels and em mean and what the response contains
A CSS conversion from pixels to em answers a focused layout question: given a font size or spacing length in pixels and the parent element font size in pixels, what is the equivalent magnitude in em so type, padding, and component sizes stay proportional when the cascade or user zoom 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 automatically when the parent font size changes. Zero is a valid px value and simply yields zero em, which is useful when clearing a size token or asserting empty spacing. This calculator accepts a numeric px value and a parent font size in pixels, then returns the converted em result rounded to a stable precision, a compact em_css string such as 1.5em ready to paste into a stylesheet, the echoed inputs, a ratio field equal to the em result for clarity in tables, and a short formula reminder. There is no reverse em-to-px path on this page, no rem root lookup, no viewport math, and no media-query simulation: the engine divides px by parent inside the supported magnitude range or rejects the input with invalid_input. Rejected cases include missing px or parent, non-finite numbers, magnitudes above the documented ceiling, and any parent that is zero or numerically zero, because em equals px over parent would divide by zero.
How px, parent, and precision 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 spreadsheet cell does not become a wrong type size. Computation is a single division: em equals px divided by parent. Teachers can also use the same contract to mark homework that asks students to convert a pixel type scale into em for nested headings and body text. The preferred fields are px for the pixel magnitude and parent for the parent font size in pixels, with aliases pixels, size, font_size, value, and amount for the pixel field, and base, parent_px, parent_font_size, base_font_size, and root for the parent field so heterogeneous clients can share one contract. A zero parent 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 px, parent, em, and ratio, defaulting to ten and capped at fifteen so JSON goldens stay stable across runtimes. 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-to-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.