CSS Units Explained
Each CSS property has a specific value type that determines which kind of values are allowed. Many CSS properties require that a length type is assigned to them.
Whether you want to specify the width of a div, the height of an image, or the font size of text, CSS units come into play. CSS units are crucial for specifying the size of an element or its content.
Some CSS properties that take Length Values are, for example:
In CSS, different units are used for setting a length or a spacing.
Mainly there are two types of units in CSS: absolute units and relative units. Does this mean that a specific unit must be used for individual CSS properties? No! Properties not have anything to do with units. If a value in px is valid for a property, then any other length unit is also allowed.
Relative Units
-
em (Equal to M)
em is roughly based on the width of the capital letter M of the currently used font. -
rem (Root em)
rem corresponds to em, related to the root element of the web page, i.e. related to the element html. -
ex (Equal to x)
ex is based on the height of the lowercase letter x of the current font. -
ch (Character Width)
ch is based on the width of the character 0 (zero) of a font. -
vw (Viewport Width)
vw is a percentage value from 0 … 100 relative to the width of the browser viewport. -
vh (Viewport Height)
vh is a percentage value from 0 … 100 relative to the height of the browser viewport.
Absolute Units
-
px (Pixel)
The px is the smallest output unit of a display to be shown with sharp edges. The px is relative from device to device, but absolute related to a specific device. -
pt (Point)
pt stands for point and is mainly used for printing purposes. 1pt = 1/72 inch or 1,33px. -
pc (Pica)
pc stands for pica and is primarily used for printing. 1pc corresponds to 12pt or 1/6 inch. -
cm (Centimeter)
1cm corresponds to 37.8px -
mm (Millimeter)
1mm corresponds to 3.78px -
in (Inch)
1in or 1″ is equal to 2.54cm.
Relative Units of Length
em (Equal to M)
The em unit is a relative length unit that is particularly important for web page design. The em is not defined by the width of the upper case letter M, but by the current font size in pixels. Note that the length changes when the font size changes.
By default, 1em is 16 pixels wide, which is roughly the same size as the uppercase letter M. However, this is only true if the user has not changed the browser's default font size. When the user changes the font size in the browser settings, the font size specified there corresponds to 1em.
1em corresponds to 100%
If the font-size of the element itself is defined in em, the em unit refers to the font size of the parent element. Values less than 1em reduce the font size, and values greater than 1em enlarge the font size.
Lengths defined in em use the computed font size of the element on which the property is declared.
I strongly recommend not to specify the font size for the HTML or BODY tags in px. This would override the user's default setting and would have a negative impact on accessibility.
rem (Root em)
The rem unit is a close relative to the em unit. If the font size of the root element (most <html> or <body>) is not set, its value depends on the default font size of the browser.
By using the rem unit, all font sizes on the web page depend on a single font size. If you change the font size of the root element, all other font sizes will change to match as well.
Like em, rem corresponds to 16 pixels by default, unless the user has changed the default font size in the browser settings.
The rem length unit is only rarely used in practice.
ex (Equal to x)
The ex is a relative length unit based on the height of the lowercase letter x. An ex corresponds to the distance between the baseline and the centerline of a specific font.
This is a unit of length that is hardly ever used for real web projects.
vw (Viewport Width)
The vw unit is a special length unit that refers to the viewport width and doesn't depend on the width of the element.
The vw unit can be used to set the font size relative to the viewport width. Keep in mind that the wider the viewport, the larger the font size will be.
1vw corresponds to 1% of the viewport width.
vh (Viewport Height)
The vh unit is a special length unit that refers to the viewport height. It doesn't depend on the height of the element itself.
The vh unit can be used to set the font size relative to the viewport height. Keep in mind that the higher the viewport, the larger the font size will be.
1vh corresponds to 1% of the viewport height.
Absolute Units of Length
px (Pixel)
The base unit for any type of length measurement is the CSS pixel px. It is interesting to note that a CSS pixel is not the same thing as a screen pixel. In CSS, px is a length unit intended to represent a single point on the screen.
By definition, a pixel is a barely visible point on the screen an arm's length away from the viewer.
A CSS pixel is relative to screen resolution. Relative to a particular screen, it is an absolute unit. If the screen resolution is changed, the size of the pixel will change as well.
What happens if a user changes the default font size in their browser? A font size that is defined using the px unit will not be changed. As a result, the user's default settings are not respected. This is not a good way to ensure a positive user experience.
Lengths defined in px are not affected by the font size or the size of the parent element. For a flexible layout for different devices, em is more suitable. For this reason, avoid using px, especially in Responsive Web Design.
pt (Point)
pt stands for point and is a very common unit outside of CSS, especially for printing. A separate "print.css" file is often used for optimal printing. In this stylesheet file, the pt unit is more appropriate than the px unit.
A standard font size of 12pt is generally recommended for printing.
The pt unit is not recommended for displaying the web page on a computer screen or smartphone display.