Summary

Ensure that changes to font size do not prevent users from being able to read reflowable text.

Techniques

Examples

Example — Setting font size in em units

The following example sets the font size of h1 elements to the equivalent of 22px.

h1 {
   font-size: 1.3750em;
}
Example — Setting the root font size to 62.5%

A common design technique is to set font size to 62.5% on the root html element. This makes 1rem equivalent to 10px, which allows authors to define font sizes more easily (e.g., 1.6rem becomes the equivalent of 16px).

html {
   font-size: 62.5%;
}

h1 {
   font-size: 2.2rem;
}

Frequently Asked Questions

Do EPUB reading systems support zooming or font resizing?

Reading systems typically support font resizing in reflowable publications and zooming in fixed layouts.

Authors consequently need to ensure that resizing the text content of their reflowable publications does not introduce issues (e.g., buttons that are illegible after increasing the font size).

Although fixed layouts can be zoomed, so typically pass this success criterion, zooming typically leads to their failing the requirement for reflowability (success criterion 1.4.10).

Explanation

The requirement to ensure users can resize text is defined by WCAG success criterion 1.4.4. Although this success criterion allows the user agent to provide this functionality through zoom, zooming is not a reliable feature of most reading systems for reflowable content.

Rather, most reading systems allow the user to increase or decrease the default font size to better suit their needs — typically allowing the user to choose between half and double the default.

In the absence of CSS and explicit dimension declarations (e.g., height and width attributes), text resizing does not normally present any issues for reflowable content. Once authors fix the dimensions of elements, however, it is possible that the text gets clipped as it is expanded, making it impossible for users to read the content.

A common example of where this occurs is with buttons. Consider the following example button with its height and width specified in pixels by CSS:

If the user doubles the font size, the text within the button gets clipped because of the inflexible dimensions:

The same issue occurs in any container element with dimensions that cannot adapt to changes to the font size.

To avoid this problem, authors need to ensure that they use flexible measurement units like em, rem and % (percent) when specifying both font and element sizes as this allows both to adapt to changes in size. Using inflexible units like pixels will cause text to be clipped or overflow into other content.

Note

Fixed layout publications typically avoid this problem because reading systems allow users to zoom the content instead of change the font size.

Related Links