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 allows you to 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 above 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 above snippet, 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.

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.

Unit Name Equivalent to
cm Centimeters 1cm = 96px/2.54
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px = 1/96th of 1in

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 contextually size elements. This means that CSS has units such as ch that use the text size 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).

unit relative to:
em Relative to the font size, i.e. 1.5em will be 50% larger than the base computed font size of its parent. (Historically, the height of the capital letter "M").
ex Heuristic to determine whether to use the x-height, a letter "x", or `.5em` in the current computed font size of the element.
cap Height of the capital letters in the current computed font size of the element.
ch Average character advance of a narrow glyph in the element's font (represented by the "0" glyph).
ic Average character advance of a full width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph.
rem Font size of the root element (default is 16px).
lh Line height of the element.
rlh Line height of the root element.
The text, CSS is 10x great with labels for ascender height, descender height and x-height. The x-height represents 1ex and the 0 represents 1ch

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.

unit relative to
vw 1% of viewport's width. People use this unit to do cool font tricks, like resizing a header font based on the width of the page so as the user resizes, the font will also resize.
vh 1% of viewport's height. You can use this to arrange items in a UI, if you have a footer toolbar for example.
vi 1% of viewport's size in the root element's inline axis. Axis refers to writing modes. In horizontal writing modes like English, the inline axis is horizontal. In vertical writing modes like some Japanese typefaces, the inline axis runs top to bottom.
vb 1% of viewport's size in the root element's block axis. For the block axis, this would be the directionality of the language. LTR languages like English would have a vertical block axis, since English language readers parse the page from top to bottom. A vertical writing mode has a horizontal block axis.
vmin 1% of the viewport's smaller dimension.
vmax 1% of the viewport's larger dimension.
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.

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

Which of the following are valid dimensions?

cm
Centimeters, a valid absolute dimension.
ui
User interface is not a dimension in CSS.
in
Inches, a valid absolute dimension.
8th
Not a CSS dimension
px
Pixels, a valid absolute dimension.
ch
Character units, a valid relative dimension.
ux
User experience is not a dimension in CSS.
em
Letter 'M' units, a valid relative dimension.
ex
Letter 'x' units, a valid relative dimension.

How are absolute and relative units different?

Absolute values can't change but relative units can
Absolute values can change, but the base they calculate against can't.
An absolute length is calculated against a single shared base value, where a relative unit is compared against a base value that can change.
Relative units are more adaptive and fluid because of their contextual awareness, but there's a power and predictability to absolute units that can be foundational for certain designs.

Viewport units are absolute.

True
They may feel absolute, but they're relative to a viewport, which could be an iframe or webview, and isn't always representative of a device screen size.
False
They are relative to the document window they were created in, which may or may not be the same as a device screen.

Resources