Gone are the days when developers used to set px units in CSS files. As new devices and technologies are being introduced, the web has undergone a huge change. To accommodate this, CSS has introduced new units that ensure your website renders just as expected in every device. These new CSS units are narively supported by all major browsers. In this post I am going to discuss about some of these units which you should be using.

1. rem

em has been our choice of units for a long time. It allows incremental changes in font-size, for example, without calculating exact pixels. An example of em:

body {
    font-size: 13px;
    ...
}

p {
    font-size: 1.2em;
    ...
}

Since p’s font-size is 1.2em, it comes to 15.6px, which is 1.2 times 13. em calculates font-size relative to the parent element. But using em is not useful when you have nested structure. That is, if p has a child element (e.g. span), it’s font-size would be determined relative to p, not relative to base font-size of 13px, in the above example.

To mitigate this problem, rem is used. Font-size defined in rem units are relative to base font-size. Here is an example.

body {
    font-size:12px;
    ...
}
p {
    font-size: 1.2em; /* which equals to 14.4px */
    ...
}
p > span {
    font-size: 1.1rem; /* which is 12 x 1.1 = 13.2 */
    ...
}

rem units are very helpful when you are defining nested elements. em and rem units should be used as much as possible. These two relative units do not need to be changed every time you need to change the font-size, changing the base-font size will be sufficient.

2. pt

CSS pt unit is defined as the 1/72nd part of an inch. That is 1 pt = 1/72 inch. It is an absolute unit and it doesn’t depend on the number of pixels per inch. pt unit is best suited when you are styling for print media.

p {
   font-size: 18pt;
   ...
}

In the above style, p‘s font-size will be 18/72 inch, i.e. 0.25 inch.

3. pc

pc or pica unit is also an absolute physical unit. 1 pc is equal to 12 pts, that is 1/6th of an inch. Being a physical unit it is best suited for print media.

p {
   font-size:3pc;
   ...
}

p‘s font-size here will be 36pt or  0.5 inch.

4. ch

ch is an interesting CSS length unit which is defined as the length taken to render ‘0’ (zero) by the font-family used. That is to say 1ch is equal to the space used to print ‘0’ on the screen (or print media). In absolute terms, 1 ch is equal to 0.5 em in length and 1 em in height. (This is because, in an ideal font-family, the length of ‘0’ should be half its height.) So, if you have:

span {
   width: 13ch;
   ...
}

the span will accommodate the number of characters equal to the space used by 13 0’s. This is useful when you want to restrict the number of characters in a certain element.

5. ex

ex unit is defined as the height taken to render ‘x’ by the font-family. It is often half of 1em, because, ideally, the character ‘x’ should be half the font-size. For example,

p {
   height: 4ex;
   ...
}

The p tag will have a height of 4 times the height of the ‘x’ character, in the above example. ex can be used to position sub and sup elements. As with ch, this changes with the change of font-family.

6. vw and vh

vw and vh are used in responsive layouts to specify view-port width and height, respectively. 1 vw is 1/100th of view-port width. These units remain constant even if their parent elements’ width or height changes.

div#sidebar {
   width:20vw;
   ...
}

div#main {
   width: 80vw;
   ...
}

The main benefit of using vw or vh over percentage unit is these two units are relative to the actual view-port of the browser whereas percentage works relative to the element’s parent.

7. rlh

rlh is short for root line height. Irrespective of its parent, any element with 1 rlh will have the same line height as that of the root element.

Conclusion

The above CSS units are pretty much supported by all major browsers. I have intentionally left out fr, vmax and vmin. Browser support for these have been little — Safari and IE do not support them. If you are interested about how CSS units work, you may check this article which explains CSS units in great detail.