Units in CSS

Posted on May 31, 2016

At the beginning of 2016, Microsoft dropped support for older versions of Internet Explorer. Currently, just 2% of users are using a version lesser than 11. This is a great opportunity to benefit from conveniences offered to us by HTML5 and CSS3, especially when it comes to newly created sites. In this short post I’m going to focus on units of length that can simplify process of creating responsive page layouts.

Absolute Units

One of the two groups of units that can be used to format the document are absolute units. Absolute means that they have fixed value. These include centimeters (cm), millimeters (mm), inches (in), points (1/72 of inch, pt), pica (12 points, pc) and pixels (1/92 of inch, px). These units (except for pixels) are more useful for print than displaying on screens of devices.

Particular attention should be paid to the px unit. Its exact size is dependent on display of the device. For low resolution screens it corresponds to one pixel of the display but for displays with a higher resolution (e.g. Retina Display) one unit equals several physical pixels.

A large advantage of using pixels is their intuitive and fluid ability to transfer layout from graphical files provided by the designer. It is worth noting that Bootstrap, one of the most popular CSS frameworks, is using pixels to determine the length and spacing of the elements, while its new (currently in alpha) version already switched to the rem unit.

Using pixels may cause a few problems. One of them is completely ignoring user’s text size preference. Although this setting is becoming less common in favour of scaling entire page, it is still useful for users with eyesight problems.

2016-05-28

Another situation in which pixels may hinder things is creation of responsive version of the page. Using absolute units causes problems in both ways: the need to reset the font size to fit text on smaller displays and enlarging whole layout to the desired width so it will fit the whole screen nicely.

Instead of pixels: Relative Units

The second group consists of units which are in relation to the size of other elements. Thanks to them, the creation of scalable pages is greatly simplified.

% The percentage value of the length of the parent element.
em Value relative to the font-size of the current element. If font-size is not defined, size is derived from parent element.
rem Value relative to the font-size of the root element. Unlike em, rem units are consistent in a whole document

em unit is defined as the font size of the current element or – if its value has not been set – its parent. For example, if element with the class purple has font-size property set to 16px and its direct children with the class green have that property set to 1.25em, then the font size of green elements will be equal to 20px.

However, predicting the value of nested elements becomes problematic. As you can see in the example below, each successive nested element does not keep the same size, but it’s a quarter larger than previous one because its value was calculated from size of its parent.

1

Despite this, em units are not completely useless. They may come in handy when we want to set properties within some component. For instance, box showing error message can define its padding, margin, line height or text size of the header in em units.

1

But what if we need to use a fixed unit for the entire document?

rem Unit

The answer to this question is the rem unit. It behaves a lot like a em but with one crucial difference: the size is not taken from the element or it parent but from the root element of the document (in case of HTML documents it is always the element). That way we can avoid problems with nested items.

1

This unit is very flexible and (except for some specific circumstances) there is no reason to not use it every time. Its strength lies in the fact, contrary to defining layout in pixels, we can scale every element of the page according to user preferences as long as font size of element is expressed in percentages.

The default text size in the browser is 16px, which is not convenient number to use. For that reason, we can use percentage value of 62.5% which corresponds to 10px.

html { font-size: 62.5% }
body { font-size: 1.4rem } /* = 14px */

In addition, we can quickly scale the whole page using Media Queries. That way, it can fill better available screen space in whole spectrum of various devices and resolutions. For example, for a layout designed for 1280px width, we can effortlessly create enlarged versions for larger resolutions. Note however, that the values for breakpoint should also be expressed in rem units. This will prevent situation in which layout won’t be adapted to the size of the text (with a larger text there may be a situation in which it turns out that it is better use version prepared for tablets). In case of Media Queries, relative values are based on initial value, which means that units are never based on results of declarations. Usually, the initial value is medium which corresponds to 16px unless user chose differently.

@media screen and (min-width: 85rem) { /* 1360px/16px = 85rem */
@media screen and (min-width: 100rem) { /* 1600px/16px = 100rem */

1

As you can see in example above, creating a responsive, scaling layout does not require many changes in the Media Queries.

Viewport Units

vw Value of the 1% of the width of the viewport.
vh Value of the 1% of the height of the viewport.
vmin Value of the 1% of the smaller dimension of the viewport.
vmax Value of the 1% of the larger dimension of the viewport.
Doesn’t work in IE.

On the face of it, these units seem superfluous: after all, we can use percentage values instead of them. Nonetheless, we can find use for them very quickly. Because percentage units are relative to the parent element, it becomes problematic to define element expanding over the entire height of the page without having defined the height of the parent element first. With Viewport Units, creating hero image expanding becomes a breeze, not to mention that creating an object that fits always in the browser’s window is impossible without using JavaScript.

1

There is one nuisance though: according to specification, when overflow value of the root element is set to auto, size of scrollbars is not taken into account. For example, let’s have element with both dimensions set to 100vw. While resizing browser’s window horizontally, there will be moment when height of that element exceeds window height and vertical scrollbar will be shown. On OS X and mobile devices nothing will happen: the scrollbar is displayed on the canvas of the document. However, on Windows bar will take part of the viewport and horizontal bar will be shown too. At the moment, the solution is either setting the max-width to 100% or using JavaScript to change value of overflow when resize event is triggered.

ex & ch Units

ex Value of the height of the x character.
ex Value of the width of the 0 character.

These two units are being determined from currently selected font and its size. The ex unit is defined as the height of the lowercase letter x and the ch unit is calculated from the width of the 0 character. They are not used too often but they can be valuable in tweaking typography of the page.

Computing values of properties thanks to calc( )

This is not a unit per se but it is closely linked with them. This method allows for arithmetic operations with mixed units. For example, it is possible to subtract percentage value from pixels: calc(60% – 50px). This greatly simplifies creating grid systems or arranging elements with position: relative in the container.

Conclusion

I hope that units presented here will accelerate the creation of better and more complex sites with less effort. It is worth checking regularly which functionalities of HTML5, CSS3 or ES6 have already been implemented in commonly used browsers.

Wojciech Bartosiewicz

Frontend developer