Pixel (PX), we are sure you’ve heard of it. But what about EM, REM, or VH? What about FR? No? When working with CSS, you can specify the length or size of properties, such as width, height, margin, padding, gap, font size, and many others, using different units of measure. CSS allows you to use PX, EM, REM, %, VW, or VH, FR, and even other units. But what do these units really mean, and when and why you should choose one over another?
Absolute vs relative units
It is time to go back to elementary school and remember the difference between absolute and relative units.
Since we will be explaining the length units, let’s start with saying that a length is a number followed by a length unit, such as 10 cm, 5px, or 2em.
The absolute length units are fixed – the length that an absolute unit expresses always appears exactly the same size, no matter what is the size of a screen. An inch or a centimeter is always the same size. Absolute units are not relative to anything else and are generally considered to always be the same size, this is why we do not apply absolute length units for screen use because screen sizes vary so much. However, we use them, if the output medium is known, such as for printing purposes.
Absolute units are:
- inches (in)
- centimeters (cm)
- points (pt)
- picas (pc)
- pixels (px)
Pixels are special
At this point, it is important to bring out that pixels are considered absolute units, but are actually relative according to the resolution of the viewing device and DPI. For low-dpi devices, 1px is one device pixel of the display. (DPI stands for dots per inch and means how a computer mouse measures physical distance. The higher the DPI, the sharper the image. The higher the DPI, the faster the cursor moves and the more sensitive it feels. When working with printers and screens with high resolution, 1px assumes multiple device pixels.
However, on the device itself, the pixel unit is fixed – absolute – and does not change based on any other element.
When working with responsive sites (who isn’t working with them?), pixels can be problematic. However, if you have elements that should maintain the same size, using pixels as a unit is a good choice.
Relative units, on the other hand, express a length or a size that is relative to another length property, this can be the size of the browser window size (aka viewport), or even the parent element’s font. In general, developers go for relative units because they better adjust to different media – relative units enable the size of the font and other element scales relative to everything else on the page. Unlike pixels, relative units like %, or rem, and em are often applied with a responsive design – their main property is scaling better on different devices because they scale up and down according to another element’s size.
- em is relative to the font-size of parent element (3em = 3 times the size of the current font)
- rem is relative to font-size of the root element (HTML tag) and both em and rem are practical in creating a layout that is scalable
- vw is relative to 1% of the width of the browser window size (aka viewport)
- vh is relative to 1% of the viewport’s height
- % is relative to the parent element
There are obviously other absolute units such as millimeters (mm), and relative units, such as ex, ch etc., but the ones we mentioned in the lists above are the ones that are used most often.
Do we always need to specify CSS units?
Yes! For non-zero values – you always have to specify CSS units, because there are no defaults. If you do not declare a unit, that’s treated as an error. If on the other hand, the value you’re working is a 0, it is logical to skip a unit. After all, 0 centimeters is 0 inches and 0 picas and 0 pixels.
Can we convert absolute to relative sizes and vice versa?
Yes, and there you can find converters online, but you should understand how the conversion works and how relative units calculate the size from the base. The base for calculation is 16 px by default because that is the font size most browsers apply. However, if you change that base (you set a base size for the HTML tag through CSS), then that changed base becomes the basis for calculating relative units for the rest of the page.
So, let’s start with the default of 16px and see how this is converted to em and rem relative units.
1em = 16px (1 * 16)
5em = 80px (5 * 16)
.4em = 6.4px (0.4 * 16)
1rem = 16px (1 * 16)
5rem = 80px (5 * 16)
.4rem = 6.4px (0.4 * 16)
100% = 16px
500% = 80px
40% = 6.4px
Ok, but what if you want to change the default size, let’s say to 10px? Because we are dealing with relative units, the new sizes would end up different, however, you will keep the relative scale of each element that you’ve specified:
1em = 10px (1 * 10)
5em = 50px (5 * 10)
.4em = 4px (.4 * 10)
1rem = 10px
5rem = 50px
.4rem = 4px
100% = 10px
500% = 50px
40% = 4px
What is the difference between EM and REM?
Wait a minute, REM and EM look the same! Yes, we know, if you look at the numbers above, they do look the same, but they are not. Since, both REM and EM are relative units and as already mentioned in the explanation above, they are based on the inheritance – the connection to the parent element, however:
- the base of REM is the font size of root element (HTML)
- the base of EM is the font size of the parent element
In practice this explains like this:
– child element that uses REM will use the HTML root size as its calculation point – it has no effect on size if you specify the parent element of that child.
– child element that uses EM will use the parent element size as its calculation point and if that parent element is of a different size compared to the root element, obviously the EM calculation will not be the same compared to the root size. In practice that would mean that all child elements that use EM can end up being a size that you didn’t expect. The biggest advantage of using EM as a unit is manipulating the sizing of a specific area of a page with nested elements because EM unit gives you great control when you’re dealing with elements that have a parent-child relationship.
In general, EM and REM units are primarily used when sizing fonts.
What is the difference between VW, VH and %?
VW, VH and % are primarily used for properties such as width and height, spacing, margins and padding, but what is the difference between them?
- VW stands for viewport width aka viewable screen’s width, meaning 100VW equals 100% of the screen’s width, which is the entire width of the screen, 70VW is 70% of the screen’s width and so on.
- VH stands for viewport height aka viewable screen’s height, meaning 100VH equals 100% of the screen’s height, which is the entire height of the screen, 40VH is 40% of the screen’s height and so on.
- % is not dependant of the viewport’s size. % simply matches a percentage of the parent element’s size.
Let’s take a look at a few examples so we can better understand how VW, VH and % units behave.
100% represents 100% of the height or width of anything. For example, if we work with a parent div that is 1000px tall, and a child div that is 100% high, in theory that child div could be much taller or much smaller than the height of the viewport, even though the child div is set at 100% height. % unit is not dependant of the viewport’s size – it simply matches a percentage of the parent element’s size. If we, for example, set that child div to 100VH, that child div will fill up the entire height of our screen, however that does not mean necessarily mean that child div with 100VH will be taller than the parent.
A message to take home: VH and VW units aka viewport units are calculated as a percentage of the current browser viewport size. Yes, they are very similar to % units, however there is a difference. Percentage units are calculated as a percentage of the parent element, and that my darlings may be very different than the viewport size.
FR unit to help us create flexible grid tracks
By now, you have learned you can use absolute and relative units. When CSS introduced grid layout, it also presented an additional length unit, called the FR unit, which stands for a fraction of the available space in the grid container. When working with a grid layout you can define lengths exclusively with fractions or you can mix fractions and absolute or relative sizes. For example, if you define one track to be 100px wide and you assign the other four tracks to be in fractions of the same width, the fixed width (100px) will be deducted from the space that is available, then the remaining space will be divided into four flexible tracks (because we defined four tracks with fr units of the same width). So, the width of these four flexible tracks defined with fr units will widen or shrink, which depends on the space that remains after taking away the fixed size (100px) of the first column. In this article, we won’t dive very deep into fr units, but if you want to learn more about it, you should take a look at the article The fr unit and the css grid layout.