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.

(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:

• Using absolute units in line-height means they don't grow when text-zoom is activated in most browsers.
• Using relative units (e.g. rem) in line-height is better (in that it will increase when text is zoomed), but if a developer decides to change the font-size, the line-height will also have to be changed. Using unitless line-heights means that if the developer changes the font-size attribute, the line-height will be automatically adjusted since it represents the font-size multiplied by that value.

For example, let's take the following LESS:

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

• Unitless line-heights by Eric Meyer.
• Line-height by Sara Cope.

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:
   
   View MoreView Less (This control is not needed for screen reader users.)

   Wrap text

   ☜ 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:

• Desktop:
  1. On the menu at the top of your browser, click View, then go to Zoom (if you are using Windows or Linux, you may have to press the "Alt" key in order to make this menu visible).
  2. Select Zoom Text Only (This makes the controls only change the size of text; not images).
  3. Click on the hamburger menu ☰ in the upper top-right corner of the browser's chrome.
  4. Click on the plus and minus icons in the "Zoom" option.
• Mobile (Android):
  1. You first need to set up Firefox to use the operating system text zoom settings. To do this, click on the More menu, denoted by three vertical dots ⋮, and then Settings. Then go to the Accessibility Menu. Make sure the "Use System font size" slider is on. Also make sure the "Always enable zoom" slider is on as well.
  2. Now, that you have set up Firefox right, you can now zoom the font. Launch Android's "Settings" app and choose "Display". Then click on "Font size". Use the slider to change the text zoom font size value. Click OK and then go back to Firefox (Note: You may need to reload the web page in order for the text zoom to take effect).

  (A more visual representation of the second step above can be found at How to Change the Size of Text, Icons, and More in Android at the How To Geek website).

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:

• For Edge <= 18 (which is based on the EdgeHTML rendering engine): the only information I found about text zooming is outlined in this article, but I couldn't get it to work (I think Microsoft may have removed this feature).
• For Edge > 18 (which is based on the Blink rendering engine): go to Settings, and choose the "Appearance" tab. You can change the "Font size" select box value or have more fine-grained control by clicking "Custom fonts" and moving the "Font size" slider.

(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).