Task
Ensure that text can be resized without loss of content or functionality
Check as complete
People with low vision sometimes resize text larger than the 16px default. When we set font sizes in absolute units, like px, the page doesn’t always respect the user’s preference and instead shows the text at the font-size authored.
Let’s look at some best practices to make sure users can resize text on your site.
Never use absolute units (px, pt) for lengths
Use relative units like em, %, and viewport width/height for all spacing and length properties.
Use rem for all font-size properties
Rems are a complex concept, but you can assume that 1 rem is equal to 16px.
- Set body font size to 100% or 1rem, in order to respect the browser preference
- Use rem and em units appropriately for spacing units depending on if an element needs to scale based on the body or the inherited type scale.
Don’t disable zoom
Disabling zoom in Webflow is only possible with custom code, so just avoid (or find and delete) custom code that disables zoom.
See also Don't disable zoom and Allow zoom without forcing horizontal scroll
WCAG reference:
Back to checklist
Total progress
Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
0 / 0
Hide progress