Some people with reduced visual acuity may not need screen magnification software or screen readers but might still have problems reading smaller fonts. So the ability to allow easy enlargement of text size is important.
There are a number of ways to zoom web-page content in to enlarge text without needing to provide explicit controls to do so. To avoid diminishing this variety of user control, you have to be careful how you code font sizes.
Examples
Many users will zoom their web pages using CTRL and "+" or CMD and "+". This will enlarge the pages proportionately, so there's little you need to do in terms of intervention. However, you should also take into account that some users may choose to resize just their text. Setting a px based font-size on the html element suppresses this ability, but a percentage based value does not. In this example, 100% means “100% of the size the user chose in their browser or OS settings:”
html {
font-size: 100%;
}
When the user changes their font size—say, by choosing "Large" in Chrome's advanced settings—the font-size will increase as expected—that is, if no px sizes are used further down in the page’s CSS. So all font sizes after that, the html element should be set using the relative units like em or rem. To make sure line-height adjusts proportionately, define your CSS line-height using relative units or unit-less values. If you don’t, when the font size increases, the line height will remain the same, resulting in poor line height and reduced readability.
✗ Bad example
html {
font-size: 100%;
}
p {
font-size: 1em;
line-height: 20px;
}
In the above code, the line-height uses an absolute value (it’s not relative to the root font size). The result, after the user enlarges their text in their settings, will be something similar to this:
✓ Good example
html {
font-size: 100%;
}
p {
font-size: 1em;
line-height: 1.5;
}
In this example, the line-height is always equal to 1.5 times the current font-size. So whether the text size may be increased or decreased, the line height will remain appropriate at any text size.
Note: To make sure text resizing is possible via pinch zoom on touch devices, you need to use the correct viewport meta tag:
<!-- don't use this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- use this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">