WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: fontsize vs. window width and line length

for

From: Patrick H. Lauke
Date: Sep 24, 2017 3:51AM

On 24/09/2017 02:57, Nick Levinson via WebAIM-Forum wrote:
> A minimum fontsize is usually agreed on for accessibility.

Worth noting that there's no normative minimum set anywhere (for
instance in WCAG 2.0 or elsewhere). Only a requirement to allow users to
zoom/resize text up to 200% without loss of content/functionality. It is
more a matter of usability / design / common sense on the part of the
developer.

> However, when the viewport gets so narrow that many words get hyphenated and often hyphenated in several places, in extreme cases where a viewport is only wide enough for a few letters, which makes text hard to read, when is a smaller font size acceptable as a trade-off to maintain accessibility?

Provided that users that do need larger text can somehow get to it
(either with pinch-zoom/text resize or zoom controls, or settings in the
website/app), "acceptable" becomes a very subjective measure.

> I design down to a viewport width of 50px since that's the narrowest the Firefox browser supported (I'm not sure newer versions do), although I don't happen to know of any physical device that narrow (some smartwatches might allow 320px wide).

I'd say (subjectively) that 50px really strains the ability of having
text that's not hyphenated nor scrolls horizontally. I'd posit that if
there are users that have a device with that size of viewport (keeping
in mind this may also be the viewport width as a result of extreme
zooming in on a desktop/laptop device), they won't expect to do a lot of
reading. At that stage, you're likely better off considering non-textual
information (using symbols, icons, etc), particularly if considering
devices like smartwatches where the idea is to provide information
that's easily glanceable.

While I'm generally not a fan of the thinking that "small viewport means
users that are 'on the go' and don't want to read" (the classic "dumbed
down mobile version"), once you do get to 50px you're really in a
special scenario/use case.

> I see advice for an ideal body line length of 66 characters (including punctuation and spaces) or half that for small devices (<https://blog.prototypr.io/how-to-set-perfect-line-lengths-for-the-web-528f08f8b344#.tzzk9wrgf>, as accessed 2-18-17), but ideal is useless for narrow viewports, yet a tiny fontsize is also useless anywhere. Are any numbers recommended?
>

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke