Understanding CSS Units: px, em, rem, %, vw, and vh

CSS units are the building blocks of web design, determining the sizing and spacing of elements. These units can be broadly categorized into two types: Absolute Units and Relative Units.

Absolute Units

Absolute units have fixed values and are not affected by other elements. They include:

• Pixels (px): The most commonly used absolute unit, representing one dot on the screen.
• Inches (in), Centimeters (cm), Millimeters (mm): Physical units rarely used in web design.
• Points (pt) and Picas (pc): Units used primarily in print.

Relative Units

Relative units are flexible and scale according to other factors such as the font size of a parent element or the size of the viewport. They include:

• Ems (em) and Rems (rem): Relative to the font size of the parent and root elements, respectively.
• Percentages (%): Relative to the size of the parent element.
• Viewport Units (vw and vh): Relative to the size of the viewport.

Now, let’s dive deeper into the most commonly used CSS units: pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw and vh).

Pixels (px)

Pixels are the most straightforward unit. One pixel (px) represents one dot on the screen. It’s an absolute unit, meaning it doesn’t change in size based on any other settings. For example:

.element {
  font-size: 16px;
  margin: 20px;
}

Using pixels ensures that elements remain the same size regardless of the user’s settings. However, this lack of flexibility can be a drawback.

Ems (em)

Ems are relative units that scale based on the font size of their parent element. One em is equal to the current font size. If the parent element has a font size of 16px, 1em equals 16px. For example:

.parent {
  font-size: 16px;
}
.child {
  font-size: 2em; /* 32px */
  margin: 1em; /* 16px */
}

Using ems allows for scalable and adaptive designs, making it easier to maintain consistent proportions.

Rems (rem)

Rems (root ems) are similar to ems but are always relative to the root (html) element’s font size. This makes rems more predictable and easier to use for maintaining consistent spacing and sizing across your website. For example:

html {
  font-size: 16px;
}

.element {
  font-size: 1.5rem; /* 24px */
  padding: 1rem; /* 16px */
}

Using rems ensures that all sizes scale consistently based on the root font size, regardless of their nesting in the DOM.

Percentages (%)

Percentages are relative to the size of the parent element. They are often used for setting widths and heights:

.container {
  width: 50%; /* 50% of the parent element's width */
}
.image {
  height: 80%; /* 80% of the parent element's height */
}

Percentages are useful for creating responsive designs that adapt to various screen sizes.

Viewport Units (vw and vh)

Viewport units are relative to the size of the browser’s viewport. 1vw is 1% of the viewport’s width, and 1vh is 1% of the viewport’s height. For example:

.hero {
  width: 100vw; /* 100% of the viewport width */
  height: 50vh; /* 50% of the viewport height */
}

Viewport units are particularly useful for full-screen elements and responsive designs that need to adapt to the user’s device.

Why Use rem and em Instead of px?

Using rem and em units over pixels has significant advantages, especially regarding accessibility and responsiveness:

1. Scalability: Rem and em units scale based on the user’s settings. If a user increases the default font size in their browser for better readability, elements using rem and em units will scale accordingly, ensuring a consistent and accessible experience.
2. Maintainability: Using relative units like rems and ems makes it easier to maintain and adjust your design. You can change the base font size, and all related sizes will adjust automatically.

Example of Adjusting Font Size in Chrome

In Chrome, users can adjust the default font size in settings. If a website uses rem or em units, increasing the default font size will scale up the entire website, making it more accessible for users with visual impairments. Websites using pixels, however, will remain the same size, potentially causing readability issues.

Above is an example of how changing the font size in browser settings impacts websites using rem and em units versus pixels. Notice how the site with rem/em units adapts to the larger font size, while the one using pixels does not.

Conclusion

Understanding and effectively using CSS units is crucial for creating responsive and accessible web designs. While pixels offer precision, rems, and ems provide flexibility and scalability, ensuring your website adapts to various user settings and devices. By using relative units, you create a more user-friendly and maintainable design, enhancing the overall user experience.

Thanks for reading : ) Happy coding!