
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.