CSS Units Explained: When to Use px, %, em, rem, vw & More

In CSS you have multiple unit types you can use for your projects. In this guide lets cover the different types and know when to use them.

When to use pixels in CSS

Pixels (px) is a unit of measurement great for being precise and wish to use a fixed size. Consequently aren't the best for responsive design so be sure to use sparingly. Pixels can be useful when you want to set the border width for a container.

div {
   border: 2px solid black;
}

When to use percents in CSS

The percent (%) unit is based on the parent containers size. This is a relative unit. Imagine you live in a shared apartment and your room take up 20% of the livable space and your roommates room takes up 30% because they pay more per month. Your rooms are based on the relative amount of space available in the apartment (container). And if overnight the apartment shrunk in half (like moving to New York), well your apartment would have shrunk by half as well but still 20% of the available space. Think apartment shrinking as screen-size dimensions for your website (mobile, tablet, desktop).

Using the percent unit of measurement can be useful when sizing containers on a page and are looking for a responsive layout. I generally use percent with the width selector in CSS. You could also use it for margin and padding as well.

    div {
        width: 100%;
    }

When to use em in CSS

This one can be trickier to understand but lets make it super easier. In design remember that typography often directly impacts the rest of the design and that includes sizing. Back in the day during print typography "em" was relatively the same width as the uppercase M. Now em is used as a unit relative to the font size in a digital design.

/* Parent element with 16px font size (default) */
.parent {
  font-size: 16px;
  padding: 1em; /* equals 16px padding */
}

/* Child element increases font size to 20px */
.child {
  font-size: 20px;
  padding: 1em; /* now equals 20px padding */
}

This is useful in responsive design because when the screen-size shrinks more than likely you want the font size to scale down proportionally as well and if you are using em then the spacing (margin and padding, etc.) will also scale down relatively.

Using em can be useful for smaller elements like buttons when you are applying minute adjustments based on screen-size.

When to use rem in CSS

Root em or "rem" you can argue is an expansion of em and essentially allows you to scale proportionally based on the root (html) element's font sizing. If you don't specify sizing for the root element then it will be based off the browser default sizing for the root element.

html {
    font-size: 16px; /* The root font size */
}

.parent {
  font-size: 16px;
  padding: 1rem; /* equals root font size (16px) */
}

.child {
  font-size: 20px;
  padding: 1rem; /* still equals root font size (16px) */
}

Using the rem unit is more predictable then em and great for global scaling. It also helps when you are dealing with a lot of nested elements and just want the same size.

When to use vw/vh in CSS

When to use vmin/vmax in CSS

When to use ch in CSS

When to us ex in CSS

When to us fr in CSS

Notes: 5. vw / vh (Viewport Width/Height) Relative to 1% of the viewport’s width (vw) or height (vh). Useful for full-screen sections or responsive text/images that adapt to screen size.

6. vmin / vmax vmin is 1% of the smaller viewport dimension; vmax is 1% of the larger. Use when you want elements to scale based on the more constrained or more expansive side of the screen.

7. ch Represents the width of the "0" character in the current font. Ideal for sizing input fields or aligning content based on character width.

8. ex Roughly the height of the lowercase "x" in the current font. Rarely used; can help with fine-tuned vertical spacing in typographic layouts.

9. fr (Fractional Unit – CSS Grid) Used in Grid layout to divide available space into fractions. Use when distributing space dynamically between grid columns or rows.