Home › Developer & IT › CSS Unit Converter

CSS Unit Converter

Converts a CSS length between px, rem, em, pt, pc, in, cm, mm and Q using the CSS reference pixel (96 px per inch, 1 pt = 1/72 in) and the root and parent font sizes for rem and em, and lists the value in every unit.

When to use

You are translating a design spec in points or millimetres to pixels, choosing rem values for a 16 px root font, or checking print stylesheet lengths.

Do not use when: You need viewport-relative units (vw, vh, %), physical screen millimetres for a specific display (use screen-ppi) or paper dimensions (use paper-size).

Formula

px = value × px_per_unit(from); result = px / px_per_unit(to); px per unit: 1 in = 96 px, 1 pt = 96/72 px, 1 pc = 16 px, 1 cm = 96/2.54 px, 1 mm = 96/25.4 px, 1 Q = 96/101.6 px, 1 rem = root_font_size_px, 1 em = parent_font_size_px

Absolute units follow CSS Values and Units Level 4 (anchored to the 96 dpi reference pixel, so they only match physical size on print media); em and rem are resolved with the supplied font sizes.

Inputs

Parameter	Type	Unit	Required	Description
`value`	number		yes	The length to convert. Range: ≥ -1000000000, ≤ 1000000000
`from_unit`	enum: px \| rem \| em \| pt \| pc \| in \| cm \| mm \| q		yes	Unit of the given value.
`to_unit`	enum: px \| rem \| em \| pt \| pc \| in \| cm \| mm \| q		yes	Unit to convert to.
`root_font_size_px`	number	px	default 16	font-size of the html element, the basis of rem (browser default 16 px). Range: > 0, ≤ 1000
`parent_font_size_px`	number	px	default 16	Computed font-size of the element (or its parent for font-size itself), the basis of em. Range: > 0, ≤ 1000

Outputs

Output	Type	Unit	Description
`result`	number		The value expressed in to_unit.
`px_value`	number	px	The value in CSS pixels, the common intermediate.
`conversion_table`	object		The value in px, rem, em, pt, pc, in, cm, mm and q.
`summary`	string		Conversion as a sentence, e.g. 24px = 1.5rem.

Example

24 px to rem (16 px root): {"value":24,"from_unit":"px","to_unit":"rem","root_font_size_px":16} → {"result":1.5,"px_value":24,"conversion_table":{"px":24,"rem":1.5,"pt":18,"in":0.25,"mm":6.35,"pc":1.5},"summary":"24px = 1.5rem"}

12 pt to px: {"value":12,"from_unit":"pt","to_unit":"px"} → {"result":16,"px_value":16,"conversion_table":{"rem":1,"cm":0.4233,"q":16.9333}}

GET https://tttkmbb.com/api/v1/calculate/css-units?value=24&from_unit=px&to_unit=rem&root_font_size_px=16

Machine access

API: GET https://tttkmbb.com/api/v1/calculate/css-units (query parameters) or POST with a JSON body {"inputs": {...}}
Schema: https://tttkmbb.com/api/v1/calculators/css-units · Markdown: https://tttkmbb.com/developer/css-units.md · JSON definition: https://tttkmbb.com/developer/css-units.json
MCP: server https://tttkmbb.com/mcp, tool run_calculator with calculator_id="css-units"
OpenAPI operationId: convert_css_units
Freshness: static. Authentication: none. Rate limit: fair use (see rate limits).

Sources

CSS Values and Units Module Level 4 – Absolute lengths (W3C) (standard)
MDN Web Docs – CSS <length> (reference)

FAQ

Why is 1 in = 96 px when my screen is 220 dpi?

CSS defines the px as a reference unit (1/96 in at arm's length) and browsers scale it with device pixel ratio; absolute CSS units are only physically accurate when printing.

What is the difference between em and rem?

rem is relative to the root (html) font-size, em to the current element's computed font-size, which compounds when nested; pass the relevant sizes in root_font_size_px and parent_font_size_px.

What is a Q?

A quarter-millimetre (1/4 mm), a unit used in Japanese typography; 1 Q = 0.945 px.

Related calculators

Screen PPI Calculator — Physical pixel density of an actual display.
Length Converter — General length conversion outside CSS.
Paper Size Converter — Dimensions of paper formats for print stylesheets.