The hitchhiker's guide to CSS units
How many are there and what’s the difference between them?
Introduction
If you’ve ever used CSS, then you’ve most likely found yourself in front of one or more unfamiliar measuring units! I mean we’re all familiar with centimeters, inches and pixels, but what about the others?
Understandably, these numerous units can appear extremely confusing and scary at first, especially from a beginner’s standpoint, but when understood properly, they can significantly accelerate the creation process and improve your web design experience in many ways.
In this article, I will go through all the units that we can use in CSS, their use cases and how we can utilize them efficiently to improve the responsiveness of our designs.
Types of CSS Units
To have a better understanding of each unit, we must first divide them into two types: Absolute and Relative.
Absolute Units
These units are fixed and are based on physical units, meaning that they do not depend on any other aspect similar to screen size, parent element's size...etc. This is exactly why they’re usually not recommended for web design, as they’re too often unpredictable. Among these, we have:
Metric and Imperial Units
.metric, .imperial {
padding: 100mm; /*Millimeters*/
border: 10cm; /*Centimeters*/
margin: 3in; /*Inches*/
}
These are the units that we all learn in preschool and use throughout our lives! And whether you prefer the Metric or Imperial system, you will rarely need to use them in CSS.
N.B: There is one more (less common) metric unit available in CSS, it's Quarter-Millimeters. (Noted Q and equivalent to 1/4 of a millimeter)
Pixels
.pixels {
height: 20px; /*Pixels*/
}
A pixel, as most people know it, is the smallest addressable element of an image, and it is used to describe either one dot on the screen (for old and low-resolution devices) or multiple display dots (in the case of modern high-resolution screens).
Generally, it is equivalent to 1/96 of an inch.
Points
.points {
font-size: 16pt; /*Points*/
}
Similar to many other units on this list, points originate from the art of typography. It’s defined as the smallest unit of measure and has had various sizes throughout history. Nowadays and since the rise of digital printing, a point is equivalent to 1/72 of an inch or 0.353 millimeters. It is also the unit used for modern office suites (such as Microsoft Office).
Picas
.picas {
font-size: 1pc; /*Picas*/
}
It's defined as the equivalent of 12 points or 1/6 of an inch, and it's by far the least popular unit on this list.
Relative Units
As their name suggests, this type of units depends heavily on other aspects whether it's the parent element's size, default font size, ...etc. They are the norm for Responsive Web Design because when used efficiently, they can allow your elements to perfectly scale relative to your viewport and other elements around them.
Em
#em {
font-size: 3em; /*3 times the font-size of the parent element*/
width: 2em; /*2 times the font-size of this element*/
}
Originating also from typography, the em unit depends on the type of property; For typographical properties (such as font-size, font-weight,...etc.), it is inherently relative to its parent element's font size whereas, for other properties, it's relative to the font size of the element itself.
Check the code sample above to understand better!
Rem
#rem {
font-size: 2rem; /*2 times the root font-size (=32px)*/
}
Similar to the em unit, rem is relative to font sizes, however, it depends solely on the root font size, which is 16 pixels in most modern browsers.
Vw and Vh
.vw, .vh {
width: 90vw; /*90% of the viewport's width*/
height: 20vh; /*20% of the viewport's height*/
}
Both these units are alike in the fact that they rely on viewport dimensions, which is what a user can see from the webpage at a specific moment, and which varies from one device to another.
They are so popular for building responsive websites and web apps.
Vmin and Vmax
.vmin, .vmax{
width: 50vmax; /*50% of the biggest viewport's dimension*/
height: 50vmin; /*50% of the smallest viewport's dimension*/
}
As described accurately by the code sample above, avmin is equivalent to 1% of the minimum between the viewport's width and height whereas a vmax is used to describe 1% of the greater of these dimensions.
Other Units
In most cases, mastering the aforementioned units is enough for any web developer. However, there are a few more available unit options in CSS and learning about them wouldn't hurt. These options are:
.others{
/*ex: Height of the letter "x" in the font*/
font-size: 1ex;
/*ch: Width of the digit "0" in the font*/
font-weight: 1ch;
/*lh: Line Height of the element*/
line-height: 1lh;
/*rlh: Line height of the root element*/
line-height: 1rlh;
/*vi: 1% of the inline direction (horizontal:1vh; vertical:1vw)*/
width: 1vi;
/*vb: 1% of the block direction (vertical:1vh; horizontal:1vw)*/
height: 1vb;
/*svw, svh: 1% of the small viewport's width/height*/
margin: 1svw 1svh;
/*lvw, lvh: 1% of the large viewport's width/height*/
border: 1lvw 1lvh;
/*dvw, dvh: 1% of the current (dynamic) viewport's width/height*/
padding: 1dvw 1dvh;
}
Conclusion
Measurements are a main aspect of design, and CSS is no exception to that. We can't properly design a responsive webpage without knowing why and when to use each unit, the same way an architect can't build without carefully choosing the materials.