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));
}