Introduction
Resizable text is mainly handled by the web browser. This is accomplished by the zoom and change font size features that are available on web browsers. Though it is the job of a developer to make code that does not interfere or detriment the way the browser applies the styles.
Font Size Approaches:
- Em - Are relative to the font size "of the element on which they are used." For example, if the font size of the body is set to 16px, then 1em = 16px. If a paragraph element is nested inside the body and it's font size is set to 0.5em, for paragraph, then it becomes half the font size of the parent element, 0.5em = 8px. Now if a <div> element is nested inside the paragraph element and the font size is set to 1em, for <div>, then it will be relative to its parent element paragraph, 1em = 8px. (em = desired element pixel value / parent element font-size in pixels)
- Rem - Is relative to the root HTML element. Meaning that if the HTML element’s font size is set to 20px, 1rem = 20px. Unlike em, rem will always be relative to the root element, regardless of how the elements are nested.
- Percent (%) - Sets the font size to a certain percentage relative to the parent element's font size.
- Pixel (px) and Points(pt) - Fixed-size units that represent dots on the screen. Typically 16px = 12pts = 1em. Pixels and Points cannot scale in size as well as Em and Rem.
Why is Resizable Text Important?
Some users who have a visual impairment, or just preference, may resize a web page to make text and content easier to see. A user who may be visually impaired may increase the size of a web page to make the information on a web page easier to read. While a user without visual impairment may downscale a web page so they can see more information at once and save themselves time when navigating.
Best Practices
The best practices for resizable text include the following:
- Avoid using text images since the text in the image does not resize when a user resizes a webpage.
- Text should be resizable up to 200% without having any content truncated or loss of functionality.
Example
Using "px" vs "rem" vs "em"
The example below shows three different sentences using different types for the "font-size" attribute. This shows how "em" and "rem" change in width as you zoom into the page but "px" stays the same.
How to Test
Below are some of the more popular browsers with instructions on how to change font-size and zoom features that are built into the browser.
General Test
- Zoom in by clicking CTRL + on your keyboard
- Visually analyze the page to make sure no loss of functionality has occurred when resizing a webpage.
Verify that:
- All elements are visible and fully functional even when zoomed in/out.
- No information is truncated when zoomed in/out.
- Note: A web page should be able to zoom up to 200% without having any content truncated or loss of functionality.