Decision Use relative units in CSS for resizable content

accepted

Using relative units improves accessibility by ensuring that text and content does not overlap when zooming web pages or changing the base font size.

Decision

Use relative length units (such as rem) for all applicable properties.

Exceptions

Absolute length units should be used for the following properties, instead of relative ones.

  • border
  • box-shadow
  • outline

A unitless value should be used for line-height.

Consequences

Pages will be more accessible as fonts will respect browser preferences and font sizes will not compound with each other. The same is true for content with other relative units.

Additional Resources