Accessibility Explained: Font Resizing

Font size is one of those web development topics that often goes unnoticed. We get our pixel values from the PSDs, set it, and forget it. Maybe those values change at mobile breakpoints, but that’s a quick fix, right? Wrong. Did you realize that by setting your font sizes using pixel values, you’re making your site less accessible?

The WCAG 2.0 guideline is pretty straight-forward: “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”

This means the user must be able to change their default browser font size without the site breaking. If you’re using pixel value font sizes, you remove the ability for the user to change their font size. Your pixel values will override the browser settings, resulting in comparatively tiny text when a visually impaired user needs larger letters.

How to enable font resizing with CSS

Fortunately, all it takes is a shift in your CSS thinking to solve your problem. Instead of using pixel values, choose a relative unit you’re comfortable with and convert all of your font-size declarations. The most common option is the “em” unit. Unless you change it, 1em defaults to 16px. Using 16 as your base, you’ll have to calculate each font size. For example, 20px is 1.25em, 24px is 1.5em, and so on.

Font resizing also makes your sites more responsive. By using relative units, you can more easily increase your font size on smaller screens. This makes your content easier to read in general.

Font resizing fallbacks

If you’re still supporting older browsers, font resizing can be difficult. Not all older browsers support ems, so it is important to use your desired pixel value as a fallback like so:

p
{
font-size: 24px;
font-size: 1.5em;
}

How to test for font resizing

The ability to resize your fonts isn’t the only part of the standard. You also need to make sure your pages don’t break when the fonts are resized. The easiest way to do this using your browser’s internal settings. In Chrome, you can find the font size setting under “Advanced Settings/Web Content.” Change the setting and see how your site reacts. You may find areas that need improvement, and also areas that need to be updated.

Need some help getting your font sizes in order? Give us a call! We’ll make¬†your site accessible in no time!