Use responsive units over fixed units when possible
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
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.
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.
