Units in CSS
While designing your website, many times you will think about which units should I use for this element. CSS units are very crucial for designing a website, these are used for padding, margin, border, font size, etc. Hence, it becomes very essential to know and utilize CSS units effectively to effectively manage your design goals.
Absolute vs Relative Units
Units in CSS are categorized as absolute units and relative units.
Absolute Units
Absolute Units are fixed units that do not change with a change in parent element size or window size.
In other words, a property set with absolute units will remain and look the same irrespective of the screen size. Hence it will look the same on both phone and Desktop.
Absolute units are used where responsiveness of the project is not desired. For instance: a desktop-only program, print copy, etc.
px:
1 px = 1/ 96 inch
pt:
1 pt = 1/ 72 inch
pc:
1 pc = 12 pt = 1/ 6 in
cm:
1 cm
mm:
1 mm
in:
1 inch
Note: The most commonly used absolute unit for screens is Pixel (px).
Relative Units
Relative Units are used for responsive screen design, i.e. for the projects that scale on multiple screens. Objects are designed with relative units scale relative to their parent object, viewport, or window size.
Responsive sites are designed using relative units because it eliminates the need to specify different units for different screen sizes.
rem:
rem stands for Relative to the font size of the root (i.e. ). It is often used for font size, padding, margin, etc.
em:
em stands for relative to the current font size of the element. It is often used to set the font size of the child element relative to the font size of the parent element.
%:
% stands for relative to the parent element’s value for that property. It is often used to set padding, margin, width, and height of the child element relative to the parent element’s value for that property.
vw:
vw stands for relative to the viewport width; where 1 vw = 1/ 100 of the viewport width. It is used to set the width of the object relative to the viewport width.
vh:
vh stands for relative to the viewport width; where 1 vh = 1/ 100 of the viewport height. It is used to set the height of the object relative to the viewport width.
vmin:
vmin stands for relative to the minimum of the vw and vh; where vmin = 1/ 100 of a minimum of vw and vh
vmax:
vmax stands for relative to the minimum of the vw and vh; where vmax = 1/ 100 of a maximum of vw and vh
ch:
ch stands for Number of characters; where 1 ch = width of “0” in the font style of that character. It is generally used to set the width of a text container according to the number of characters in a text.
ex:
ex stands for relative to the height of the lower case “x” of that font style i.e., 1 ex = height of the lower case “x” of that font style. Very rarely you will come across this unit, but a good use for this unit is for a font’s mid-section. For instance: to set the line-height of a text item, twice the size of the height of that > font’s lowercase “x”.
Note: The examples given above for a unit are not its only use cases. One can use any relative unit for any task, however, some are more suitable for the job than others.
A good rule of thumb for choosing which CSS Unit you should use in your project is to ask yourself the following two questions: Do I want this project to be responsive? If yes, then what should be the reference value for the object that is going to scale for different viewport sizes?