CSS Units Guide, everything you need to know
Tags: css, beginners, design
Published: 2021-10-09 14:18:50

*This article was originally published on [webinuse.com](https://webinuse.com/css-units-guide-everything-you-need-to-know/)*
In CSS every property must have some value. Sometimes it’s a path, sometimes it’s color, sometimes it’s a string, but sometimes it’s a measurement unit. Today we are talking about the CSS units for measuring the length, width, and height of an element.

There are a lot of CSS units that can be used for measurement, like: `px`, `em`, `rem`, `vh`, `vw`, etc. We can divide all these units into two groups:

1.  Absolute units
2.  Relative units

### 1. Absolute CSS units

Absolute units are the same on any device, regardless of size and settings. Depending on the purpose of our design we may use different units. Since they are not scaling with device size, absolute CSS units are not good for responsive design, while they are excellent for print.

#### px

`px` stands for pixel and the visual size of a pixel varies depending on the screen resolution and quality. So `16px` is not, visually, the same size on every screen. E.g. take bigger screens like 27″ or larger with 2560x1440px or even higher resolutions. If our text is 16px it will seem much smaller than it really is, and as a result, our UI might seem broken, which, then, affects UX.

Regardless of this fact, a lot of developers still use px as their standard unit of measurement.

#### mm/cm/in

We know these units from the real world, and it is not often that we see them used in the web world. But, these units are excellent for preparing our page for print. Because `mm`, `cm`, `in` are always the same, we can use `@media print` query to implement those CSS units only when printing.

#### pt/pc

There are also `pt` (point), `pc` (pica) units, which are rarely used. `1pt` is 1/72 of an inch and `1pc` 12 points.

**NOTE**: Even though mm, cm, in, pt, pc are physical units there is no real guarantee that 1cm in CSS will be equal to 1cm on paper. Regardless, those units are better for printing than others we are going to talk about.

{% codepen https://codepen.io/claireparker/pen/PoKoZoR %}

### 2. Relative CSS Units

Unlike Absolute units, Relative units change depending on screen size and/or settings. Relative units are excellent for creating responsive design and they are excellent for screens, bad for printing.

#### Percentage (%)

What px is to absolute units, % is to relative units. We can call this a “legacy” unit. They are pretty easy to use. `1%` refers to 1% of parent’s size.

In the example below, we have `div#parent` that is `400px` wide and `200px` tall. We also have `div#child` that is `25%` wide, which equals to `125px` and `30%` tall, which equals to `60px`.

{% codepen https://codepen.io/claireparker/pen/XWaWXjm %}

#### em/rem

`em` units and `rem` units are almost the same. Difference is that `em` is relative to element’s `font-size`, while `rem` are relative to the root element’s `font-size`.

##### em

`1em` is equal to 100% of element’s `font-size`. So, if element’s `font-size` is `30px` than `1em` is same. `2em` inside same element means `60px`. Using `em` for font-size property may not be the best idea, but using `em` for margins, paddings and widths is good.

##### rem

`1rem` is equal to `100%` of root element’s `font-size`. Standard `font-size` built-in browser is `16px` if you do not change it, and we will see in a moment why it is not smart to change it.

Rem unit is excellent for responsive design and it is excellent for accessibility (this is why we should not change root font-size). Let’s say we have a user who changed (in browser) root’s font-size from 16px to 25px. If we used rem, our design will scale accordingly, and our UI will be intact, hence our UX will be the same for every user.

#### ex/ch

Similar to `em` and `rem`, `ex` and `ch` CSS units are base on the `font-size`. However, these units are also relative to `font-family`. `ch` stands for character unit and it is defined by the width of character “0”. The `ex` unit is defined as “the current x-height of the current font or the half of 1em”, as per [this freeCodeCamp’s article](https://www.freecodecamp.org/news/css-unit-guide/). The height-x of a given font is the height of the lowercase “x” of that font. It is often the middle mark of the font.

#### lh/rlh

`lh` stands for line-height, and `rlh` stands for root line-height. Same as `em` and `rem`, `lh` is “equal to the computed value of line-height” of the element, while `rlh` is “equal to the computed value of line-height” of the root element. If `line-height: 20px` then `1lh` or `1rlh` is equal to 20px, depends if we are talking of the element’s line height or the root element’s line height. These units are useful for aligning icons with text, according to the [css-tricks.com](https://css-tricks.com/lh-and-rlh-units/) article.

#### vw/vh

`vw` stands for viewport width and `vh` stands for viewport height. This means that these units depend on the screen size. Element of `50vw` will take 50% of the screen’s width, regardless of screen size and resolution. The same goes for `vh`. Element of `50vh` will take 50% of the screen’s height, regardless of screen size and resolution. We can use this for the width of the sections, which can prove like an excellent choice for responsive design.

#### vmin/vmax

Unlike `vw` and `vh`, `vmin` and `vmax` rely on the maximum width and a minimum height of the screen, or vice versa. For example, if screen size is `1920px` by `1080px`, then `1vmax` is 19.2px and `1vmin` is 10.8px.While, if the screen is `720px` by `1080px`, then `1vmin` is 7.2px and `1vmax` is 10.8px.

To calculate vmin and vmax we take screen size and then divide both width and height by 100. Whichever is smaller that is `1vmin` and whichever is larger it is `1vmax`.

### Conclusion

There are more units that we have not discussed here. We chose these units because they are, either, common or useful. Almost any of these units will “do the job”. But there are some units that are better for some things than others. For additional information on CSS units, we can use [Level 4 spec for CSS values](https://www.w3.org/TR/css-values-4/#font-relative-lengths).

If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [How to merge objects in JavaScript?](https://webinuse.com/how-to-merge-objects-in-javascript/)