skip to content

Units on the Web

In CSS, units are used to define the size, distance, and other dimensions of elements on a web page. There are several types of units in CSS:

Absolute length units

These units are fixed and do not change with screen resolution or zoom level. They include:

Unit Name Equivalent
1cm Centimeters 37.8px
1mm Millimeters 3.78px
1Q Quarter-millimeters 0.95px
1in Inches 96px
1pc Picas 16px
1pt Points 1.33px
1px Pixels 1px

Pixel is the most commonly used absolute unit in CSS. It represents a single dot on a screen and is often used for precise measurements.

You will rarely have use for other absolute units of length on the web, though there are cases where you might want to create a layout that translates well on print. Under those conditions, real world measurements like inches, centimeters and even millimeters might come in handy.

Examples

The following examples have their width set to the respective units and measurements:

3cm
30mm
150Q
1.5in
8pc
100pt
100px

Relative length units

These units are relative to other elements on the page or to the viewport size. They include:

Unit Relative to
vw % of the viewport's width
vh % of the viewport's height
vmin % of the viewport's smaller dimension
vmax % of the viewport's larger dimension
vb % of the size of the initial containing block in the direction of the root element's block axis
vi % of the size of the initial containing block in the direction of the root element's inline axis
svw svh % of the small viewport's width and height, respectively
lvw lvh % of the large viewport's width and height, respectively
dvw dvh % of the dynamic viewport's width and height, respectively
% % of the parent element

Examples

Note how(try resizing your browser window) the width of these elements change according to the size(height and width) of the viewport(your browser window):

10vw
10vh
10vmin
10vmax
10vb
10vi
10svw
10svh
10lvw
10lvh
10dvw
10dvh
10%

Font-relative length units

These units are used to define the size of text, and are relative to the font-size or line-height of the element. They include:

Unit Relative to
em Font size of the parent
rem Font size of the root element
lh Line height of the element
rlh Line height of the root element

Examples

These units are commonly used to define the font-size and width of elements:

10em
10rem
10lh
10rlh

em and rem are the two relative lengths you are most likely to encounter when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them.

The below examples provide a demonstration.

To start with, we set 16px as the font-size on the <html> element:

html {
    font-size: 16px;
}

Thanks to the cascading nature of CSS, this means that the default font-size of our document is now 16px and is thusly inherited by all elements that don't otherwise have a specified font-size.

We can now use em and rem to directly reference this unit of measurement, as we've set 1em & 1rem = 16px.

So we can write CSS like this:

p {
    font-size: 2rem /* or 2 * 16px = 32px */
}

Say we want to change this for a specific element, but not everywhere on the page. All we need to do in this case, is reference the parent element(with em) instead of the root element(with rem) and update the pixel value of the parent accordingly:

.text-block {
    font-size: 20px
}
.text-block p {
    font-size: 2em /* or 2 * 20px = 40px */
}

em and rem are very powerful tools when attempting to scale elements in relation to one another.

Other length units

CSS also supports other units such as the ex unit (relative to the x-height of the font), the ch unit (relative to the width of the "0" character in the font), and the fr unit (used in CSS Grid Layout to distribute available space).

Unit Description
fr Used in CSS Grid Layout to distribute available space
ex Relative to the x-height of the the element's font
ch The advance measure (width) of the glyph "0" of the element's font.

fr-unit

With CSS Grid Layout, we get a new flexible unit: the fr unit. This is a fractional unit which means that 1fr takes up 1 part of the available space.

In the following example we're working with 4 columns which in turn means that 1fr = 25%

.grid {
    display: grid;
    gap: 5px;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-template-rows: 100px 200px 100px;
    grid-template-areas:
        "head head . side"
        "main main . side"
        "footer footer footer footer";
}
head
←2fr→
main
←2fr→
←1fr→
side
←1fr→
footer
←4fr→

Conclusion

While you can accomplish a lot with knowledge of just a few of the units available to you, it is very beneficial to have a grasp of them all.

Without insight into the different unit types, you couldn't do fun stuff like fluid typography:

html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}