I’m never one to soften a polemic stance, so here we go.
“In page font resizers are bad. Bad usability. Bad accessibility. Bad design.”
-Tim Arnold 4/4/2014
There, I said it. I feel so free.
First, let me say that most websites I code have included a font resizer. I’ve been pushing back gently on some of the assumptions about what they accomplish and how successful they are at doing so but I think the time has some to be less gentle and take a more critical look at whether we are doing good or harm when we use these things.
How do they work?
Why is this a problem?
Fine, so what’s the solution?
Keep in mind that if we code the site so that the base font size is set to 100% (as we do on most sites these days: http://www.diabetes.org/living-with-diabetes/treatment-and-care/blood-glucose-control/hypoglycemia-low-blood.html or http://www.beaconfire.com/Services/Web-Design-Development or http://www.aflcio.org/Learn-About-Unions) then the body font size of the website will match the font size that the users have set their computers to use (depending on the font itself, some appear slightly smaller or larger than others). This is especially advantageous because we know for absolutely certain that we have not made a web page that is harder to read than every single font on their computer (Windows menus, default MS Word size, desktop icons, etc.).
But people MUST be able to resize fonts, 100% size isn’t good enough!
I could not agree more! I always prefer to empower users how to resize the text themselves, a skill they can take with them to any website they visit! I often find that people are amazed by how easy it is: “CRTL +/-“ or “CTRL & mousewheel up/down” in most browsers. I’ve been following Roger Johansson of www.456bereastreet.com for years, and here are his thoughts on the subject.
I’ve done a bit of searching and here are some possible models of an alternative approach:
- https://www.adaptivetr.com/change-text-size (see “change text size” link in header)
- https://www.tsl.texas.gov/resizetext (though I’d like to see a “resize text” link on every page linking to this instructional page.)
- http://www.mnhs.org/about/textsizing.htm (same)
- http://www.accessify.com/screencasts/browser-text-resizing/ (a YouTube video, free to embed in your instructional page, perhaps to blurry for the audience it targets)
But what if we HAVE to?
The best advice I have, if we must add a resizer, is to add it only to basic article pages where the content simply flows down the page. These are the cases where users will likely spend the most time reading. On pages like these your resizer should probably be available at the top of the content and not in the header or footer. The best place for them is probably along with any other page-specific tools (share, print, etc.) like on http://www.ucsusa.org/about/.
Why not use both in-page resizer AND instructional solutions?
You probably should. Just be aware of the limitations and possible problems with both and be sure that you are addressing the specific needs of your site visitors.