A Complete Guide to CSS Units: When to Use px, em, rem, vw, and vh

When you're starting out with CSS, it's tempting to use pixels (px) for everything. They're simple and predictable. However, relying solely on pixels can lead to designs that are rigid and don't scale well. To build truly modern, responsive, and accessible websites, you need to understand and use relative units. This guide will break down the most common CSS units and when to use them.

The Two Families: Absolute vs. Relative

Absolute Units: These units are fixed and do not change based on any other element or setting. The most common absolute unit is the pixel (px).
Relative Units: These units are defined in relation to another length. Their actual size can change depending on the context. The main relative units are em, rem, vw, and vh.

The Units Explained

px (Pixels)

What it is: An absolute unit representing one "dot" on the screen.
When to use it: For things you want to be exactly the same size, no matter what. Good for fine-line details like border-width: 1px or box-shadow offsets.
The Danger: Using pixels for font sizes can cause major accessibility problems. If a user has set a larger default font size in their browser for readability, pixel-based fonts will override that setting, making the text difficult to read.

em

What it is: A relative unit. 1em is equal to the font size of the **parent element**.
How it works: If a <div> has a font-size: 20px;, then for any child element inside that div, 1em will equal 20px, and 0.5em will equal 10px.
The Compounding Problem: The effect of `em` units compounds. If you nest elements and set font sizes with `em` on each, it can become very difficult to predict the final font size. This is often called the "cascade" problem.
When to use it: It's excellent for creating scalable components where you want padding, margins, and other properties to scale proportionally with the font size of that specific component.

rem (Root Em)

What it is: A relative unit. 1rem is equal to the font size of the **root element** (the <html> tag).
Why it's better than `em` for general layout: Because `rem` always refers to the same base value, it doesn't compound. This makes it predictable and easy to manage. You can be sure that padding: 2rem will be the same size everywhere on your page.
The Accessibility Win: This is the best unit for font sizes. By default, the root font size is 16px. If a user changes their browser's default font size to be larger for better readability, 1rem now becomes 24px, and your entire interface scales up beautifully and accessibly.
When to use it: For almost everything! Use `rem` for font sizes, padding, margins, and component widths. It creates consistent, scalable, and accessible designs.

vw (Viewport Width) & vh (Viewport Height)

What they are: Units relative to the size of the viewport (the visible area of the browser window). 1vw is 1% of the viewport's width. 1vh is 1% of the viewport's height.
When to use them:
- Creating a full-height hero section: height: 100vh;
- Creating typography that scales fluidly with the browser window (often used inside a clamp() function).
The Danger: Be careful with font sizes. A font size of 5vw might look great on a phone, but it will be enormous on a large desktop monitor. This is why these units are best paired with clamp() to set minimum and maximum size limits, a technique you can master with our Responsive Typography Calculator.

A Practical Rule of Thumb

`rem` for almost everything: Use `rem` for font sizes, margins, padding, and layout widths. It's your default choice for building scalable and accessible interfaces.
`px` for tiny, fine details: Use `px` for things like borders (border: 1px solid black;) or box shadows where you need a crisp, non-scaling line.
`em` for component-specific scaling: Use `em` when you want a property (like padding on a button) to scale relative to the font size of that specific element, not the root.
`vw`/`vh` for viewport-sized elements: Use viewport units for full-screen layouts or for creating fluidly scaling elements within a controlled clamp() function.

By moving beyond pixels and embracing relative units, you can create designs that are more flexible, maintainable, and welcoming to all users, regardless of their device or personal browser settings.