What This Tool Does
CSS supports many units for sizing things — px, rem, em, %, vw, vh, pt, in, cm, mm, and more. Each has a different purpose, and converting between them isn't always straightforward (em depends on its parent's font-size; rem depends on the root font-size; vw depends on viewport width). The Microapp CSS Unit Converter handles all the math: enter a value in any unit, see equivalents in every other unit instantly.
Runs in your browser, with adjustable assumptions (root font-size, parent font-size, viewport size) so you can convert in your specific context.
How to Use It
- Enter a value in any unit field (e.g., 16 px, or 1.5 rem).
- The other units update instantly with the converted equivalents.
- Adjust the assumptions (root font-size, parent font-size, viewport width/height) if your project differs from the defaults.
- Click "Copy" next to any unit to put the value on your clipboard.
• px: 1.5 × 16 = 24 px
• em: 1.5 (relative to parent — assumes parent matches root)
• % (of parent font-size): 150%
Same value, multiple notations.
The Units, Briefly
| Unit | What it means | When to use |
|---|---|---|
| px | 1 device pixel (more or less — depends on display density) | Borders, fixed-pixel UI elements, exact-spec layouts |
| rem | Relative to the root element's font-size (default 16 px) | Most modern responsive design — scales with user font-size preferences |
| em | Relative to the parent element's font-size | Sizing things relative to their context (button padding, list indentation) |
| % | Percentage of the parent's value (size, position) | Fluid layouts, responsive widths |
| vw / vh | 1% of viewport width / height | Hero sections that fill the screen, responsive font-size |
| vmin / vmax | 1% of the smaller / larger of width and height | Square elements that fit any viewport |
| pt | 1/72 of an inch — print typography | Print stylesheets only; rarely used on screen |
| in / cm / mm | Real-world distance units | Print stylesheets — physical paper measurements |
| ch / ex | Character width / x-height of the current font | Typography-aware sizing (line length in chars) |
The Most Common Conversions Designers Need
px to rem (responsive sizing). The standard conversion: divide pixel value by 16 (default root font-size). 24 px = 1.5 rem. Useful when migrating a fixed-pixel design to a responsive system.
rem to px (debugging in DevTools). Multiply rem by 16. 0.875 rem = 14 px. DevTools sometimes shows computed values in px even when CSS is in rem.
px to em (relative sizing). Divide pixel value by the parent's font-size, not the root. If a button sits inside a section with font-size 18 px, then 24 px = 24/18 = 1.333 em. The Microapp converter lets you set the parent font-size assumption to model this.
vw to px (testing responsive layouts). 1 vw = 1% of viewport width. On a 1200-px-wide viewport, 50 vw = 600 px. On a 360-px-wide viewport, 50 vw = 180 px. The converter shows you both extremes.
The Modern Best Practice: rem for Almost Everything
Modern CSS usage strongly favors rem over px for all but pixel-specific work (1px borders, 1px shadows). The reason: users can change their browser's default font-size (Settings → Appearance → Font Size in most browsers). When you size everything in rem, the entire UI scales proportionally with their preference. When you size in px, you ignore their accessibility setting.
The convention: use a base font-size of 16 px on the root (this is the browser default — don't override unless you have a reason), then size everything in rem from there. 0.875 rem for small text, 1 rem for body text, 1.5 rem for h2, etc.
Common Pitfalls
"em" inside nested elements compounds. If a parent has 1.5 em font-size and you set the child to 1.5 em as well, the child is 1.5 × 1.5 × root = 2.25 × the root size. Each em is relative to its immediate parent. rem avoids this trap because it's always relative to the root.
Trying to use vw for body text. font-size: 2vw means body text shrinks on phones to nearly unreadable sizes. Don't size body text with vw alone — use clamp() if you need responsive scaling: font-size: clamp(1rem, 2vw, 1.25rem).
Mixing pt and px. pt is for print stylesheets. Browsers approximate 1 pt as 1.333 px, but real conversion depends on the device. Don't use pt for screen layouts.
Decimal precision. Browsers round subpixel values inconsistently. 0.875rem may display slightly differently across browsers. For pixel-perfect alignment, use whole pixel values; for everything else, slight subpixel variation doesn't matter.
Related Tools
For converting hex colors used in CSS to RGB or HSL, use the Color Converter. To generate CSS animations visually, the CSS Animation Generator is the right tool. For visualizing CSS gradients, see the Gradient Generator.