Resizable Typography

Many users, myself included, use the text-resizing functionality offered by their browser and/or operating system. This functionality is not only used by people who are partially sighted but also by those who wear glasses and those who want to see text on their mobile devices in the sunlight.

This page will discuss how to code font sizes that will respect how the user has configured their browser and operating system font magnification settings. It will also show developers how developers can test their work in all of the modern web browsers (Note that Firefox is by far the easiest one to test in).

If you are looking at how to alter the design slightly when font resizing is triggered, you may want to check out our page on Accessible Text in Hero Images. The article demos a lightweight JavaScript library that can treat text-resizing almost like another breakpoint.

Replace Pixels With Rems

This is easy to use for new and existing work if you are using a CSS pre-compiler like Less or Sass.

Developers should use relative units like rems for the majority of their text:

  1. Pixels are an absolute unit.
  2. Rems are responsive in that they are relative to the font size of a parent that is sized in pixels. If the pixel font size of the parent of an element sized in rems changes, then the font size of the element changes.

In most browsers, users who use their browser functionality to resize text will not be able to resize text measured in pixels, since pixels are absolute (except in Firefox, see below). Text sized in rems, however, will resize, because the browsers' text resize functionality should change the base font of the document (please see the note on Chrome for Android below).

All the pages on the Enable project are designed to resize by using rems, but we use a dead-simple LESS mixin to convert pixels to rems.

☜ Scroll to read full source ☞

                    
                

(You could also use ems as well to ensure font-resizing/text-zoom happens, but they are harder to convert to pixels programmatically).

Use Unitless Line Heights

This is something that a lot of seasoned front-end developers still get wrong: using units with the line-height CSS attribute. Using units in line-height is bad because:

For example, let's take the following LESS:

☜ Scroll to read full source ☞

                    
                

These two articles are really good at explaining this in detail:

How to Resize Text in Modern Browsers

There is a lot of confusion on how to test the WCAG Success Criterion 1.4.4: Resize text. The requirement states that users should be able to resize text (and only text) up to 200% without any loss of information. It is possible to test this in all browsers, but you should be familiar with all the caveats, which are listed below.

Safari:

  1. Desktop (OSX): To increase the font size, press Option-Command-Plus sign (+). To decrease the font size, press Option-Command-Minus sign (-)
  2. Mobile (iOS): When first writing this article, it looked like there was no way to actually resize text in iOS Safari natively. The only way to resize text is at the operating system level (by opening the iOS Settings app and under Accessibility choosing Larger Text and using the slider). By default, however, most web pages don't respect the size that is set. However, after doing a lot of research for this article, I found that if you put the following CSS into your page, you can get Safari to resize the text according to the system settings:
    ☜ Scroll to read full source ☞
    
                        
                    

    I encourage everyone to put these styles in their base styles. It will make visually impaired iOS users happy. The only caveat here is that the font resize will not happen until after the user refreshes the browser. Thanks to the user "clshortf…@gmail.com" in this Chromium bug report for sharing this info.

Chrome:

  1. Desktop:
    • At the top right, click More and then Settings.
    • Under "Appearance", next to "Font size", click the Down arrow . Then select the font size you want (you have a choice of very small, small, medium, large, and very large). You can have a little bit more granular control by clicking "Customize fonts" and moving the "Font Size" range widget.

    Note that Chrome will not resize text that is sized in px units.

  2. Mobile (Android):
    • Go to Settings, and then Accessibility. You can change the font size by using the "Text Scaling" slider.

    Please note that Chrome for Android has some serious differences from all other browsers. Text is only resized inside HTML elements with more than 217 characters in it, and only if they have a dynamic height. This is not useful as an accessibility feature, since it is not guaranteed to resize all the content on the page. Because of this, text-zoom-resize does not support Chrome for Android.

    A bug was filed a year and a half ago with Google on this issue, and I have submitted my own comments to it. Hopefully this will be resolved soon.

    (Update: this was kind of fixed in 2022 in this Chromium ticket, but my testing has revealed it is not 100% fixed. If you bump up the sizing in Chrome and view this website, you will notice that some of the typography, like that inside the hamburger menu, is still not being resized correctly).

Firefox:

Internet Explorer:

Go to the menu bar, click "View" and choose the "Text Size" menu item. Note that like Chrome, Internet Explorer will not resize text that is sized in px units.

Microsoft Edge:

(This list was partially lifted from Zoom & Resizing Text from Yale University's Usability & Web Accessibility site). Some of the content has been updated using our own research (most notably, the Mobile Chrome issues stated above).