From

Value

Unit

Base Font Size (for em/rem)

Viewport Width (for vw)

Viewport Height (for vh)

↔

Converted To

px 16px

rem 1rem

em 1em

vw 0.833vw

pt 12pt

cm 0.423cm

Real-time CSS unit converter • Supports px, rem, em, vw, pt, cm, in, mm • Auto-updates on input

CSS Unit Converter

CSS Units: The Complete Guide

CSS units define how big or small something is - from font sizes to margins, widths, and animations. Choosing the right unit is crucial for responsive, accessible, and maintainable designs.

Two Main Categories of CSS Units

Category	Description	Scalable?
Absolute (Fixed)	Fixed physical size — doesn’t change with screen or settings.	No
Relative	Relative to something else (parent, viewport, font, etc.).	Yes

1. Absolute Units

Best for print or when you need exact physical sizes.

Unit	Name	Size	Use Case
`cm`	Centimeters	1 cm = 37.8px (96 DPI)	Print layouts
`mm`	Millimeters	1 mm = 0.1 cm	Print
`Q`	Quarter-millimeters	1 Q = 0.25 mm	High-precision print
`in`	Inches	1 in = 2.54 cm	Print (US)
`pc`	Picas	1 pc = 12 pt	Typography (print)
`pt`	Points	1 pt = 1/72 in	Print fonts
`px`	Pixels	1 px = 1/96th of 1 in (CSS spec)	Screens (most common)

.print-label {
  font-size: 12pt;     /* Print */
  margin: 1cm;         /* Print */
}
.screen-icon {
  width: 32px;         /* Screen */
}

px is not truly "absolute" on screens - it’s reference pixel, scaled by device DPI.

2. Relative Units

Scale with context - perfect for responsive design and accessibility.

Font-Relative Units

Unit	Relative To	Example
`em`	Font size of the element (for itself) or parent (for children)	`font-size: 1.5em;` → 1.5 × parent font
`rem`	Font size of the root element (`<html>`)	`font-size: 1.2rem;` → 1.2 × root font (usually 16px)
`lh`	Line height of the element	`margin-top: 2lh;` → 2 × line height
`rlh`	Line height of the root	`padding: 1rlh;`
`cap`	Cap height of the font	`font-size: 3cap;`
`ch`	Width of the "0" character	`width: 40ch;` → ~40 characters wide
`ex`	Height of the lowercase "x"	`line-height: 3ex;`
`ic`	Width of the CJK water ideograph (东)	`width: 10ic;`

html { font-size: 16px; } /* Root */
.title { font-size: 2rem; }   /* 32px */
.card { padding: 1.5em; }     /* 1.5 × card's font-size */
p { margin-bottom: 1.2em; }

Viewport-Relative Units

Relative to the viewport (browser window).

Unit	Relative To	Example
`vw`	1% of viewport width	`font-size: 5vw;` → 5% of screen width
`vh`	1% of viewport height	`height: 100vh;` → full screen height
`vmin`	1% of smaller dimension (width or height)	Square on any screen
`vmax`	1% of larger dimension	Fill largest side
`svw/svh`	Small viewport (excludes UI bars)	Mobile safe areas
`lvw/lvh`	Large viewport (includes scrollbars)	Desktop
`dvw/dvh`	Dynamic — updates on resize/zoom	Modern layouts

.hero {
  height: 100vh;           /* Full height */
  font-size: clamp(1rem, 5vw, 3rem);
}
.square {
  width: 50vmin;
  height: 50vmin;          /* Always square */
}

Container-Relative Units (New!)

Introduced in CSS Containment Module - relative to parent container size.

Unit	Relative To	Requires
`cqw`	1% of container width	`container-type: inline-size;`
`cqh`	1% of container height	`container-type: size;`
`cqi`	1% of container inline size (width in LTR)	Modern responsive components
`cqb`	1% of container block size (height in LTR)	Grid/flex children
`cqmin`, `cqmax`	Smaller/larger of cqi/cqb	Advanced

.card {
  container-type: inline-size;
}
.card-title {
  font-size: 5cqw;   /* Scales with card width */
}

Percentage (%)

Relative to parent element’s corresponding dimension.

.box {
  width: 50%;      /* 50% of parent width */
  padding-top: 75%; /* Square using padding trick */
}

Special Units

Unit	Purpose
`fr`	CSS Grid — fractional unit for remaining space
`0`	Zero — no unit needed: `margin: 0;`
`auto`	Let browser decide (not a unit, but keyword)
`calc()`	Mix units: `width: calc(100% - 2rem);`
`clamp()`	Responsive: `font-size: clamp(1rem, 4vw, 2rem);`
`min()`, `max()`	Choose smallest/largest value

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.responsive {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 3rem);
}

Best Practices

Use rem for font sizes → accessible & consistent
Use em for component spacing → scales with font
Use vw/vh or clamp() for hero sections
Avoid px for text → users can't zoom properly
Use container queries (cqw) for true component responsiveness

Quick Reference Table

Unit	Type	Scales With	Best For
`px`	Absolute	—	Icons, borders
`rem`	Relative	Root font	Typography, spacing
`em`	Relative	Parent font	Component padding
`%`	Relative	Parent size	Widths, layouts
`vw`	Viewport	Screen width	Large text, heroes
`ch`	Font	Character width	Line length (50–75ch)
`fr`	Grid	Available space	Grid columns
`cqw`	Container	Parent container	Modern components

Master CSS units → build layouts that work everywhere.

Last update: 02. 11. 2025.