CSS Units — px, em, rem, vw, vh Explained

Absolute Units

Absolute units represent a fixed measurement. They do not scale naturally based on the screen or parent element, so they are best used when exact sizing is truly needed.

px - pixels, the most common absolute-like unit in screen design
pt - points, often used in print contexts
cm, mm, in - physical units, rarely useful for screen layouts

Relative Units

Relative units scale in relation to another value, such as the root font size, parent font size, viewport size, or container size. These units are much more useful for responsive design.

Unit	Relative To	Common Use
`em`	Current element font size	Component spacing tied to local text
`rem`	Root font size	Consistent spacing and typography
`%`	Parent size	Fluid widths and layout sizing
`vw`	Viewport width	Full-width sections, fluid typography
`vh`	Viewport height	Hero sections, full-screen panels
`ch`	Width of the "0" character	Readable text line lengths

Common Unit Patterns

Practical unit choices

html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
}

.container {
    width: 90%;
    max-width: 72rem;
}

.hero {
    min-height: 100vh;
}

.article {
    max-width: 65ch;
}

Choosing the Right Unit

Use rem for fonts and spacing that should stay consistent across the page.
Use em when a component should scale based on its own text size.
Use percentages for flexible widths inside a parent container.
Use viewport units carefully for full-screen sections and fluid layouts.
Use px when a precise fixed size is genuinely needed.

FAQ

Frequently Asked Questions

rem is usually better for accessibility and consistency because it respects the root font size more naturally.

They are useful, but mobile browser UI can affect viewport height, so test vh-based layouts on real devices.

Key Takeaways

CSS units can be absolute or relative depending on whether they scale with context.
rem, %, vw, vh, and ch are especially useful for responsive design.
rem is a strong default for typography and spacing in many projects.
Use px when precision matters, but avoid forcing fixed sizes everywhere.
Choosing the right unit makes layouts easier to maintain and more adaptive.