The Relative Units of CSS
The units in CSS are critical as we work with these all the time. You can’t build anything without using these so we must know the units properly.
We all know well our favorite unit which is the pixel. A pixel is a physical dot on your monitor’s screen which size is always the same (on that monitor, there can be high pixel density screens, but this is another story). Building with pixels is not too hard; you get the design, measure the parts of it and use the same widths, heights and font sizes. This is what we call pixel-perfect design. It was cool – but not for me – in a way back (when we browsed the internet on a 1024px/1280px screen), but nowadays this perfection means nothing.
With the appearing of responsive design, we had to support a lot more device with different parameters, so we needed more flexible units named relative units. A relative unit is based on its context and other external factors (separate property), so it is harder to work with.
Of course, there are simpler units like the percentage which is familiar to many people, but there are more difficult ones like the em which seem unpredictable in a lot of cases because of the inheritance. But fear not there is a solution for everything.
The main advantage of the relative units is you can build your site or app for everybody, and you can also manage it efficiently. If you have to follow a design you can also convert your fix values to relative ones. So what are these?
Em and Rem Units
One thing is sure if you go with em and rem you never look back. These two give you and your design system so much flexibility which will make your everyday design life much more relaxed.
Before anything else let’s see the definitions:
- em: relative to the font size of the element, one em means the font size of the current item,
- rem: relative to the font size of the root element, one rem means the font size of the root element.
As I said earlier working with ems is quite tricky because it can get its value relatively from its parent element so in case of nesting it is impracticable (if the parent has em value too), but this is where the rem came in which is only reflect the root font size.
Using these two units, we can make flexible, responsive components like the following button:
As you see we use the em as a length unit padding and we scale all of this with globally using :root selector and locally also with em (small and large variant). Define rem font size you can avoid the nesting em problem. Following this method, you can optimize your vertical flow.
For this technique, it is fundamental to set your base font-size (by browser default usually this is 16px) because you can calculate the pixel values like this: 16 (base font size) / 12 (current font size) = 1.3333 em.
Nice to know that you can use ems everywhere in your design (where length value is acceptable) but for me – and others – is not the best option. I don’t use it in media queries because I think in this case the absolute values are better.
Other Font Units: ex, ch
These two like the previous ones related and relative to text values so you can achieve similar solutions.
The ex unit refers to the x-height of the font mainly the letter x’s height.
The ch unit means the width of the zero character in the font. For more info check Eric Meyer’s article.
Using percentages as relative values are popular in a lot of CSS framework for layout sections. Bootstrap 3 using percentage to define its columns too.
It is relative to the parent element or the viewport width. For our sanity, we should use this mostly for layout.
If we declare a container with a width of 80% and you create a column item with 50% your column’s 50% with will be the parent 80%’s half. You can check this in your browser’s computed properties panel.
Viewport Width and Viewport Height Units
The vw and vh units are always relative to the viewport. 1vw and 1vh is the 1/100 size of your viewport width and height. You can size your elements to fill your viewport vertically, or you can make genuinely responsive typography like in this excellent article!
Like in the case of rem these units never change the context, these are always referred to your browser’s scrollable user area’s (a.k.a. your viewport) dimensions.