Every frontend developer has been there: the design mockup says 24px, but your codebase uses rem. You open a calculator, divide by 16, and move on — only to repeat the same arithmetic an hour later. A dedicated CSS unit converter eliminates that friction entirely.
The CSS Unit Landscape
CSS offers several unit types, and choosing the right one has real implications for accessibility and responsive design.
px — Absolute Pixels
The pixel is the most intuitive unit. font-size: 16px is exactly 16 CSS pixels. But “absolute” is misleading — CSS pixels are not device pixels. On a retina display, one CSS pixel maps to two (or more) physical pixels.
Use px for: borders (border: 1px solid), shadows, and anything that should not scale with user font preferences.
rem — Root Em
1rem equals the font size of the root <html> element. By default that is 16px, so 1.5rem = 24px. The key advantage: if a user increases their browser font size for accessibility, rem-based layouts scale proportionally.
html { font-size: 16px; } /* default */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */Use rem for: font sizes, spacing, layout dimensions — anything that should respect user accessibility preferences.
em — Parent Em
1em equals the font size of the current element’s parent. This compounds: a 1.5em font inside a container that is already 1.5em results in 2.25rem effective size. This compounding behavior is both powerful and error-prone.
.card { font-size: 1.25em; } /* 20px if parent is 16px */
.card .caption { font-size: 0.8em; } /* 16px (0.8 × 20) */Use em for: component-local spacing that should scale with the component’s own font size (e.g., button padding).
vw and vh — Viewport Units
1vw is 1% of the viewport width; 1vh is 1% of the viewport height. These are ideal for full-screen layouts, hero sections, and fluid typography.
.hero { height: 100vh; }
.headline { font-size: 5vw; }Watch out for: iOS Safari’s dynamic toolbar changes 100vh behavior. Use dvh (dynamic viewport height) for modern mobile-safe full-screen layouts.
% — Percentage
Percentages are relative to the parent element’s corresponding dimension. width: 50% means half the parent’s width.
How to Convert Between Units
The formulas are straightforward once you know the base values.
px → rem
rem = px / root-font-sizeWith the default 16px root:
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 16 | 1 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
rem → px
px = rem × root-font-sizepx → vw
vw = (px / viewport-width) × 100For a 1440px design viewport, a 240px element is 240/1440 × 100 = 16.67vw.
em → rem
If you know the parent font size in px:
rem = (em × parent-px) / root-font-sizeOnline CSS Unit Converter
Instead of doing this arithmetic by hand, use the browser-based tool:
Try the ZeroTool CSS Unit Converter →
Enter a value in any unit (px, rem, em, vw, vh, pt, cm, mm, in) and get the equivalents in all others instantly. You can set your root font size and viewport dimensions to match your project.
Everything runs in-browser — no data leaves your machine.
Practical Workflows
Design Handoff
Your designer delivers specs in px (Figma’s default). Your style tokens use rem. The converter lets you batch-convert the entire spacing scale in seconds.
Accessibility Audit
Switch your browser font size to 20px and check which elements break. Elements sized in px will not reflow — that is your fix list. Rewriting those values to rem is exactly where the converter saves time.
Responsive Typography with clamp()
clamp() takes three values: minimum, preferred, maximum. Mixing units is common:
font-size: clamp(1rem, 2.5vw, 2rem);To pick the 2.5vw preferred value: if you want the font to be 20px at a 800px viewport, calculate 20/800 × 100 = 2.5vw. The converter handles this math instantly.
rem vs em: When to Use Which
| Scenario | Unit |
|---|---|
| Body text | rem |
| Headings | rem |
| Button padding (scales with button font) | em |
| Card padding (scales with card font) | em |
| Global spacing scale | rem |
| Media query breakpoints | em (for browser zoom compatibility) |
Note: media queries use em for a subtle reason — they respond to the browser’s base font size, not the root <html> font size. This matters when users zoom at the browser level.
CSS Custom Properties for a Scalable System
The best approach is defining a spacing scale with CSS variables derived from a base unit:
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
}With this system, changing html { font-size } scales the entire layout. And the CSS unit converter helps you build the scale from your design’s pixel values.
Summary
- Use rem for font sizes and global spacing — it respects user accessibility preferences.
- Use em for component-internal spacing that should scale with local font size.
- Use vw/vh for viewport-relative layouts and fluid typography.
- Reserve px for borders, shadows, and elements that should never scale.