5 CSS units and their recommended use-case
Tags: css, html, webdev
Published: 2020-07-02 15:08:50

---
title: 5 CSS units and their recommended use-case
published: true
description: A brief guide on commonly used CSS units and their recommended use-case 
tags: css, html, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/11ttgv22pleg1qb0na9h.jpg
series: List5
---

> Cover photo by [Zan](https://unsplash.com/@zanilic) on [Unsplash](https://unsplash.com/).

##__Introduction__

CSS has units that surely cannot be covered in one article, [a documentation or some sort](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) will be befitting for that.

In this article we'll cover the CSS units that you'll regularly come across and recommendation on when it's best to use them.

The units we'll talk about are:

* The `em` unit
* Root _em_ written as `rem`.
* Pixels written as `px`.
* Percentage written as `%`.
* Viewport width written as `vw`.

Let's begin.

<hr>

##__The `em` unit__

The `em` unit is a _relative_ unit meaning it describes a length relative to another length property.

In typography, one `em` is equal to `16` points and this value is the __default__ _font size_ in most _modern_ browser unless it's changed by the user.

![Default font size in Firefox Web browser](https://dev-to-uploads.s3.amazonaws.com/i/x4zwsyb4nuzsqftwu3t9.png)<figcaption>Default font size in Firefox</figcaption>


###__Recommended use-case__

This unit scales and it's best used in the following situations:

* An element `font-size` property.
* Container wrappers in [responsive web design](https://dev.to/ziizium/introduction-to-responsive-web-design-45g6).
* Media query breakpoints.

###__Further reading__

* [The Power of em Units in CSS](https://www.sitepoint.com/power-em-units-css/).

##__Root `em`__

The root `em` is calculated relative to the _root_ em. The root `em` is usually the browser default font size.

The root element on a Web page is usually the `html` tag or the `::root` pseudo-element.

Have a look at the following code snippet.

```css
/**
 * The computed font size value assume the
 * browser defualt font size is 16px.
 */
p {
    font-size: 3rem; /* 48px computed by the browser */
}
```

###__Recommended use-case__

* Font sizing that does not need `em` units as demonstrated in the preceding code snippet.

###__Further reading__

* [Comprehensive Guide: When to Use Em vs. Rem](https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)

##__Pixel unit__

[Bert Bos](https://www.w3.org/People/Bos/) describes the `px` unit as the magic unit of CSS. ([source](https://www.w3.org/Style/Examples/007/units.en.html#units)).

Whether you use `rem`, `em` or other units the _computed_ browser equivalent will be in `px`.

###__Recommended use-case__

* Sizing of border width

###__Further reading__

* [The Lengths of CSS](https://css-tricks.com/the-lengths-of-css/#px).

##__Percentage unit__

The percentage unit is a relative unit and it's written as `%`. It is used to define a size relative to the parents object.

Have a look at the following example.

```css
.container {
    width: 50%; /* Half of its parent width */
}
```

###__Recommended use-case__

* Responsive web design

###__Further reading__

* [CSS units by Flavio Copes](https://flaviocopes.com/css-units/).

##__Viewport width unit__

The _viewport_ unit is used to dictate the __width of the current viewport__ that an element can occupy.

It's written in `vw` and it has a close relative called the _viewport_ height (`vh`).

###__Recommended use-case__

* Any sizing that requires changes with the _viewport's_  width.

###__Further reading__

* [CSS Viewport Units: A Quick Start](https://www.sitepoint.com/css-viewport-units-quick-start/).

##__Conclusion__

These are the units you'll use most of the time but I'll encourage you to experiment further with them and other units not discussed here.

You can check [Mozilla Developer Network Values and units article](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units).