# 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.

- Calculator id: `css-units` · Category: Developer & IT (`developer`) · Tool name: `convert_css_units`
- Canonical page: https://tttkmbb.com/developer/css-units · This document: https://tttkmbb.com/developer/css-units.md · JSON definition: https://tttkmbb.com/developer/css-units.json

## Purpose

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.

**Use when:** 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).

## Input

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

## Output

| Field | 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. |

## 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.

## Data Sources

- CSS Values and Units Module Level 4 – Absolute lengths (W3C) — https://www.w3.org/TR/css-values-4/#absolute-lengths (standard, retrieved 2026-09-24)
- MDN Web Docs – CSS <length> — https://developer.mozilla.org/en-US/docs/Web/CSS/length (reference, retrieved 2026-09-24)

Data freshness: `static`. Deterministic formula with fixed constants; results never go stale. Inputs supplied by the caller determine the output.

## API

- `GET https://tttkmbb.com/api/v1/calculate/css-units?value=…&from_unit=…&to_unit=…`
- `POST https://tttkmbb.com/api/v1/calculate/css-units` with JSON body `{"inputs": {…}}`
- Response: unified envelope (`success`, `request`, `result.values`, `result.units`, `sources`, `freshness`, `timestamp`, `next_actions`, `links`); see https://tttkmbb.com/docs/response-format.md
- Schema: https://tttkmbb.com/api/v1/calculators/css-units · OpenAPI operationId `convert_css_units` in https://tttkmbb.com/openapi.json
- Authentication: none. Rate limit: fair use, see https://tttkmbb.com/docs/rate-limits.md.

## MCP

- Server: `https://tttkmbb.com/mcp` (Streamable HTTP, JSON-RPC 2.0, no auth)
- Tool:  `run_calculator` with `{"calculator_id": "css-units", "inputs": {…}}`

## Example

- 24 px to rem (16 px root): inputs `{"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: inputs `{"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
```

## Limitations

You need viewport-relative units (vw, vh, %), physical screen millimetres for a specific display (use screen-ppi) or paper dimensions (use paper-size). 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. All values are computed from the formula above; no measurement or live data is involved.

## 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

- [Screen PPI Calculator](https://tttkmbb.com/everyday/screen-ppi.md) — Physical pixel density of an actual display.
- [Length Converter](https://tttkmbb.com/conversion/length.md) — General length conversion outside CSS.
- [Paper Size Converter](https://tttkmbb.com/conversion/paper-size.md) — Dimensions of paper formats for print stylesheets.