This article was originally published on webinuse.com
In CSS every property must have some value. Sometimes it’s a path, sometimes it’s color, sometimes it’s a string, but sometimes it’s a measurement unit. Today we are talking about the CSS units for measuring the length, width, and height of an element.
There are a lot of CSS units that can be used for measurement, like: px, em, rem, vh, vw, etc. We can divide all these units into two groups:
- Absolute units
- Relative units
1. Absolute CSS units
Absolute units are the same on any device, regardless of size and settings. Depending on the purpose of our design we may use different units. Since they are not scaling with device size, absolute CSS units are not good for responsive design, while they are excellent for print.
px
px stands for pixel and the visual size of a pixel varies depending on the screen resolution and quality. So 16px is not, visually, the same size on every screen. E.g. take bigger screens like 27″ or larger with 2560x1440px or even higher resolutions. If our text is 16px it will seem much smaller than it really is, and as a result, our UI might seem broken, which, then, affects UX.
Regardless of this fact, a lot of developers still use px as their standard unit of measurement.
mm/cm/in
We know these units from the real world, and it is not often that we see them used in the web world. But, these units are excellent for preparing our page for print. Because mm, cm, in are always the same, we can use @media print query to implement those CSS units only when printing.
pt/pc
There are also pt (point), pc (pica) units, which are rarely used. 1pt is 1/72 of an inch and 1pc 12 points.
NOTE: Even though mm, cm, in, pt, pc are physical units there is no real guarantee that 1cm in CSS will be equal to 1cm on paper. Regardless, those units are better for printing than others we are going to talk about.
2. Relative CSS Units
Unlike Absolute units, Relative units change depending on screen size and/or settings. Relative units are excellent for creating responsive design and they are excellent for screens, bad for printing.
Percentage (%)
What px is to absolute units, % is to relative units. We can call this a “legacy” unit. They are pretty easy to use. 1% refers to 1% of parent’s size.
In the example below, we have div#parent that is 400px wide and 200px tall. We also have div#child that is 25% wide, which equals to 125px and 30% tall, which equals to 60px.
em/rem
em units and rem units are almost the same. Difference is that em is relative to element’s font-size, while rem are relative to the root element’s font-size.
em
1em is equal to 100% of element’s font-size. So, if element’s font-size is 30px than 1em is same. 2em inside same element means 60px. Using em for font-size property may not be the best idea, but using em for margins, paddings and widths is good.
rem
1rem is equal to 100% of root element’s font-size. Standard font-size built-in browser is 16px if you do not change it, and we will see in a moment why it is not smart to change it.
Rem unit is excellent for responsive design and it is excellent for accessibility (this is why we should not change root font-size). Let’s say we have a user who changed (in browser) root’s font-size from 16px to 25px. If we used rem, our design will scale accordingly, and our UI will be intact, hence our UX will be the same for every user.
ex/ch
Similar to em and rem, ex and ch CSS units are base on the font-size. However, these units are also relative to font-family. ch stands for character unit and it is defined by the width of character “0”. The ex unit is defined as “the current x-height of the current font or the half of 1em”, as per this freeCodeCamp’s article. The height-x of a given font is the height of the lowercase “x” of that font. It is often the middle mark of the font.
lh/rlh
lh stands for line-height, and rlh stands for root line-height. Same as em and rem, lh is “equal to the computed value of line-height” of the element, while rlh is “equal to the computed value of line-height” of the root element. If line-height: 20px then 1lh or 1rlh is equal to 20px, depends if we are talking of the element’s line height or the root element’s line height. These units are useful for aligning icons with text, according to the css-tricks.com article.
vw/vh
vw stands for viewport width and vh stands for viewport height. This means that these units depend on the screen size. Element of 50vw will take 50% of the screen’s width, regardless of screen size and resolution. The same goes for vh. Element of 50vh will take 50% of the screen’s height, regardless of screen size and resolution. We can use this for the width of the sections, which can prove like an excellent choice for responsive design.
vmin/vmax
Unlike vw and vh, vmin and vmax rely on the maximum width and a minimum height of the screen, or vice versa. For example, if screen size is 1920px by 1080px, then 1vmax is 19.2px and 1vmin is 10.8px.While, if the screen is 720px by 1080px, then 1vmin is 7.2px and 1vmax is 10.8px.
To calculate vmin and vmax we take screen size and then divide both width and height by 100. Whichever is smaller that is 1vmin and whichever is larger it is 1vmax.
Conclusion
There are more units that we have not discussed here. We chose these units because they are, either, common or useful. Almost any of these units will “do the job”. But there are some units that are better for some things than others. For additional information on CSS units, we can use Level 4 spec for CSS values.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to merge objects in JavaScript?
Top comments (0)