CSS Unit Converter
Convert px ↔ rem ↔ em ↔ pt ↔ % ↔ vw ↔ vh. Configurable root font-size and viewport.
published
- [FREE]
- [NO_SIGNUP]
- [NO_UPLOAD]
A CSS unit converter computes equivalents between the 7 most common CSS length units. Useful when porting a design system between teams that use different conventions (Figma in px, Tailwind in rem, print designers in pt).
Privacy
Pure JavaScript arithmetic. No upload.
Frequently asked questions
What is the relationship between px and rem?
`1rem` equals the document's root font-size. By default browsers ship with 16px root, so `1rem = 16px`. If a user has bumped their browser font-size to 20px, `1rem = 20px` — which is the whole point of rem-based sizing: respect the user's preferences.
When should I use em over rem?
Use `em` when a value should scale with its parent — padding inside a button that grows with the button's font-size, for example. Use `rem` for global sizing (typography scale, layout spacing) so the whole document scales consistently.
What is the formula for px → pt?
`pt = px × 72 ÷ 96`. CSS assumes 96 dpi by default, and `1pt = 1/72 inch`. So 16px = 12pt — which is why "12-point" body text in a word processor looks similar to default web body text.
Does this run in my browser?
Yes — pure math, no network.