Table of Contents
How well do you know CSS? What about CSS units? As web designers and developers, we often focus on only a handful of them. Take a look at the majority of tutorials and articles. You will usually see one or two units used over and over again. Then, it is no surprise that we forgot those used less often. I think that this is wrong and we should change it. In this article, we will take a look at all the CSS units that exist. Are you ready for the next step to become a CSS expert?
The Curious Case of CSS
Did you know that there are 15(!) different CSS units you can use? If not, you don’t have to feel bad. Not so long ago, even I knew only about half of these units. In a fact, a large number of web designers doesn’t know all these CSS units. Even people with years of experience may know only few. So, if you need some test to know that you are hiring only the best, this is can help you. The same is true if you are on the other side of the table. Let’s say that you are applying for a job.
To increase your chances of being hired, you have to shine like a star. Usually, you will have only one chance to prove your skills. In other words, you can’t afford to screw it up during the interview. You need to show to your potential employer that you are CSS expert. Many web designers and developers will tell you that CSS is hard. This is true. If you don’t think about your code and neglect CSS best practices, the result is a mess.
On the same token, CSS also contains a lot of tricky topics. We don’t even have to get to CSS units. Take a look at these five common CSS mistakes. Do you have experience with any of them? In a short, CSS is hard. It is a paradox that many people see CSS as something inferior. This might be the reason that you don’t see many CSS experts. In a fact, Harry Roberts is the only CSS expert I know. So, CSS might not be the most important thing to master in web design and development.
Why this article?
I’m sure there are many things you could learn about. Still, I believe that everyone interested in web design should know CSS. Why I decided to write this article? Anyone working with CSS is also working with CSS units. There is no way you can avoid them. It is almost like learning the mathematics and trying to avoid numbers. Unless you limit yourself to only a handful of properties, this is impossible to achieve. Therefore, learning about CSS units is a good idea.
As I mentioned above, there are 15 units you can use in CSS. However, that doesn’t mean you have to memorize all of them. The truth is that you will mostly work with only four, maybe five. Still, it is will be useful to know that there are also other units than those you use. Again, it is similar to mathematics. You don’t need to memorize all trigonometric functions, unless you are mathematician or math teacher. You will not use them so often. Still, it is good to know they exist.
Relative CSS units
Let’s start this article with relative CSS units. The main advantage of relative units is that they are very flexible. You can scale these units and customize them to fit different devices and environments. What causes this flexibility? Browsers calculate these units in relation to another element. As a result, you can get different outcomes under different conditions. Which element will the browser use depends on the specific unit.
ems
The first and very popular CSS unit are ems. There are two reasons for the popularity of ems. The first reason is that they have been around for a long time. It is safe to say that they are here from the beginning of the web. There is probably no chance that you will find any browser that doesn’t support ems. You would have to make a serious effort. Even in the case of IE you would have to go below version three. Yes, their support is really so great! The second reason is a responsive design.
If there is some unit heavily used in responsive design, it is em. Flexibility and strong support were the main reasons why designers started to use ems in responsive design. How ems work? They change accordingly to the font-size of the parent element. So, let’s say that you have one element with font-size of 16px. Then, this font-size will influence any child element that uses ems. 1em will result in the same size as the parent. 2em will result in 32px – twice the font-size of parent.
The problem with ems
This flexibility can also cause a lot of troubles. Imagine you have one div with class “wrapper”. This div has font-size set to 18px Inside it is another div with class “content” with font-size set to 0.85em. Finally, inside this div is one p element with some random text. This text has font-size set to 1.25em. So, here is my question: What’s the font-size of the text in pixels? No, it is not 22.5px (181.25). Also, it is not 15.3px (18.85).The right answer is 19.125px (18.851.25).
When we use ems to set size for some element, we have to consider font-size of all its parent elements. The previous example was simple. Imagine a situation where you would have five, six or seven div elements. How interesting would it be to calculate the font-size of the text on the end this chain? So, yes, ems are useful. Yet, there are other CSS units that might be better.
rems
Rems are the successor of the em units. These two CSS units share the same philosophy and principles. However, they differ in implementation. We discussed that ems are relative to the font-size of the parent element. Rems, on the other hand, are relative to the font-size of the root element. This is also the meaning of the “r” in the name of this CSS unit. And, this is also what makes rems the solution to the problem with ems. Do you remember the example with nested divs and text?
We had to include font-size of all those divs to calculate the font-size of the text. In case of rems, this is no longer necessary. Let’s take that example set the font-size of the text to rems instead of ems. So, what will be the font-size of the text in pixels now? Although the parent element has font-size set to 18px, the font-size of the text will not be 18px. And, it will not be 22.5px or 19.125px. What will be the right answer now depends on the font-size of the html element.
Html is the root element of every page. And, rems are relative to the root element. Therefore, rems are relative to html element. So, let’s say you set the font-size of html to 16px. Then, every element on the page that is using rems will be relative to these 16px. In other words, 1rem will be equal to 16px, 2rem will be equal to 32px and so on. It doesn’t matter what’s the font-size of parent element. It has absolutely no effect on its child. Well, unless the parent element is html.
Too good to be true?
If rems are so good, why aren’t they the CSS units of responsive design? When responsive design became a trend, rems had worse support than ems. The support of Firefox and Chrome was excellent as usual. Support in Safari and Opera was also quite good. The only problem was, as usually, IE. Back then, a lot of people were using IE8. And, this browser didn’t like rems. So, for this you had to take a look at the palette of CSS units and choose something different.
Percentages
The next item on the list of CSS units are percentages. And, in case of percentages, there is actually not so much to talk about. Percentages are mostly used as units for widths if you want to create fluid layouts and grids for pages. Percentages share principles with ems. They are relative to the inherited size of their parent element. So, if the font-size of the parent element is set to 16px, text with font-size set to 75% will be equal to 12px. This effect is cumulative.
So, if the font-size of one element is set to 16px, the font-size of its child is set to 85%, and you one more element with text inside it with font-size set to 70%, the result will be 9.52px. In other words, you have to deal with the same problem you had with ems.
ex
This is probably one of those CSS units you never heard about before. This unit is relative to the x-height of the glyph in current font. As you guessed, that glyph is “x”. Hence the name “x-height”. Where does the browser find its value? First, it can find it in the font itself. Second, it can measure glyph in lower case. If none of these options work, browser will use 0.5em. One interesting thing about ex. When you change the font used on the website, ex units will change as well.
ch
Another less known CSS unit is ch. Similarly to ex, ch is relative to the width of the “0” character. Also, just like ex, it will change if you change the font.
vw
It’s time to look at the future of CSS units. The name vw stands for “viewport width”. As you can guess, this unit is relative to the width of the current viewport. 1vw is equal to 1% of the width of the viewport. This unit works like something between percentages and rems. What I man is that when you use this CSS unit, the value remains consistent. Parent elements or their width have no influence. So, you can think about the viewport and vw as a root element and rems.
vh
The next unit is vh. This CSS unit is works in the same way as the vw we discussed above. The only difference between those two CSS units is that vh relative to the viewport height.
vmin and vmax
Vmin and vmax can look a bit tricky. However, stay with me because it is actually easy. These two CSS units are related to the maximum or minimum vw or vh. Which one it is depends on which is smaller and larger. Let me give you one example. Imagine you are working with viewport of 1400px wide and 900px tall. Then, 1vmin will be equal to 9px while 1vmax to 11px. Again, vmin will relate to the smaller dimension and vmax to the bigger.
What will happen if you work with viewport that is taller than higher? Let’s say that the width is 900px and the height is 1200px. Then, vmin will be equal to 8px while vmax to 12px. So, again, vmin is related to the smaller number and vmax to the larger. If you want to try these two CSS units, make sure to take a look at some issues. This is the problem with modern CSS units, you have to wait until the browsers adopt them.
Absolute CSS units
Relative CSS units are behind us. So, it is time to move to absolutes. The absolute CSS units are fixed. As a result, they will always appear in the same size. This is also why absolute units are not recommended for use on screen. There is a wide range of screens. And, you have no control over the way they render these units. However, these units can be still a good choice for design disciplines such as print. There are six absolute CSS units. The first unit will be the one on which the whole web stands and many people love.
Pixels
Pixels are those little dots that create the display of your desktop screen. When you look at something on your monitor, computer renders it in pixels. Pixels are a well know and used standard in web design. Many web designers and developers use pixels as their main CSS unit. I would also say that pixels are the biggest competition to rems. Many people think that pixels are normalized across devices, that you will always get the same result. Unfortunately, that’s not true.
Let me illustrate this on two Apple devices. Imagine you visit some website on the iPad mini. Then, you visit the same website on the latest iPad. Both devices will render the website in a slightly different way. In other words, don’t think that using pixels will help you avoid inconsistencies. The same is true for other devices, such as desktop computers, as well. If your computer uses a different default font-size, then you will get a bit different result then other users.
Points
The next unit are points. This unit is more common in typography design. However, some web designer do like to use this CSS units as well. On the web, they are mostly used for fonts and text styles. Points are the smallest units of measure in typography you can use. They are marked with “pt” abbreviation. One point is equal to 1/72 of an inch. Due to minor use in web industry, there is not so much to say about them and you will probably don’t see that often.
in
Another unit from the world of atoms are inches. 1in, or 2.54cm is equal 96px. As far as I can recall, I never saw inches in CSS. Also, I don’t know about any pragmatic or practical use for them.
cm and mm
Another two CSS units from the world of atoms. If you use metric system, you probably are familiar with centimeters. In the terms of CSS? It is more rare to see centimeters than inches. Seriously, when you see this unit in CSS, make a photo and share it. Otherwise, nobody will believe it.
pc
The last representative of CSS units are picas. Honestly, there is not so much I can tell you about this unit. One thing I can say about picas is that 1pc is equal to 12pt.
Closing thoughts on CSS units
This is it. In the beginning, I said that we will discuss the 15 CSS units you can use in CSS. Now, you know about all of them. One question that comes to mind is what unit(s) are best for web design. My current choices are percentages and rems or pixels. In most cases, I use only these three CSS units. I use percentages for grids and pixels and rems for everything else. My workflow is to set everything that’s not percentages in pixels. Then, I use Sass function to convert pixels to rems.
I don’t know if this is the best answer. In a fact, I’m not even sure if there is such as a thing as the best CSS unit for web design. In case of CSS units, it is rather about personal preferences. There are no hard-coded best practices for that. At least I didn’t hear about them yet. Sure, there are units that are better for web design. These units are pixels, ems, rems, percentages, vw, vh, vmin and vmax. Experiment with these CSS units. Then, choose the unit(s) that fits you better.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
