WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: fontsize vs. window width and line length

for

Number of posts in this thread: 4 (In chronological order)

From: Nick Levinson
Date: Sat, Sep 23 2017 7:57PM
Subject: fontsize vs. window width and line length
No previous message | Next message →

A minimum fontsize is usually agreed on for accessibility. 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? 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 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?
--
Nick

From: Patrick H. Lauke
Date: Sun, Sep 24 2017 3:51AM
Subject: Re: fontsize vs. window width and line length
← Previous message | Next message →

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

From: Jonathan Avila
Date: Sun, Sep 24 2017 6:19PM
Subject: Re: fontsize vs. window width and line length
← Previous message | Next message →

> . Are any numbers recommended?

This was discussed in the low vision task force at the W3c. Some people had suggested 25 characters per line for people with low vision. In the end the proposed success criteria in the current working draft calls for support of 400% zoom at 1280 which comes down to support zoom without loss of content or functionality at 320 CSS pixels (with exceptions). This is of course still a proposed working draft and changes can occur.

https://www.w3.org/TR/WCAG21/

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
= EMAIL ADDRESS REMOVED =
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Patrick H. Lauke
Date: Mon, Sep 25 2017 1:25AM
Subject: Re: fontsize vs. window width and line length
← Previous message | No next message

On 25/09/2017 01:19, Jonathan Avila wrote:
>> . Are any numbers recommended?
>
> This was discussed in the low vision task force at the W3c. Some people had suggested 25 characters per line for people with low vision. In the end the proposed success criteria in the current working draft calls for support of 400% zoom at 1280 which comes down to support zoom without loss of content or functionality at 320 CSS pixels (with exceptions). This is of course still a proposed working draft and changes can occur.
>
> https://www.w3.org/TR/WCAG21/

Noting though that in the end no line length recommendation is present
in WCAG 2.1, and the 400% zoom / 320 CSS pixel SC still says nothing
about actual font size, specifically...only that users should be allowed
to zoom. It's also not really saying anything about hyphenation of long
words, and it's arguable that it's not a loss of content or
functionality if at smaller screen sizes long words get hyphenated.

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