CSS Units Explained: px, em, rem, vh, vw, and More
A comprehensive guide to CSS units — absolute, relative, and viewport-based — with practical advice for responsive web design.
Why CSS Units Matter
Choosing the right CSS unit is one of the most impactful decisions in front-end development. The wrong unit can break layouts on different screen sizes, make text inaccessible, or create maintenance headaches. This guide covers every major CSS unit, when to use it, and when to avoid it.
Absolute Units
Absolute units map to fixed physical or standardized measurements. The most common one by far is the pixel.
px (Pixels)
The pixel is the most familiar CSS unit. In CSS, 1px does not necessarily equal one physical device pixel — it equals one "CSS pixel," which is a reference unit. On a 2x Retina display, one CSS pixel covers four physical pixels.
Pixels are great for borders, shadows, and any element where you want a precise, fixed size regardless of context. They are less ideal for font sizes and layout widths because they do not adapt to user preferences or screen sizes.
Other Absolute Units
CSS also supports cm, mm, in, pt, and pc. These are rarely used in screen design but can be useful for print stylesheets. For example, 1in equals 96px by definition in CSS.
Relative Units
Relative units derive their value from another measurement — typically the font size of a parent element or the root element.
em
1em equals the computed font size of the element's parent. If the parent's font size is 16px, then 1em is 16px and 1.5em is 24px.
The em unit is powerful for creating components that scale proportionally. If you define padding, margins, and font sizes in em, increasing the parent font size scales everything together.
The downside is compounding. If nested elements each set their font size in em, the values multiply. A 1.2em font inside a 1.2em container inside another 1.2em container results in a font size that is 1.2 1.2 1.2 = 1.728 times the root size.
rem (Root em)
1rem equals the font size of the root <html> element, which is 16px by default in most browsers. Unlike em, rem does not compound — it always refers back to the same root value.
rem is the recommended unit for most font sizes, spacing, and component dimensions in modern CSS. It respects user browser settings (users who set a larger default font size get proportionally larger text) while avoiding the compounding problem of em.
Practical Conversion
If the root font size is 16px, then 1rem = 16px, 0.5rem = 8px, and 2rem = 32px. Our PX to REM Converter makes these conversions instant.
Viewport Units
Viewport units are relative to the browser window (viewport) dimensions.
vw (Viewport Width)
1vw equals 1% of the viewport width. A 50vw element takes up half the screen width. This is useful for full-bleed layouts and responsive typography.
vh (Viewport Height)
1vh equals 1% of the viewport height. The classic height: 100vh creates a full-screen section. Be cautious on mobile browsers where the viewport height changes as the address bar shows and hides — the newer dvh (dynamic viewport height) unit addresses this.
vmin and vmax
1vmin is 1% of whichever viewport dimension is smaller. 1vmax is 1% of the larger. These are useful for elements that should scale with the viewport without becoming too large or too small in one direction.
The New Viewport Units: svh, lvh, dvh
CSS introduced small (svh), large (lvh), and dynamic (dvh) viewport height units to handle mobile browser chrome. svh uses the smallest possible viewport (with all browser UI visible), lvh uses the largest (all UI hidden), and dvh updates dynamically. Use dvh for most mobile full-screen layouts.
Percentage
The % unit is relative to the parent element's corresponding property. width: 50% means half the parent's width. font-size: 120% means 1.2 times the parent's font size. Percentages are fundamental to fluid layouts.
When to Use Each Unit
| Use Case | Recommended Unit | Why |
|---|---|---|
| Font sizes | rem | Respects user settings, no compounding |
| Spacing and padding | rem | Consistent with font scaling |
| Borders and outlines | px | Precise, thin lines |
| Component-internal spacing | em | Scales with the component's font size |
| Full-width sections | vw or % | Viewport-relative |
| Full-height sections | dvh | Handles mobile browser chrome |
| Media query breakpoints | em | Consistent across zoom levels |
Converting Between Units
When working with designs specified in pixels, you often need to convert to rem or em for production CSS. Our PX to REM Converter and EM to PX Converter handle the math instantly. For viewport-based calculations, the VW to PX Converter is helpful for understanding how viewport units translate to pixel values at specific screen widths.
Summary
Use rem for most things. Use px for borders and precise decorative elements. Use viewport units for full-screen layouts. Use em when you need a component to scale as a unit. By choosing units deliberately, you create layouts that are responsive, accessible, and maintainable.