Use responsive units over fixed units when possible

Applicable Role(s): Developer

Overview

Digital content can be presented to users on a variety of devices; users might also have additional display preferences for those devices like larger font or more spacing. The content should adapt to those preferences without overflowing, getting cut off, or not adjusting its font size.

Best Practices

Use relative units for font size rather than absolute units

Absolute units like pixels (px) and points (pt) isn't recommended for setting font sizes in web content—this can override a user's browser preferences, preventing the text from getting larger or smaller as they prefer. Relative units like em, rem, or named fonts should be used for font size. Learn more about relative units.

Use relative units for width and height

Relative units should also be used for setting size properties like width and height. This will better allow a text container to expand, so if a user changes displays, it will fit the display of the user's device or browser.

Ensure content doesn't overlap or disappear up to 200% font size

If a user needs to increase the font size, no page content or controls should disappear or become clipped if increased up to 200% of the page's text size.

Pattern Examples

Font sizes

Fixed font size

p {
  font-size: 20px;
}

p {
  font-size: 18pt;
}

Responsive font size (more accessible)

p {
  font-size: 1.3em;
}

p {
  font-size: 1.3rem;
}

p {
  font-size: larger;
}

Width/Height Properties

Fixed width/height

.text-container {
  width: 200px;
  height: 100px;
}

Responsive width/height (more accessible)

.text-container {
  width: 75%;
  height: auto;
}

.text-container {
  width: 90vw;
  height: 20vh;
}

Absolute vs. Relative Units on a Live Page

Default

Image

Absolute Units

Browser font size set to 32, page font size set at 16px. The text size should increase, but because the font size is absolutely declared, it won't change size.

Image

Relative Units

Browser font size set to 32, page font size set at 1.375rem. The font adjusts to 1.375 times larger than the base font size of 32.

Image