CSS Sizing Units: Everything You Need To Know
Hi, I'm Cessa and I'm a freelance writer. I'm currently learning web development and I started this blog, so I can share what I've learned.
When styling an HTML file with CSS, it is common to come across sizing units. In short, these units are almost unavoidable. Whether we're assigning value to an element's font size or the width of a container, CSS size units remain relevant.
In some cases, developers especially newbies use units like pixel (px), rem, and em interchangeably. However, these units are quite different from each other.
In this article, we'll discuss the various types of CSS sizing units, some practical examples, and the best practices to apply when making use of CSS units.
Prerequisites
To understand this article, we need;
• HTML knowledge
• A basic idea of CSS
What are CSS Sizing Units?
CSS sizing units are measurement quantifiers that determine the size of an element or a selector's property. The way we use CSS units can make or break our code.
For instance, CSS units like rem are better at expressing font size property values. Meanwhile, the em unit can cause inconsistencies in font sizing if we're not careful enough.
There are different types of CSS size units and they all have distinct working principles.
Types of CSS Units
CSS has a large range of sizing units. However, only a few of them are commonly used in web development.
As we can see in the image above, VS code suggests numerous CSS units in response to the font size property.
CSS size units are mainly divided into absolute and relative units.
What are Absolute Units?
Absolute units are fixed units that express the length of a property. They remain the same across different devices and do not respond to changes in device settings.
Some examples of absolute units include px, cm, in, and mm. Despite the variation, developers mostly use the pixels (px) unit when there's a need for an absolute unit.
Let's take a look at the px unit;
- Pixels (px):
Anyone who has worked with CSS is probably familiar with px. This unit is arguably the most common and easiest unit to use. Pixels are great for sizing and layout in CSS. We can use px to define properties such as height, width, border, and border-radius.
For example, we've used px to set the height and width of our .box class. The unit for the border property is px by default.
.box {
height: 250px;
width: 250px;
border: 1px solid #000;
background-color: cornflowerblue;
}
RESULT:
NOTE: Most browsers have a default font size of 16px
Apart from spacing and layout, pixels can serve as a font size unit. Some developers use pixels to define font size and it works fine. However, the practice is not ideal because of accessibility.
Recall that px is an absolute unit which means that it's not scalable. What happens when we use an absolute unit like px to express font size?
Well, a user could decide to change their font size appearance through settings. It could be a matter of preference or maybe the user has poor vision.
If the developer used px to express font sizes on the website, users wouldn't be able to change their font appearance. This is a bad user experience because it takes away an important choice from users.
What are Relative Units?
Relative units are units that are based on different components in the style sheet. Some of these components include the parent font size, the parent element, the root element, and the size of the screen.
Unlike absolute units, relative units are scalable. Examples of relative units are percentage (%), rem, em, viewport height (vh), and viewport width (vw).
These units have different working principles and we'll go through them one after the other.
- Percentage (%)
Firstly, we should note that the % unit is relative to the parent element or the container. If there's no parent element, the % unit becomes relative to the screen size. The screen size is 100%.
NOTE: 16px = 100%
Example 1:
In the code snippet below, we have two div elements. The first div has a class of ''parent'' while the nested div has a class of ''child''.
<body>
<!-- percentage unit -->
<div class="parent">
<div class="child">width: 100%</div>
</div>
</body>
For the CSS, we assigned a width of 50% to the .child class.
.child {
height: 50px;
width: 50%;
text-align: center;
background-color: #4c2c69;
color: #fff;
border: 1px solid #000;
}
RESULT:
Since we did not assign any width value to the parent element, our rectangle became relative to the screen size. In this case, our rectangle occupied 50% of the screen size.
What if we assign a width value to the parent element? We'll demonstrate the result with another example.
Example 2:
Now we've added a parent width value of 50%. We also changed the .child width to 25%. Here, the child element becomes relative to the parent element. In other words, our rectangle will have a width that is 25% of 50%.
.parent {
width: 50%;
}
.child {
height: 50px;
width: 25%;
text-align: center;
background-color: #4c2c69;
color: #fff;
border: 1px solid #000;
}
RESULT:
In the webpage below, we can see that our rectangle now has a width that's related to the parent element. The new width is 25% 0f 50% which is 10%.
- Rem
The rem unit is short for "root em" and it's relative to the root/HTML element. Many developers prefer using rem to quantify the font-size property. The reason for this preference is that rem doesn't cause inconsistencies in font sizes. 1rem = 16px (default browser font size) and 2rem = 32px.
When we assign a font-size value to our root element, it'll affect every other element with a rem unit. The elements with a rem unit will be multiplied by the font size value in the root element. As expected, this multiplication will increase the font sizes that are set with rem.
Let's have a look at a simple example;
Example 1:
In the code below, we assigned 20px to the font size property of the HTML/root element. There's also a p element with a font size value of 2rem. The 2rem will multiply by the 20px and become 40px.
html {
font-size: 20px;
}
p {
font-size: 2rem; /*2rem X 20px = 40px*\
}
RESULT:
As we can see in the screenshot below, our text looks enlarged. Instead of 2rem (32px), our font size became 40px. To avoid this issue, don't set a font size for the root element.
- em
CSS em and rem units sound similar and some developers use them in place of each other. However, there's a significant difference between them. While rem is relative to the root element, em is relative to its parent element's font size.
The em unit works greatly for CSS properties like margin and padding. Although, using em to quantify the font size property can be tricky.
Let's have a look at what can happen when we use em for font sizing.
Example 1:
In the HTML snippet below, we have a div tag and a nested p tag. Our p tag also has a nested span tag. The code structure looks like this;
div = parent element
p = first child element
span = second child element
<body>
<div>
<p>This is the first child element... 2em x 20px= 40px <span><br>This is the second child... 2em x 40px= 80px</span></p>
</div>
</body>
For the CSS, we set our div (parent) font size to 1em (16px). Our p tag has a font size of 2em but because of the em unit, a multiplication occurs. The p tag's 2em multiplies by the div tag's 1em to give us 32px.
Since the span element is nested in the p tag, it multiplies the 32px by its 2em. After that, the span element ends up with an oversized font size of 64px.
div {
font-size: 1em;
}
p {
font-size: 2em;
background-color: #d1f0b1;
}
span {
font-size: 2em;
}
RESULT
The first sentence in the image below is our p tag with a font size of 32px while the second sentence is the span tag.
- Viewport Height (vh)
A viewport refers to the visible area of a webpage or a display screen. Similarly to the % unit, viewport height is relative to the device screen. However, the viewport height does not relate to any parent elements present in the code.
NOTE:
1Vh = 1% of the entire screen
Example 1:
In the codepen below, we can see a practical example of how vh works. The HTML code has a div element and a nested p element.
In the CSS code, we set our div height to 50vh. Consequently, the div element took up 50% of the viewport height. Since we didn't set a width value, the div took an automatic value of 587px.
We also used the vh unit to center our text. To achieve this, we assigned a margin-top value of 25vh to our p tag. From our result, the p tag occupied the center of our box.
- Viewport Width (vw)
Viewport width is a unit with responsive web design qualities. This means that it makes your website appear good on different device sizes. Like viewport height, vw is relative to the viewport size. 1vw = 1% of the viewport width.
Example :
For this example, we separated the HTML and CSS codes into two parts. This example aims to demonstrate how vw works and the difference between vh/vw and percentage.
- The HTML has a parent
sectionelement and a childdivelement. First, we styled the parent with a height and width of 300px. Then we gave the child a height of 25vh and a width of 90vw.
The output shows the child element occupied a width of 90vw regardless of its parent width value.
2. Now the second part is a replica of the first but there's a little difference. Instead of vw and vh, we used % to set the height and width for the child. In contrast to the first part, the child element became relative to the parent element.
Best Practices For CSS Units
The guideline for using CSS units is not exactly set in stone. The more we use these units, the more we understand how to apply them. Developers around the world use CSS units differently and they have explanations for their actions.
However, there are ideal ways to use CSS units. These methods always produce the best results for CSS.
We all want to build pixel perfect applications, so let's get into the best practices for CSS units;
- Don't use absolute units like
pxto set font size.
For accessibility reasons, its best to use relative units for font sizing. That way, the user has the option of adjusting their device font size settings. Use px to set properties that do not require scaling. Example: border
2. If possible, avoid setting a font size value for the root element.
Its not uncommon to see CSS codes with a set font size value for the root element. Some engineers use px or rem while others use the 62.5% trick for the root element. Browsers have a default font size of 16px but this value changes when the root element font size is set.
Once the root element has a set font size, every other element will require little calculations to get the preferred font size. Instead of doing all these, allow the browser to handle the root element.
3. Assign font size values to the closest child elements.
When using relative units (em, rem and %), assign values to the close child elements. This reduces the chances of font size inconsistencies due to inheritance.
4. Use rem unit to assign value to the font size property.
Out of all the relative units, rem is the most ideal for font sizing. Unlike em and %, the rem unit does not relate with its parent value. As a result, inheritance issues are minimal when we use rem to set font sizes.
5. Use em for properties that should scale based on the parent element's font size.
The CSS em unit is relative to its parent font size. This means that the unit can cause large font size multiplications due to inheritance. We can use em for properties like margin and padding. The em unit is also ideal when we want an element to be relative to its parent.
6. Avoid using viewport width to assign font size.
Viewport width has responsive web design qualities. When we use vw for font sizing, it makes the font size responsive to different device screen sizes.
However, there's a disadvantage. Using vw for font sizing can affect the webpage's ability to zoom fully.
To avoid wrecking our zooming ability, we can use the calc() function. The syntax will look like this;
font-size: calc(1vw + 2rem); /* 38.05px *\
Tip: We can use any unit to calculate font size with the syntax above.
Conclusion
CSS units determine the size of every element in a webpage. Moreover, the wrong size units can negatively affect user experience and we don't want that.
Having a balanced knowledge of CSS sizing units helps us to decide on an appropriate unit. It also makes us to understand the reasoning behind that decision.
If you enjoyed this article, please share it with your friends. Let me know about your thoughts in the comments below.
Also, I'd love to connect with you on Twitter.