Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, ...)
Tags: css, html, webdev
Published: 2019-07-30 06:07:58

CSS knows several measurement units. The best known unit is pixels, but there are other units that are not that popular but very handy in some uses cases.

This article covers relative units, absolute units and viewport units.

|Media|Recommended|Occasional use|Infrequent use|Not recommended|
|-----|-----------|--------------|--------------|---------------|
|Screen|em, rem, %|px|ch, ex, vw, vh, vmin, vmax|cm, mm, in, pt, pc|
|Print|em, rem, %|cm, mm, in, pt, pc|ch, ex|px, vw, vh, vmin, vmax|

## Relative units

As opposed to absolute units like pixels, points or centimeters, you can also define sizes in relative units like percentage, em or rem.
Relative units also [comply with accessibility standards](https://www.w3.org/WAI/WCAG21/Techniques/css/C28.html). 
In most browsers, the default font size is `16px`, you can use this value as a basis for calculations (e.g. 16px equals 1em, 1rem or 100%).

|Unit|Description|
|----|-----------|
|%|percentage|
|em|font size of the element (e.g. 2.5em means the font is 2.5 times bigger than the normal font)|
|rem|font size of the root element of the document|
|ch|width of the "0" character, in mono space fonts, where all characters have the same width, 1ch equals 1 character|
|ex|x-height of the current font, measured at the height of the lower case x|

{% codepen https://codepen.io/fullstack-to/pen/PrXNGW %}

### What is the difference between em and rem?
The difference lies in the inheritance. The `rem` value is based on the root element (`html`). Every child element uses the `html` font size as their calculation basis.

`em` on the other hand, is based on the font size of the parent element.

`rem` makes the calculation of the font size much easier. With nested elements or even multiple nested elements (e.g. lists), the font size no longer has to be calculated in relation to the font size of the parent element. `rem` always calculates the font size in relation to the `html` tag.

### Different font families
![x-height of different font families](https://thepracticaldev.s3.amazonaws.com/i/33lk4z011rq05c4rh1z6.png)

All fonts have the same size (18pt), but the red bar indicates, that the x-height (`ex`) of the fonts are different. 

![width of the "0" character](https://thepracticaldev.s3.amazonaws.com/i/zq0c8neh8uv6h5kjgsb1.png)

The fonts have the same size again (18pt). In this graphic the character width (`ch`) is compared. Mono space fonts have the same width for each character, whereas serif or sans-serif fonts might have different widths for each character (`i` is narrower than `o`).


## Absolute units

Absolute units are fixed in its size, you can't discuss how long a centimeter is. If you have a case where the exact length is required, you should use absolute units (for example for components which should not be resized). They can also be useful if you want to define restrictions to avoid that areas become too wide or too narrow. Absolute units do not change according to screen size, direction or other variations.

|Unit|Description||
|----|-----------|----|
|cm|centimeters|1 cm = 1 cm|
|mm|millimeters|10 mm = 1 cm|
|in|inches|1 in = 96px = 2.54 cm|
|px|pixels|1 px = 1/96th of 1 in|
|pt|points|1 pt = 1/72 of 1 in|
|pc|pica|1pc = 12 pt|


{% codepen https://codepen.io/fullstack_to/pen/mZaVBZ %}

## Viewport units

Viewport units represent a percentage of the current browser viewport.
The difference to percentage units is, that viewport units always being calculated as the percentage of the browser's viewport size. Whereas percentage units inherit the size of their parent element.

|Unit|Description|
|----|-----------|
|vw|1% of the viewport's width (50% means the half of the viewport width)|
|vh|1% of the viewport's height (50% means the half of the viewport height)|
|vmin|1% of viewport's smaller (vw or vh) dimension|
|vmax|1% of viewport's larger (vw or vh) dimension|

{% codepen https://codepen.io/fullstack-to/pen/gNZryX %}

`vmin` and `vmax` can change whilst the browser window is resized or the orientation of the mobile phone is changed. 
`vmin` is the minimum between the viewport's height or width in percentage depending on which is smaller. 

`vmax` is the maximum between the viewport's height or width in percentage depending on which is bigger. 

<hr />

If you like my content, you might want to follow me on Twitter?! [@fullstack_to](https://twitter.com/fullstack_to)

Cover Image by [William Warby](https://unsplash.com/@wwarby?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/measurement?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)