Font sizes and resize text

The WCAG 2.0 requirements for resizing text are quite loose.

Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA).

That’s it.

These “200 percent” are up to debate (not sufficient) and most likely this requirement will be changed in the WCAG 2.1 specifications.

Best practice Best practice

The best practice here is: make sure text can be enlarged without breaking the design; without text becoming unreadable or hidden. Think of line heights and overflows. Test this in various browsers and screen widths. Don’t make the font too small to begin with. A good read on this is 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake.

There is much research and debate about whether text elements should be defined in pixels, rem, rem or % units for resizing, and whether only the text or also other elements on a page should scale.

Operating systems, browsers and devices have various ways to enlarge text:

  • with the OS settings,
  • with assistive technology, like Zoom Text,
  • browser settings to enlarge text,
  • a plugin that changes the default text size
  • zoom in and out with they keys Control plus and minus in the browser
  • using your fingers on touch devices
  • Reader view in browsers

Relative units vs. absolute units Relative units vs. absolute units

We agree with WebAim on font size:

Relative units vs. absolute units:
For development purposes, it is best to use relative units (such as percentages or ems) to specify font sizes rather than absolute units (such as pixels or points). This provides much flexibility in modifying the visual presentation using CSS. For accessibility, because modern browsers adequately resize text regardless of how the size has been defined, it is not vital that text sizes be defined in relative sizes.

Top ↑

Viewport Viewport

  • Always give the user the opportunity to scale the display.
  • Never set the viewport to user-scalable=no, it prevents the user from using the browser’s zoom on mobile devices.

Top ↑

Resources Resources

Top ↑

The pixels / rem /em / debate The pixels / rem /em / debate

Top ↑

On readability On readability

Top ↑

On Viewport On Viewport