CSS: size units
Written by Edalí Cárdenas/Fellow at DCI
To write this article I had to read a couple of articles and I found out that there are more size units for CSS than I thought. However, I am just going to mention a few, the most common ones, so you get an idea of them to start styling your web pages.
Some of the CSS properties that require size units are the following:
- font-size: defines the size of the text;
- border-width: defines the weight of element borders;
- margin: defines the spacing between elements;
- left/right/top/bottom: allows to position and move elements.
The most used units are:
- em for sizing relative to the parent’s font-size value.
- Rem for sizing relative to the root element <html>.
- % for percentage
- px for pixels
Ems
They exist from the beginning of the web. That is why they are supported almost by any browser out there, including IE. Yes, their support is really good! Therefore, ems are great for responsive design.
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.
With ems, you can just change the size of your body text, and the relative sizes of your headings and sidebar will change accordingly, thus, your webpage will remain visually balanced.
Rems
Now we know 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.
The problem with ems is that it is too much work when you have to consider the font-size of all the parent elements to calculate the font-size of the text sections nested in those elements. In case of rems, this is no longer necessary.
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.
The disadvantage of using rems is that they have no good support for every browser.
Percentages
Percentages are relative units: Percentages share principles with ems. They are relative to the inherited size of their parent element.
This means, percentage values are always relative to another value (e. g. a length). Attributes that allow percentages define the property to which the percentage refers. For instance, you can specify the width of a table row as a percentage of the entire table.
vw
The name vw stands for “viewport width”. This unit is relative to the width of the current viewport. 1vw is equal to 1% of the width of the viewport. So, you can think about the viewport and vw as a root element and rems.
vh
This CSS unit is works in the same way as the vw. The only difference is that vh is relative to the viewport height.
Pixels
Because computer screens use pixels to display the content, it is the most common size unit in CSS. All the units above are relative to differents elements in different conditions. Pixels, on the contrary, define absolute values: they are not affected by other inherited CSS properties.You can use them to fix the width of an element, or set the text size. They are also widely used for positioning and spacing purposes.
Which unit to use then?
Start practicing with pixels as they are absolute values, which means that they are not affected by the element’s context. You will be able to set the text size, image dimensions, border width, positions…
Percentage and ems values can be used alongside pixels, for relative text sizes especially.
Check out other websites to see more examples. I’d recommend MDN, Code School, CSS tricks.
Follow DCI to read more blog posts like this one!
