You Should Know How to Manually Increase the Text Size Only

Every web developer should know how to manually increase the text size only on a web page, and should be continuously testing for text size responsiveness throughout the development process.

Most browsers allow you to zoom in/out on a page. In a Windows/Linux environment you can generally hold down the Ctrl key and scroll your middle mouse button to change the zoom percentage. By default, the zoom is a "page" zoom, in which everything on the page resizes based on the zoom percentage.

But there is another type of zoom available in which only the text on the page will resize, commonly known as "text only" zoom. Let's clarify this distinction with an example. Take the following HTML/CSS:

<style>
  p {  
    font-size: 1em;  
    width: 200px;  
    background-color: pink;  
  }  
 </style>  
 <p>  
 This is a test of the American Broadcasting System.  
 </p> 

At the browser's default text size (which for most people is 16px) the text fits easily within the confines of its 200px wide container.

When a text only zoom of 200% is applied, the text size grows 200% larger but the container itself remains the same width, which causes the content to overflow its container. (The height of the container does grow because we did not explicitly declare a height on it.)

As you can imagine, text only zoom can have some big repercussions for your layout, content, and functionality if you don't build this type of responsiveness into your design.

The most convenient browser to use for testing text only zoom is Firefox (it's the primary reason I still use FF as my main development browser). It can easily be enabled by opening the Edit->Preferences menu, scrolling down to Zoom, and activating 'Text only zoom'. After doing this, the Ctrl key/middle mouse scroll combination will do text only zoom instead of page zoom. Text only zoom is also possible in other browsers, primarily by using extensions. (I will leave it up to you to google how). The point to remember here is that all browsers default to page zoom and so you'll need to take the necessary steps to make your browser use text only zoom.

Because browsers do page zoom by default I am not surprised when developers do not realize that text only zoom is even possible. They most likely are also not aware that implementing text size responsiveness is actually a requirement for proper accessibility (Understanding Success Criterion 1.4.4: Resize text). In general, your page should be able to gracefully handle a text size increase of at least 200% to be accessible. For this reason alone is important that you are constantly testing your work to ensure it is adequately responsive to text size increases.