CSS Units of Measurement: When Do You Use Rem vs. Em vs. Px?

Here’s a CSS-focused question for the DEV Community that encourages discussion and sharing of best practices around units of measurement:

CSS Units of Measurement: When Do You Use Rem vs. Em vs. Px?

Hey DEV Community!

I’m trying to improve the consistency and responsiveness of my CSS layouts and I keep running into questions about which units of measurement to use. I usually rely on pixels (px) because it feels straightforward, but I know that units like rem, em, and viewport units (vw, vh) can make designs more flexible and accessible.

Here’s what I’m wondering:

1. When do you use rem vs. em for font sizes, padding, or margins? I’ve heard rem is better for consistency, but some people seem to prefer em in certain cases.
2. Are there times when you’d still choose px over rem or em? For things like icons, borders, or other specific elements?
3. Do you use vw and vh for font sizes or layout elements? I’ve seen some designers use viewport units for large headers or full-page sections, but I’m curious if there are downsides.

Here’s an example of a layout I’m working on:

html {
  font-size: 16px; /* Sets the base font size for rem units */
}

h1 {
  font-size: 2rem; /* I want this to scale, but should I use em? */
}

.container {
  width: 80vw; /* Full width on smaller screens, but flexible */
  padding: 1em; /* Consistent padding, but I’m open to using rem */
}

.icon {
  width: 24px; /* Should this be in px for precision? */
}

What’s your go-to approach with CSS units? Do you have any rules of thumb, or does it depend on the project? I’d love to hear your strategies for keeping CSS clean, scalable, and easy to maintain!

This question opens up discussion on best practices, encourages developers to share their experiences with different CSS units, and provides a code snippet to ground the conversation in a practical example.

Measurement Stuff