width: 1rem; /* 16px */Layout Assumptions
Customize root font, parent font, and viewport dimensions to match your target layout.
All CSS Units for 16px
Click any row or "Select" button to set that unit as your target unit.
| Unit | Converted Value | Category | Assumption / Basis | Actions |
|---|---|---|---|---|
Pixels (px)Input | 16px | absolute | Standard CSS pixel reference. | |
Root EM (rem)Target | 1rem | font relative | Root font-size: 16px. | |
Element EM (em) | 1em | font relative | Parent font-size: 16px. | |
Percentage (%) | 100% | font relative | Parent font-size: 16px (100% = 16px). | |
Viewport Width (vw) | 0.8333vw | viewport relative | Viewport width: 1920px. | |
Viewport Height (vh) | 1.4815vh | viewport relative | Viewport height: 1080px. | |
Viewport Minimum (vmin) | 1.4815vmin | viewport relative | Min viewport dimension: 1080px (min of 1920w / 1080h). | |
Viewport Maximum (vmax) | 0.8333vmax | viewport relative | Max viewport dimension: 1920px (max of 1920w / 1080h). | |
Character Width (ch) | 2ch | font relative | 0-glyph width estimated as 0.5 × parent font (8px). | |
Points (pt) | 12pt | absolute | 1pt = 1/72 in = 4/3 px (~1.3333px). | |
Picas (pc) | 1pc | absolute | 1pc = 12pt = 16px. | |
Inches (in) | 0.1667in | absolute | 1in = 96px = 2.54cm. | |
Centimeters (cm) | 0.4233cm | absolute | 1cm = 96 / 2.54 px (~37.7953px). | |
Millimeters (mm) | 4.2333mm | absolute | 1mm = 0.1cm (~3.7795px). |
CSS Length & Typography Unit Converter Guide
Convert px, rem, em, %, vw, vh, and physical units with customizable root font and viewport dimensions.
Overview
The CSS Unit Converter converts CSS length values across absolute (px, pt, pc, in, cm, mm), font-relative (rem, em, %, ch), and viewport-relative (vw, vh, vmin, vmax) units. It exposes layout assumptions such as root (html) font size, parent font size, and viewport dimensions so you can match your project’s typography scale and responsive breakpoints without guessing.
How to Convert CSS Units with Custom Assumptions
Type any positive, negative, or fractional CSS value and pick your source and target units.
Adjust the root font size (16px default or 10px for 62.5% scales), parent font size, and viewport width/height.
Copy the formatted CSS snippet, or click any row in the sibling matrix to select a different target unit.
- Root vs Parent Context: rem is strictly calculated against <html> root font-size, while em, %, and ch are calculated against parent element size.
- Viewport Dimensional Scaling: vw and vh interpolate against viewport width and height; vmin and vmax dynamically track the smaller and larger viewport axis.
- Precision Control: Configurable decimal rounding (0 to 6 places) eliminates floating-point artifacts in generated CSS stylesheets.
- 100% In-Browser: All calculations run locally in the browser with zero network or tracking requests.
- No State Uploaded: Layout parameters and values remain strictly private on your device.