In this article, we’ll explore the four broad categories of CSS sizing units. We’ll look at what the sizing units are for, where they work best, and how to choose the best ones in each scenario, so that our layouts will be optimized across a range of media and device dimensions.
About CSS Sizing Units
CSS offers several ways to specify the size or length of elements — some more intuitive than others. CSS units fall into four broad categories:
- absolute units, such as
cmandpx - font-relative units, such as
emandch - viewport-relative units, such as
vwandvmin - container-relative units, such as
cqwandcqh
We’ll look at each type of CSS unit in this piece.
Before continuing, let’s refresh your memory about some terms you’ll see in this piece: specified value
, computed value
, and used value
.
- Specified value is the value of a CSS property as indicated in the document’s stylesheet.
- Computed value is the value of a property after the browser applies the rules of the cascade, inheritance, and the property’s definition.
- A used value is the value of a property after the browser makes its final adjustments and conversions. During this process, relative units get converted to absolute ones. For screened media (that is, devices with screens), physical units get converted to their pixel equivalents.
You’ll see these terms a few times in this article.
Absolute Units
Absolute units are anchored to specific, media-dependent measurements. For physical media such as paper, absolute CSS units are anchored to their corresponding physical units. For screened media, absolute units are anchored to pixels. One pixel is roughly 1/96th of an inch.
Absolute units include in, cm, mm, and Q, or inches, centimeters, millimeters, and quarter-millimeters, respectively. Point (pt) and pica (pc) are also absolute units. They have their roots in physical typesetting and desktop publishing. Each pt equals 1/72th of an inch, while 1pc equals 1/6th of an inch. Table 1 shows absolute units and their equivalents.
| Unit | Name | Equivalent to |
|---|---|---|
| cm | centimeters | 1cm ≈ 37.8px |
| mm | millimeters | 1mm ≈ 3.78px |
| Q | quarter-millimeters | 1Q ≈ 0.944px |
| in | inches | 1in = 96px |
| pc | picas | 1pc = 16px (1/6 of 1 inch) |
| pt | points | 1pt ≈ 1.33px (1/72th of 1 inch) |
| px | pixels | 1px = 1/96th of 1 inch |
When the specified width of an element is 2in, its printed width will be two inches. On screens, however, 2in results in a computed value of 192px.
Absolute units are not affected by font metrics, inherited property values, or the viewport. They work best when you know physical properties of the output medium, as with paged media.
Avoid using absolute values with the font-size property. Some low-vision web users increase the default font size of their browser to improve legibility. Absolute values, including px, do not scale with that change. Instead, use font-relative units. We’ll discuss them in the next section.
Font-relative Units
Font-relative units use font metrics to calculate the dimensions of an element. This may be the computed value of the font-size, or line-height properties. Or they may be computed relative to the size of a particular glyph, as with the ch, ex and ic units.
A word of caution when using font-relative units: they can trigger a font download if the font isn’t already loaded. This can cause layout shifts on slow networks or networks with intermittent availability.
Font-relative units can be categorized into two types: local
and root-relative
.
-
Local font-relative units calculate size relative to the computed value of the
font-sizeproperty for the element. Since thefont-sizeproperty is an inherited property, this usually means it’s relative to thefont-sizeproperty value of the nearest ancestor element. -
Root-relative units calculate size relative to the document’s root element — typically the
font-sizevalue for thehtmlelement.
em and rem
You’re probably familiar with the em unit and its root-relative counterpart rem. The em unit represents a proportion of the computed value of the font-size property for the element. For example, 1em is 100% of the value of font-size. A value less than 1, such as 0.5em works out to 50% or half the value of font-size. Values greater than 1 act as a multiplier.
See the Pen
How em units work by SitePoint (@SitePoint)
on CodePen.
In the preceding example, the computed font size for h1 is 48 pixels. Its parent element, article, has a specified font-size value of 24px. The h1 inherits that value, but 2em tells the browser to make the font size of the h1 twice the proportion of article.
The rem unit, on the other hand, calculates size relative to the font-size value of the root element.
See the Pen
How rem units work by SitePoint (@SitePoint)
on CodePen.
Here, the h1 has a computed font size of 32 pixels. Changing the font-size value for article doesn’t change the size of the h1, even though it’s a descendant.
If you need a refresher on em and rem units, try The Power of em Units in CSS and Rem in CSS: Understanding and Using rem Units.
Both em and rem sizes are lengths calculated relative to the document’s default font size. The ch, ex, and ic units and their root-relative counterparts rch, rex, and ic are calculated relative to the size of the zero, lowercase x, and 水 glyphs respectively.
The post An Overview of CSS Sizing Units appeared first on SitePoint.