Convert CSS units: px to rem, em to px, vh to px, % to vw. Responsive design units (rem, vw, vh), absolute units (px, pt, cm). Font size calculator.
Use this free online CSS Unit Converter directly in your browser. No signup required, no data leaves your device. Part of Utilier — a collection of 133+ developer utilities.
What is CSS Unit Converter (px, em, rem, %, vw, vh, pt, cm)?
CSS unit converter translates between CSS length units (px, em, rem, %, vw, vh, pt, cm, in, mm) for responsive web design. Converts: px to rem (16px = 1rem with 16px root font), em to px (2em = 32px with 16px parent), vw/vh to px (100vw = 1920px on 1920px screen), % to px (50% = 960px of 1920px container). Supports: absolute units (px, pt, cm, mm, in), relative units (em, rem, %, vw, vh, vmin, vmax), font units (ch, ex). Tool calculates conversions based on: root font size (default 16px), parent font size (for em), viewport dimensions (1920×1080 default). Useful for: responsive typography (rem for scalable fonts), fluid layouts (vw/vh for viewport-relative sizing), print stylesheets (pt, cm for physical dimensions), accessibility (rem scales with user font preferences).
Relative units (em, rem): em = relative to parent font size (2em = 2× parent). rem = relative to root font size (2rem = 32px if root = 16px). rem preferred (predictable, doesn't compound like em).
Viewport units (vw, vh, vmin, vmax): vw = viewport width % (100vw = full width, 50vw = half width). vh = viewport height % (100vh = full height). vmin = smaller of vw/vh, vmax = larger. Responsive sizing (scales with screen).
Percentage (%): Relative to parent element size. Width: 50% = half of parent width. Font-size: 150% = 1.5× parent font. Padding/margin: % of parent width (even for top/bottom).
Absolute units (px, pt, cm): px = pixels (96px = 1 inch on 96 DPI screen). pt = points (72pt = 1 inch, print typography). cm/mm/in = physical units (cm for print). px for web, pt for print.
Font-relative units (ch, ex): ch = width of '0' character (monospace sizing). ex = x-height of font (lowercase letter height). Use ch for input widths (input[type=tel] { width: 15ch; }).
Why use css units?
Hard-coding px everywhere = not responsive (doesn't scale with font size, viewport). Using relative units (rem, vw, vh) = fluid, accessible design.
Responsive typography: rem scales with user font size preferences (accessibility). User sets font to 20px → 1rem = 20px (all text scales). px doesn't scale (16px stays 16px, hard to read).
Fluid layouts: vw/vh scale with viewport (mobile 375px, desktop 1920px). 50vw = 187.5px on mobile, 960px on desktop. No media queries needed for basic scaling.
Avoid em compounding: em compounds in nested elements (2em inside 2em = 4× root). rem doesn't compound (2rem always = 32px if root = 16px). rem = predictable, em = confusing.
Accessibility compliance: WCAG 2.1 AA: text must scale 200% (zoom). rem respects user font preferences (meets WCAG). px doesn't scale (fails WCAG if text too small).
Print stylesheets: pt/cm for print media (@media print). 12pt font = professional (Word default). px in print = unpredictable (depends on DPI). Use pt for PDFs, cm for layouts.
Learn units: Understand when to use rem (typography), vw/vh (layout), px (borders, shadows), % (widths). Tool shows conversions (1rem = ? px, 50vw = ? px on 1920px screen).
When to use css units
Use whenever you need to convert CSS units or design responsive layouts.
Responsive typography (convert px to rem for scalable fonts).
Fluid layouts (convert px to vw/vh for viewport-relative sizing).
Print stylesheets (convert px to pt, cm for physical dimensions).
Accessibility (ensure text scales with user preferences using rem).
Media queries (calculate breakpoints in em: 768px = 48em if root = 16px).
Design system (define spacing scale in rem: 0.5rem, 1rem, 2rem, 4rem).
Learning CSS units (understand differences between px, em, rem, vw, vh).
Legacy code migration (convert px to rem for accessibility).
How to use css units
Enter value + unit, select target unit, see conversion.
Enter value and source unit: Input: 16px, 2rem, 50vw, 75%, 12pt. Or use sliders for common values (8px-64px for fonts, 0-100vw for widths).
Configure context (if needed): Root font size (default 16px, affects rem/em). Parent font size (for em conversion). Viewport size (1920×1080 default, affects vw/vh). Adjustable in settings.
Select target unit: Convert to: px (pixels), rem (root em), em (parent em), vw/vh (viewport %), % (percentage), pt (points), cm (centimeters). Multiple conversions shown simultaneously.
Copy CSS: Click to copy converted value: font-size: 1rem; or width: 50vw;. Paste into CSS file, styled-components, Tailwind config.
Use conversion table: View common conversions: 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem (root = 16px). Or 100vw = ? px on different screen sizes (375px, 768px, 1920px).
Test responsiveness: Change viewport width (375px mobile, 768px tablet, 1920px desktop). See how vw/vh values change. Test fluid layouts before coding.
Key features
Bidirectional conversion: px ↔ rem, em ↔ px, vw ↔ px, % ↔ px, pt ↔ px, cm ↔ px. Convert in both directions. All units shown simultaneously (16px = 1rem = 12pt = 0.42cm).
Context-aware: Configurable root font size (default 16px, affects rem). Parent font size (affects em). Viewport dimensions (affects vw/vh). Accurate conversions based on context.
Viewport simulator: Test vw/vh on different screen sizes: iPhone (375px), iPad (768px), laptop (1366px), desktop (1920px). See how fluid layouts scale.
Print units: pt (points: 72pt = 1 inch), cm/mm (physical dimensions), in (inches). Use for print stylesheets (@media print).
Offline calculator: Client-side math (no API). Fast, private, works offline. Instant conversions.
Common use cases
Responsive typography (px to rem): 16px font → 1rem (scales with user preferences). 24px heading → 1.5rem. 32px title → 2rem. CSS: font-size: 1rem; (not font-size: 16px;). Accessible, scalable.
Fluid layout (px to vw): 960px container on 1920px screen → 50vw (fluid width). CSS: width: 50vw; (scales from mobile 375px to desktop 1920px). No media queries needed.
Full viewport height (100vh): Hero section full screen height: 100vh (mobile 667px, desktop 1080px). CSS: height: 100vh;. Adapts to screen size automatically.
Print stylesheet (px to pt): Web: 16px font. Print: 12pt font (professional, matches Word). @media print { body { font-size: 12pt; } }. Convert px → pt for print.
Media query breakpoints (px to em): 768px breakpoint → 48em (768 ÷ 16). CSS: @media (min-width: 48em) {...}. em for media queries (respects user font size).
12pt = professional print font (Word default). 96 DPI screen: 12pt × 1.333 = 16px. Use pt for print, px for web.
Technical reference
CSS unit types and conversion formulas:
px (pixels)
Absolute unit. 1px = 1 device pixel (on standard DPI). 96px = 1 inch (on 96 DPI screen). Conversion: px to rem = px ÷ root font size (16px ÷ 16 = 1rem).
rem (root em)
Relative to root (<html>) font size. Default: 16px. 1rem = 16px, 2rem = 32px. Formula: rem to px = rem × root font size (2rem × 16 = 32px). Preferred for typography (scalable, doesn't compound).
em
Relative to parent element font size. 2em = 2× parent font. Compounds in nested elements (2em inside 2em = 4× root). Formula: em to px = em × parent font size (2em × 16 = 32px). Use for component-scoped scaling.
vw (viewport width)
1vw = 1% of viewport width. 100vw = full width (1920px on 1920px screen). Formula: vw to px = (vw ÷ 100) × viewport width (50vw = 50% × 1920 = 960px). Fluid width (scales with screen).
vh (viewport height)
1vh = 1% of viewport height. 100vh = full height (1080px on 1080px screen). Formula: vh to px = (vh ÷ 100) × viewport height (50vh = 50% × 1080 = 540px). Full-screen sections (hero, modals).
% (percentage)
Relative to parent element. Width/height: % of parent width/height. Font-size: % of parent font (150% = 1.5× parent). Padding/margin: % of parent width (even top/bottom). Formula: % to px = (% ÷ 100) × parent size.
pt (points)
Absolute unit (print typography). 1pt = 1/72 inch. 72pt = 1 inch. Formula: pt to px = pt × (96 ÷ 72) (12pt × 1.333 = 16px). Use for print stylesheets (@media print).
cm/mm/in
Physical units. 1in = 2.54cm = 25.4mm = 96px (on 96 DPI). Formula: cm to px = cm × 37.8 (1cm = 37.8px). Use for print layouts (brochures, invoices).
vmin/vmax
vmin = min(vw, vh). vmax = max(vw, vh). Example: 1920×1080 screen → 1vmin = 1% of 1080px (smaller), 1vmax = 1% of 1920px (larger). Use for square elements (aspect ratio).
ch/ex
ch = width of '0' character (monospace fonts). ex = x-height (lowercase letter height). Formula: context-dependent (font-specific). Use ch for input widths (input { width: 15ch; } for phone numbers).
Common mistakes to avoid
Using px for all font sizes (doesn't scale with user preferences)
Why it happens: font-size: 16px doesn't scale when user increases browser font (accessibility). User sets 20px → text stays 16px (hard to read). WCAG 2.1 AA requires scalable text (rem, not px).
How to avoid it: Use rem for font sizes: font-size: 1rem (scales with user preferences). Or em for component-scoped scaling. px only for borders, shadows (non-text).
Using em for everything (compounding in nested elements)
How to avoid it: Use rem for typography (no compounding). em only for component-scoped scaling (padding, margin relative to component font size). Example: button { font-size: 1rem; padding: 0.5em 1em; } (padding scales with button font).
Using 100vh for mobile (doesn't account for browser UI)
Why it happens: Mobile browsers: address bar, bottom nav = not part of 100vh (content hidden behind UI). height: 100vh = taller than visible area (scrolling required). iOS Safari notorious for this.
How to avoid it: Use 100dvh (dynamic viewport height, includes browser UI) or calc(100vh - 60px) (subtract UI height). Or JavaScript: window.innerHeight. Test on real mobile devices.
Using vw for text (horizontal scroll on mobile)
Why it happens: font-size: 5vw causes horizontal scroll on mobile (if text > viewport width). vw doesn't account for text wrapping. Text overflows container.
How to avoid it: Use rem for font sizes (not vw). Or clamp() for fluid typography: font-size: clamp(1rem, 2vw, 2rem); (min 1rem, ideal 2vw, max 2rem). Prevents overflow.
Forgetting root font size in rem calculations (assumes 16px always)
Why it happens: User changes default font to 18px or 20px → 1rem ≠ 16px. Calculations wrong if hardcoded (16px → 1rem breaks if root = 20px). Layout shift.
How to avoid it: Don't assume root = 16px. Use tool to convert (specify actual root font size). Or use browser DevTools to check computed root font (inspect <html> element).
Frequently asked questions
What is the difference between em and rem?
em = relative to parent font size (compounds in nested elements). rem = relative to root (<html>) font size (doesn't compound, predictable). Use rem for typography (scalable, simple). em for component-scoped scaling (padding, margin).
When should I use vw/vh instead of %?
vw/vh = relative to viewport (always). % = relative to parent element (depends on parent size). Use vw/vh for full-screen sections (hero: 100vh), fluid typography. Use % for widths within containers (sidebar: 25%).
What is the default root font size in browsers?
16px (most browsers). Users can change in browser settings (accessibility). 1rem = 16px by default. Never hardcode 16px (assume root = 16px). Use rem for scalability.
Should I use px or pt for print stylesheets?
pt (points) for print. 12pt = professional font size (Word default). px for web (screen). @media print { font-size: 12pt; }. pt = consistent across printers, px = DPI-dependent.
Why does 100vh cause scrolling on mobile?
Mobile browser UI (address bar, bottom nav) not included in 100vh. Content = 100vh + UI = taller than screen (scroll). Use 100dvh (dynamic viewport height, CSS 2023+) or calc(100vh - UI height).
What is vmin and vmax?
vmin = min(vw, vh) (smaller of width/height). vmax = max(vw, vh) (larger). Example: 1920×1080 → 1vmin = 1% of 1080px, 1vmax = 1% of 1920px. Use for square elements (maintain aspect ratio).
How do I convert px to rem if root font is not 16px?
Formula: rem = px ÷ root font size. If root = 20px: 40px ÷ 20 = 2rem. Use browser DevTools to check root font (inspect <html>, check computed font-size).