CSS Unit Converter
Convert between CSS units — px, rem, em, pt, vw, vh, and more — with live visual feedback and a full conversion table.
Prefer the terminal? See the CLI equivalent →About the CSS Unit Converter
- px ↔ rem, em, pt & %
- Configurable root font size
- Instant results
- 100% private — runs in your browser
- Free, no sign-up
CSS has more than a dozen length units, and they fall into three families: absolute units like px, pt, and cm that map to a fixed physical size; font-relative units like em and rem that scale with typography; and viewport-relative units like vw and vh that respond to the size of the screen. Choosing the right one — and knowing what a value in one unit becomes in another — is a routine part of building responsive, accessible interfaces.
This converter translates a value into every CSS unit at once and shows the result visually, so you can see the size as a to-scale bar, a box, and rendered text, not just read a number. Crucially, it lets you set the context the units actually depend on: the root font-size (for rem), the element font-size (for em), and the viewport dimensions (for vw and vh). Change the context and every relative unit updates live.
All the maths is anchored to the CSS reference pixel: 1 inch is defined as 96px, which fixes pt, pc, cm, mm, and Q. Everything runs in your browser, so nothing you enter is uploaded.
How to use it
- Enter a value and pick its unit — for example 1.5 rem or 24 px.
- Read the px equivalent and the full conversion table, grouped by absolute, font-relative, and viewport units.
- Adjust the context if needed: set the root and element font-size, or drag the viewport sliders to match your target screen. Click “Use my screen” to load your current environment.
- Use the visual panels — the to-scale bar, the box, and the font-size sample — to sanity-check how big the value really is.
CSS units reference
How each supported unit is defined, relative to the CSS reference pixel (1in = 96px):
- px
- The CSS reference pixel — the anchor all other units are measured against.
- pt
- Point. 1pt = 1/72 inch = 1.333px. From print typography.
- pc
- Pica. 1pc = 12pt = 16px.
- in / cm / mm
- Physical units: 1in = 96px = 2.54cm = 25.4mm.
- Q
- Quarter-millimetre. 1Q = 1/40 cm ≈ 0.945px.
- rem
- Relative to the root (html) font-size — the go-to unit for scalable, accessible sizing.
- em
- Relative to the current element’s font-size; compounds when nested.
- ch / ex
- The width of the “0” glyph and the x-height. Font-dependent, so estimated here at half the font-size.
- vw / vh
- 1% of the viewport width / height — the basis of fluid, responsive layouts.
- vmin / vmax
- 1% of the smaller / larger viewport dimension.
Frequently asked questions
How many pixels is 1rem?+
By default 1rem = 16px, because browsers use a 16px root font-size unless it is changed. If you set a different root font-size (on the html element), rem scales with it — that is the whole point of rem. Set the root font-size in the Context panel to see the exact value.
What is the difference between em and rem?+
rem is always relative to the root (html) font-size, so it is predictable across the whole page. em is relative to the font-size of the current element, which means nested ems compound — an em inside an element that itself uses em multiplies. rem is usually the safer choice for consistent, accessible sizing.
Why do I need to enter a font-size and viewport?+
Because most CSS units are relative, a value like 2rem or 10vw has no fixed pixel size on its own — it depends on the root font-size and the viewport. The Context panel lets you supply those, so the conversions match your real target rather than a hardcoded assumption.
Why are ch and ex marked approximate?+
ch is the width of the “0” character and ex is the font’s x-height. Both depend on the specific font being rendered, so there is no single correct pixel value. This tool estimates them at half the font-size, which is typical, and flags them with ≈ so you know they are approximate.
When should I use px versus rem?+
Use rem for anything that should scale with the user’s preferred text size — font sizes, spacing, and layout — because it respects accessibility settings. Reserve px for details that should stay fixed regardless of font size, such as hairline borders. Converting between them here helps you translate a design handed off in px into scalable rem.
Works well with
CSS Unit Converter chains with these tools — send your result straight on:
Related tools
Code to UML
Turn TypeScript or Java source into a Mermaid class diagram — classes, interfaces, enums, fields, methods, inheritance, and interfaces — rendered live in your browser.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and OKLCH, with a picker, alpha, and a WCAG contrast checker — all in your browser.
Encoder / Decoder
Encode and decode text with Base64, URL, and Hex — UTF-8 safe, instant, and fully in your browser.
HEIC to JPG Converter
Convert iPhone HEIC/HEIF photos to JPG, PNG, or WebP — fast, multi-threaded batch conversion entirely in your browser. Nothing is uploaded, and location and metadata are removed by default.
Image Compressor
Fast, multi-threaded image compression — shrink many images at once by quality or to a target file size, with WebP/JPEG output and optional resizing, entirely in your browser.
Image Converter
Convert, resize, and compress images between PNG, JPEG, and WebP, or copy them as a Base64 data URI — entirely in your browser.