CSS Unit Converter
Convert any CSS length to every other unit at once, against the root font size, parent font size and viewport dimensions you actually use — with a visual size preview.
Photo by Halacious on Unsplash
CSS unit converter
| Unit | Value | CSS | Notes |
|---|
Visual comparison
Key takeaways
- In CSS, one inch is defined as exactly 96 pixels — absolute units are anchored to the pixel, not to physical size.
- rem never compounds and respects the user’s browser font size; px ignores it entirely.
- Wrap fluid vw typography in clamp() with a rem component so text can still be zoomed.
Absolute versus relative units
CSS units split into two families, and the distinction matters more for accessibility than for layout.
Absolute units — px, pt, in, cm, mm, pc — resolve to a fixed size. In CSS these are all defined in terms of each other: one inch is exactly 96 pixels, one point is 1/72 inch, one centimetre is 37.8 pixels. Note that a CSS inch is not a physical inch on screen; the anchor is the pixel, not the ruler.
Relative units — rem, em, %, vw, vh, ch, ex — resolve against something else: the root font size, the parent font size or the viewport. They scale with context, which is what makes responsive and accessible typography possible.
| Unit | Equals | Relative to |
|---|---|---|
| 1 rem | 16px by default | Root element font size |
| 1 em | Parent font size | Immediate parent, so it compounds |
| 1 pt | 1.333px | Fixed |
| 1 in | 96px | Fixed |
| 1 vw | 1% of viewport width | Viewport |
rem versus em: the compounding trap
rem is relative to the root element. em is relative to the font size of the element itself (for font-size) or its parent (for every other property). That difference produces the single most common CSS sizing bug.
/* Nested em compounds */
.card { font-size: 1.2em; } /* 16 x 1.2 = 19.2px */
.card .title { font-size: 1.2em; } /* 19.2 x 1.2 = 23.04px */
.card .title span { font-size: 1.2em; } /* 27.65px — surprise */
/* rem does not */
.card, .card .title, .card .title span { font-size: 1.2rem; } /* all 19.2px */The practical rule most design systems settle on: rem for font sizes and layout spacing, em for spacing that should track the local font size — button padding, icon gaps, letter-spacing. That way a large button scales its own padding without any extra rules.
Why px font sizes are an accessibility problem
Browsers let users change the default font size, and roughly 3–5% of people do, most often because they need to. When you write font-size: 14px, that setting is ignored: the text stays 14 pixels no matter what the user asked for.
With font-size: 0.875rem the same text is 14px for a default user and 21px for someone who set their browser to 24px. Nothing else needs to change.
Never do this: html { font-size: 62.5%; } to make 1rem equal 10px. It is a popular trick and it directly overrides the user’s preference — the exact problem rem was introduced to solve. Keep the root at its default and do the arithmetic in your build.
WCAG 1.4.4 requires text to be resizable to 200% without loss of content or function, which relative units give you almost for free. See the accessibility guide for the related contrast requirements.
Viewport units and fluid typography
vw and vh are percentages of the viewport. They are powerful and easy to misuse: font-size: 4vw is 61px on a desktop and 15px on a phone, and it cannot be zoomed, which fails WCAG 1.4.4.
The safe pattern is clamp(), which bounds the fluid value:
/* min 1.5rem, scales with viewport, never above 3rem */
h1 { font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem); }Because the middle term includes a rem component, the text still responds to the user’s font-size preference. A pure vw value does not.
Modern CSS also offers the dynamic viewport units svh, lvh and dvh, which solve the mobile browser chrome problem that made 100vh notoriously unreliable on iOS.
Quick conversion reference
At the default 16px root:
| px | rem | pt | Typical use |
|---|---|---|---|
| 12 | 0.75 | 9 | Captions, legal text |
| 14 | 0.875 | 10.5 | Secondary text, labels |
| 16 | 1 | 12 | Body copy — the minimum for comfort |
| 18 | 1.125 | 13.5 | Long-form body copy |
| 20 | 1.25 | 15 | Lead paragraphs |
| 24 | 1.5 | 18 | h3 |
| 32 | 2 | 24 | h2 |
| 40 | 2.5 | 30 | h1 |
| 48 | 3 | 36 | Display headings |
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size, which is 16px unless changed. So 24px is 24 ÷ 16 = 1.5rem.
Should I use rem or px for font sizes?
rem. Pixel font sizes ignore the user's browser font-size preference, which is an accessibility failure for the people who rely on it.
What is the difference between rem and em?
rem is relative to the root element and never compounds. em is relative to the element's own or parent's font size, so nested elements multiply.
Is 1pt equal to 1px?
No. 1pt is 1/72 of a CSS inch and a CSS inch is 96px, so 1pt = 1.333px. Points belong in print stylesheets.
Why does 100vh cause problems on mobile?
Mobile browsers show and hide their toolbars while scrolling, changing the viewport height. Use the dynamic units dvh, svh or lvh instead.
Should I set html { font-size: 62.5% }?
No. It makes 1rem equal 10px for convenient maths but overrides the user's font-size preference, defeating the reason to use rem at all.
What is ch and when is it useful?
One ch is the width of the “0” glyph in the current font. It is the natural unit for line length: max-width: 65ch gives a comfortable measure for reading.
Sources & further reading
- CSS Values and Units Level 4 — the normative definitions of every length unit
- MDN: CSS length — practical guidance and browser support
- WCAG 2.2: Resize Text — the 200% resize requirement that relative units satisfy
- MDN: clamp() — bounded fluid typography without breaking zoom