Sizing Units

The CSS Podcast - 008: Sizing Units

The web is a responsive medium, but sometimes you want to control its dimensions to improve the overall interface quality. A good example of this is limiting line lengths to improve readability. How would you do that in a flexible medium like the web?

For this case, you can use a ch unit, which is equal to the width of a "0" character in the rendered font at its computed size. This unit lets you limit the width of text with a unit that's designed to size text, which in turn, allows predictable control regardless of the size of that text. The ch unit is one of a handful of units that are helpful for specific contexts like this example.

Numbers

Numbers are used to define opacity, line-height and even for color channel values in rgb. Numbers are unitless integers (1, 2, 3, 100) and decimals (.1, .2, .3).

Numbers have meaning depending on their context. For example, when defining line-height, a number is representative of a ratio if you define it without a supporting unit:

p {
  font-size: 24px;
  line-height: 1.5;
}

In this example, 1.5 is equal to 150% of the p element's computed pixel font size. This means that if the p has a font-size of 24px, the line height will be computed as 36px.

Numbers can also be used in the following places:

• When setting values for filters: filter: sepia(0.5) applies a 50% sepia filter to the element.
• When setting opacity: opacity: 0.5 applies a 50% opacity.
• In color channels: rgb(50, 50, 50), where the values 0-255 are acceptable to set a color value. See color lesson.
• To transform an element: transform: scale(1.2) scales the element by 120% of its initial size.

Percentages

When using a percentage in CSS you need to know how the percentage is calculated. For example,width is calculated as a percentage of the available width in the parent element.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

In the preceding example, the width of div p is 150px, assuming that the layout uses the default box-sizing: content-box.

If you set margin or padding as a percentage, they will be a portion of the parent element's width, regardless of direction.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

In the preceding example, both the margin-top and padding-left will compute to 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

If you set a transform value as a percentage, it is based on the element with the transform set. In this example, the p has a translateX value of 10% and a width of 50%. First, calculate what the width will be: 150px because it is 50% of its parent's width. Then, take 10% of 150px, which is 15px.

Dimensions and lengths

If you attach a unit to a number, it becomes a dimension. For example, 1rem is a dimension. In this context, the unit that is attached to a number is referred to in specifications as a dimension token. Lengths are dimensions that refer to distance and they can either be absolute or relative.

Absolute lengths

All absolute lengths resolve against the same base, making them predictable wherever they're used in your CSS. For example, if you use cm to size your element and then print, it should be accurate if you compared it to a ruler. Note that physical units, such as cm and in, won't reliably display at those sizes on screens due to variations in pixel sizes. Physical units are best used for print style sheets where they will be more reliable.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

If you printed this page, the div would print as a 10x5cm black rectangle. Keep in mind, CSS is used not only for digital content, but also to style print content. Absolute lengths can really come in handy when designing for print.

Relative lengths

A relative length is calculated against a base value, much like a percentage. The difference between these and percentages is that you can define sizes based on a relevant base size, such as the default font size or window dimensions. This means that CSS has units such as ch that use the font's size metrics as a basis, and vw which is based on the width of the viewport (your browser window). Relative lengths are particularly useful on the web due to its responsive nature.

Font-size-relative units

CSS provides helpful units that are relative to the size of elements of rendered typography, such as the size of the text itself (em units) or width of the typefaces characters (ch units).

Viewport-relative units

You can use the dimensions of the viewport (browser window) as a relative basis. These units portion up the available viewport space.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In this example, the div will be 10% of the viewport's width because 1vw is 1% of the viewport width. The p element has a max-width of 60ch which means it can't exceed the width of 60 "0" characters in the calculated font and size.

Alternative viewport-relative units

The value of viewport-relative units remains the same as long as the viewport size does not change. However, mobile browsers commonly show or hide UI elements to show the most content possible on small screens, without changing the calculated size of the viewport. You can use alternatives to the viewport-relative units to account for these changes to the visible area.

Container-relative units

You can use the dimensions of an element's container as a relative basis. These units portion up the available container space. These are useful inside of container queries to set font sizes based on the space available.

Miscellaneous units

There are some other units which have been specified to deal with particular types of values.

Angle units

In the color module, we looked at angle units, which are helpful for defining degree values, such as the hue in hsl. They are also useful for rotating elements within transform functions.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Using the deg angle unit, you can rotate a div 90° on its center axis.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Resolution units

In the previous example the value of min-resolution is 192dpi. The dpi unit stands for dots per inch. A useful context for this is detecting very high resolution screens, such as Retina displays in a media query and serving up a higher resolution image.

Check your understanding

Test your knowledge of sizing

Resources

• CSS Spec Values and Units Level 4
• Sizing and Units on MDN
• All About Ems
• A percentages explainer