# ✎ Technique: Enable text resizing

**Source**: https://accessibility.huit.harvard.edu/technique-enable-text-resizing
**Parent**: https://accessibility.huit.harvard.edu/presentation-developers

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">`

See also:

- [Techniques](https://accessibility.huit.harvard.edu/page-categories/techniques)
- [Text](https://accessibility.huit.harvard.edu/accessibility-topics/text)
- [Screen magnification](https://accessibility.huit.harvard.edu/access-technologies/screen-magnification)
- [Presentation - Developers ✎](https://accessibility.huit.harvard.edu/content/presentation-developers)
- [Support flexibility and adaptation ✎](https://accessibility.huit.harvard.edu/content/support-flexibility-and-adaptation)
- [Perceivable](https://accessibility.huit.harvard.edu/principles/perceivable)
- [Low vision](https://accessibility.huit.harvard.edu/disabilities/low-vision)
- [CSS](https://accessibility.huit.harvard.edu/web-technologies/css)