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 those who wear glasses and for 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).
Replace Pixels With Rems
Developers should use relative units like rems for the majority of their text:
- Pixels are an absolute unit.
- 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, than 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, becuase 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 programatically).
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-heightmean 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 decices to change the font-size, the line-height will also have to be changed. Using unitless line-heights mean that if the developer changes the
line-heightwill be automatically adjusted, since it represents the
font-sizemultiplied by that value.
For example, let's take the following LESS:
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 actually 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.
- Desktop (OSX): To increase the font size, press Option-Command-Plus sign (+). To decrease the font size, press Option-Command-Minus sign (-)
- 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
respect the size that is set. However, after doing a lot of research for this article, I found that
you put the following CSS into your page, you can get Safari to resize the text according to the
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.
- 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
- 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 than all other browsers. Text is only resized inside HTML element has 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 has been 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 tickets, 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 typography, like that inside the hamburger menu, are still not being resized correctly).
- 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).
- Select Zoom Text Only (This makes the controls only change the size of text; not images).
- Click on the hamburger menu in the upper top-right corner of the browser’s chrome.
- Click on the plus and minus icons in the “Zoom” option.
- Mobile (Android):
- 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.
- 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).
Go to the menu bar, click “View” and choose the “Text Size” menu
Note that like Chrome, Internet Explorer will not resize text that is sized in
- 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).