Avoid all caps text
rkojik opened this issue · comments
Thoughts on this typography article by NNG, which is somewhat contradictory to "avoid all caps":
https://www.nngroup.com/articles/glanceable-fonts/
An acceptable exception?
@rkojik This is a 404 :-(
Each of the items probably has exceptions — they're really just principles/rules of thumb.
@rkojik
Although the url you provided is a valid url, you linked "https://www.nngroup.com/articles/glanceable-fonts/" to: https://github.com/Heydon/inclusive-design-checklist/issues/url.
I did not read that entire article, it seems it touches on all-caps legibility.
What I would be more concerned about would be how screen readers announce all-caps text, e.g:
<h1>LATEST NEWS</h1> a screen reader may read out as: "L-A-T-E-S-T N-E-W-S".
If you want to do all capital letters on non-abbreviated text you could do:
.text-uppercase {text-transform: uppercase;}
<h1 class="text-uppercase">Latest news</h1>
WCAG 2.1 Success Criterion 1.4.12 Text Spacing does not mention all-caps text:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
If you are concerned about the legibility of all-caps, you could potentially try increase word-/letter spacing.
Oops on the failed link. Sorry. I agree with avoid All Caps. I think text-transform: uppercase, in certain scenarios, could be beneficial -- like call-to-actions, or interactive elements like "tabs". It's a nice distinction from normal text, as long as other practices like plain language, legible typography, etc are followed.