Use of capital letters

[helengaskellbbc]

Hi - I work at the BBC as a senior content designer. Following a major rebranding across the BBC I have been cracking down on widespread use of capital letters. According to various theories, they're poor for some screen readers (which read every letter individually) and for people with dyslexia (who use ascenders and descenders to orientate themselves within a word). I am open to being wrong about this, if peer-reviewed research shows otherwise.

The BBC uses https://www.myndex.com/APCA/ across our UX&D department to check colour contrast, and I'm starting to get pushback from visual designers on my crackdown purely based on this website's extensive use of capital letters. For their own part, they prefer all-caps because they feel it looks more visually appealing, but for my part I'm wondering if you have access to evidence and data I don't have.

This is the only way I can find to contact the "owners" of the ACPA website. Please can anyone explain why designers chose to use capital letters so much?

[chris480]

For the why part of this issue, graphic design withstanding I liken the general usage of all caps to a general aesthetic preference. I still know designers who double space after periods. Overall if used in a seldom way, such as for spot reading it isn't going to cause critical issues.

I'm also in camp no capital for general digital products and read many things in the past to that affect for usability. Over the years, I've come across a few things that challenging all caps(MS word recognition). But part of this comes down to the familiarity of a user to be able to read all caps. Certain languages lend themselves better to reading all caps like many east asian chars. Things like comic book bubble text appear to work well, but this likely due to the fact it's only a few words long and the font is more tuned to all caps readability. That isn't to say that all cap all the time is okay. The design context and fine matters.

On the practical side of things. If you do use all caps, it's best to write normally and use css to capitalize things visually. As you mentioned to avoid some screen readers from reading each letter out like an acronym (older JAWs had this). In fact the BBC is already doing this in a few places I've checked.

For dyslexics. One things you could propose is a user preference for alternate fonts that are 'friendlier' to different users. open-dyslexics is a popular and one I'm considering for a project right now. Comic sans is another (seriously)

Here are a few similar discussions on ux stackexchange:

https://ux.stackexchange.com/questions/61536/all-caps-in-international-design
https://ux.stackexchange.com/questions/34898/why-is-it-that-all-caps-text-looks-like-shouting-but-all-caps-handwriting-is-ea
https://ux.stackexchange.com/questions/79793/all-caps-fonts-for-industrial-use
https://ux.stackexchange.com/questions/11043/all-capital-titles-good-or-bad

A few other links:

https://uxmovement.com/content/all-caps-hard-for-users-to-read/
https://www.sciencedirect.com/science/article/pii/S0042698907002830?via%3Dihub

As evident from the links and some googling. I'm sure this will continue to be a debated issue with no bright lines for years to come.

[Myndex]

Hi Chris @chris480

For dyslexics. One things you could propose is a user preference for alternate fonts that are 'friendlier' to different users. open-dyslexics is a popular and one I'm considering for a project right now. Comic sans is another (seriously)

OpenDyslexic is not a particularly good nor useful font, and there is a lack of real peer-reviewed support for it.

One study found that once you adjust a typical font, such as Arial, for similar letter spacing, there was zero advantage for OpenDyslexic. The takeaway is that any "advantage" for OpenDyslexic is simply due to the increased letter spacing.

Comic Sans also scored poorly in a recent study by The Readability Group.

If you were to offer users an option, a good option to provide is increased letter and line spacing, and possibly coupled with increased weight.

References:

Overview: https://www.edutopia.org/article/do-dyslexia-fonts-actually-work/

Papers:
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5629233/

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5934461/

[Myndex]

Hi @chris480
Also, just a little side comment on:

Forced Whitespace

I still know designers who double space after periods.

Double space after a period is and was only correct when using a typewriter with a fixed pitch font, which nearly all typewriters were.

When typesetting with proportional fonts, the correct additional whitespace is built-in to the period glyph and/or into the kerning table.

One important part of good typesetting is never (ever!) forcing whitespace by adding in actual (forced) spaces or line breaks, etc. Vertical spacing should be handled directly with leading (or element positioning), letter and word spacing should be handled with tracking/kerning metrics, etc.

That said, do I ever use   or <br> in a webpage? Yes, of course I do, but this is largely due to the lack of good, consistent, easy to apply, typesetting tools in CSS.

When I am doing actual typesetting such as in Quark or InDesign or Illustrator, then no, I don't force whitespace, and work with the proper metrics to control layout and text flow.

[chris480]

I appreciate the detailed reply. I apologize for promoting some myths and being misled by some things I've read. I'll be sure to go through the papers and links you've posted here.

[Myndex]

Hi Helen @helengaskellbbc

Thank you for reaching out and sorry for the delay in reply. I'm going to answer you in reverse order.

This is the only way I can find to contact the "owners" of the ACPA website.

I am the owner of the APCA website.

Please can anyone explain why designers chose to use capital letters so much?

Capitals are common for use in headings and headlines, so much so some display fonts are only available in all upper-case. Use of upper-case is for emphasis, and the larger size (thus lower spatial frequency) increases perceived contrast.

Following a major rebranding across the BBC I have been cracking down on widespread use of capital letters. According to various theories, they're poor for some screen readers (which read every letter individually) and for people with dyslexia.

1. If a screen reader can not differentiate between a heading and an acronym, that is more a software/technology problem which the screen-reader vendor needs to solve.
   • That said, it might be best practice, when designing with all-upper-case, to use text-transform: uppercase; which a screen reader should ignore insofar as reading words instead of letter by letter, if that is indeed a problem.
   • This is nevertheless a useful question, and one worth looking into further.
     • I use a screen reader sometimes, and I have not run into this issue myself.
   • As mentioned, some display fonts are upper-case only, regardless of the case of the input text. Here again, a screen reader should not be reading letter-by-letter.

OPINION: It is not the page author's responsibility to try and fix deficient technology for some $10,000 screen reader program(s) that should be reasonably capable of distinguishing between a word and an acronym, abbreviation, or initialism.

2. As I recall, I was considered dyslexic when I was young, which in my case was possibly associated with my personal visual impairments (which actually means I was not dyslexic), but IMO and in reading recent literature, I suspect it may have been due to how we moved and I changed schools multiple times during the school year when I was young.

Note: dyslexia is a LANGUAGE issue and NOT a visual issue (see second post below).

Anecdotally, all caps in body text is horrible, but in fact all-upper-case for an entire paragraph is horrible for everyone. But the same is not at all true for large, isolated words such as in a heading or headline. I'll get into context in a moment.

The BBC uses https://www.myndex.com/APCA/ across our UX&D department to check colour contrast, and I'm starting to get pushback from visual designers on my crackdown purely based on this website's extensive use of capital letters.

I designed the APCA site you reference, it is desktop only, and some column/flex display issues aside, it is intended as an example of good overall readability. (Side note, anyone wanting to volunteer to help make it responsive for mobile, please feel free!)

For their own part, they prefer all-caps because they feel it looks more visually appealing, but for my part I'm wondering if you have access to evidence and data I don't have.

I'm wondering which studies you may be relying on? I urge caution in regards to any given study, as often the context or focus of the study is narrow, as is common and useful in research, but great care must then be taken to not inadvertently cherry-pick conclusions or apply results created in one context onto some other context that may have unintended consequences, due to being out of context.

In particular, there is massive misunderstandings regarding dyslexia (will discuss in a separate post below).

Visual readability is a shockingly wide spectrum, and overall works better with guidelines that couch things as "generally should or generally should not" as opposed to "must or shall or shall not". We have centuries of classical design axioms that have workout out so many of these kinks, yet seful classical design concepts seem to have been forgotten in this modern age of WYSIWYG web authoring.

Here is some additional background:

1. For blocks or columns of body text, then absolutely, all-upper-case should be strongly discouraged if not outright restricted.

   • This is true for ALL readers. Blocks or columns of small body text do not read well when set as all upper case.

2. Used sparingly, such as for emphasis, clarity, or distinction, and especially when applied to LARGE textual elements such as headings, headlines, CTA buttons, and call-outs, the use of all-upper-case can be perfectly acceptable.

   • The next post will have some info graphics from the Dyslexia Association that use all-upper-case.

Discussion

It is not a best practice to apply the needs for one context of readability to all contexts of readability. Not everything on a page or view needs the same level of fluency in readability, in fact doing so increases visual clutter. It is better to have a strong visual hierarchy, with the important content that is intended as the "main thing to read" at high contrast and set for maximum fluent readability, while less important items are set at more relaxed levels.

For instance, a copyright line is not part of main content, and it should not be at the same contrast nor prominence as the main content. If it is at the same prominence, it increases clutter and this is its own accessibility issue, particularly for cognitive reasons.

In terms of readability, there is a very wide range of readability levels, and related critical contrasts and critical sizes, and all are very contextually related to creating a good visual hierarchy.

I discuss use-cases in more detail in discussions 39.

The BBC's Site

Overall, the BBC's site is beautiful and a joy to read. The occasional use of upper-case feels perfectly fine to me, at least.

If I were to raise any sort of objection it might be in a case like this:

I find the block of upper case text menu items ever so slightly more difficult to read. This is a case where the menu selectors are starting to act (visually) like a block of text.

Let's take a look where we flip it around, so the large headline was upper case, but the menu block was not:

This is just an example, this second version I find more readable and therefore more accessible—and this is my opinion and my perception here.

There may be something to be said for the overall text size too, in terms of supporting upper-case, and potentially some more research here is warranted.

Additional Reading

I have some articles that cover some of the more serious problems relating to readability on the web today:

The Realities And Myths Of Color And Contrast

Please Stop Using Gray Text

Better Reading On The Web

I hope this answers your question, and please followup if you'd like to discuss further.

Thank you for reading,

Andy

[Myndex]

Hi Helen @helengaskellbbc (and also @chris480)

I wanted to review some recent literature before diving into "Myths of Dyslexia" and some of the myths are so entrenched they are often accepted as fact when they are actually spurious.

NOT VISUALLY RELATED

Dyslexia is a language issue, not a visual issue, and is particularly prevalent in "non clear" languages such as english. By example, Dyslexia is almost unheard of in Korea, as the Korean language is clear, with a well designed alphabet that represents the phonemes of the speech.

English on the other hand uses the symbol c for what might be a ka sound, or a chu sound or a ss sound. b and d look similar and unfortunately also sound similar. And other anomalies like "I before E except after C, and except some other words the might rhyme away and still other words that just don't care of they follow the rules, except for the ones that do..." thus as a rule it is heinous and neither useful nor neighborly.

😳

Is it any wonder some people get tripped-up with this nonsense early on?

AUTHORITIES AND REFERENCES

The International Dyslexia Association has a lot to say about these things, and rather forcefully at times, as the point is so often missed. For example, they state as the definition:

“Dyslexia is a specific learning disability that is neurobiological in origin. It is characterized by difficulties with accurate and/or fluent word recognition and by poor spelling and decoding abilities. These difficulties typically result from a deficit in the phonological component of language that is often unexpected in relation to other cognitive abilities and the provision of effective classroom instruction. Secondary consequences may include problems in reading comprehension and reduced reading experience that can impede growth of vocabulary and background knowledge.”

Notice that nowhere did they mention anything about visual presentation.

This article at the IDA does a good job of covering the myths and putting things into a correct perspective. From the linked article (emphasis added):

"...nearly all experts agree that a preponderance of scientific studies show that dyslexia is a language-based condition... consensus reports... clearly stating that although someone can have learning disabilities and vision deficits, one does not cause the other, nor does treating one fix the other....remarkable strides in the science and treatment of dyslexia...have failed to inoculate the public against...vision-based flimflammery preying on desperate parents’ hopes and uninformed educators’ wishful thinking..."

ARTICLE: How to Counter Vision-Based Claims about Dyslexia “Cures”

THINKING CAPS

I find no peer-reviewed reference that made any credible claims that all-upper-case was specifically bad for dyslexia. All upper case can be specifically bad for ALL readers, depending on how it is used, but all upper case is a useful method of EMPHASIS, as is bold, 𝒊𝒕𝒂𝒍𝒊𝒄, size, and 𝕗𝕠𝕟𝕥-𝕗𝕒𝕞𝕚𝕝𝕪.

It is long held in classical design for print that all-upper-case can be useful for headlines, and otherwise sparingly for emphasis. It is also long considered as bad for blocks of body text, as I've already mentioned—some references indicate this is more due to experience (or lack of) in reading upper-case passages.

Myths: Word Shape

In vision and readability science, the "word shape" theory of VWFA to Lexical processing is widely held as bunk, yet it seems to persist in the design world. Here's a paper on that topic:

PAPER: The Science of Word Recognition

FWIW "word shape" is the commonly stated reason that all-upper-case is somehow bad.

Myths: Case and Legibility

In the following Arditi et alia paper (emphasis mine): "upper-case text is more legible in terms of reading speed, for readers with reduced acuity due to visual impairment, and in normally-sighted readers when text is visually small."

PAPER: Letter case and text legibility in normal and low vision

And see this recent overview article on the topic by Susan Weinschenk, Ph.D:

ARTICLE: It’s a Myth That All Capital Letters Are Inherently Harder to Read

SUMMARY

First, thank you Helen for the question, it forced me to re-examine some things, and review some recent papers. In short, I find no credible support for prohibiting all-caps words or phrases.

The acceptable use is as I described. There is one thing related to best practices, and that is using text-transform: uppercase; instead of HARD CODING CASE. This is echoed here in the APA style guide discussing 5 myths of accessible typography:

ARTICLE: APA Style: Accessible Typography

And in short, this post and these references reiterate my previously stated position regarding the use of upper-case for words, with the addition that I am going to adopt the use of text-transform: uppercase; as a best practice, which I see you are already doing at the BBC.

Regardless of if it is needed by a screen reader, using text-transform: uppercase; in CSS instead of hard coding text means the user can maintain control, and my personal stated goal is the eventual automated personalization of content for all users and user needs.

Thank you for reading,

Andy

[Myndex]

Annex

Two infographics from the International Dyslexia Association that have words in all upper case.

That aside, I feel that both of these have other accessibility issues, but I won't tear into them right now, just to point out the use of all caps.

From: https://dyslexiaida.org/beware-of-education-practices-too-good-to-be-true/

And this one on structured literacy.

From: https://dyslexiaida.org/what-is-structured-literacy/

[helengaskellbbc]

Yes, thank you so much. Everything you’ve posted has been extremely useful and I value the time you’ve taken to respond. From: Christopher Nguyen ***@***.***> Reply to: Myndex/SAPC-APCA ***@***.***> Date: Monday, 31 October 2022 at 17:12 To: Myndex/SAPC-APCA ***@***.***> Cc: Helen Gaskell ***@***.***>, Mention ***@***.***> Subject: Re: [Myndex/SAPC-APCA] Use of capital letters (Discussion #92) I appreciate the detailed reply. I apologize for promoting some myths and being misled by some things I've read. I'll be sure to go through the papers and links you've posted here. — Reply to this email directly, view it on GitHub<#92 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A3VS7WKMO26KORLPWVRTERLWF74YJANCNFSM6AAAAAARH6GZXM>. You are receiving this because you were mentioned.Message ID: ***@***.***>

…

---------------------------- http://www.bbc.co.uk This e-mail (and any attachments) is confidential and may contain personal views which are not the views of the BBC unless specifically stated. If you have received it in error, please delete it from your system. Do not use, copy or disclose the information in any way nor act in reliance on it and notify the sender immediately. Please note that the BBC monitors e-mails sent or received. Further communication will signify your consent to this.

---------------------

[Myndex]

Hi @helengaskellbbc @chris480

You’re both very welcome. Please don’t hesitate to ask additional questions on this or any readability topic.

[alexkrolick]

One thing to be aware of is how CSS handles capitalization with text-transform: uppercase. It's not grammatically correct in all languages, such as Turkish.

[Myndex]

Interesting Alex @alexkrolick... is that because of the dotted and dotless i in Turkish? Or the optional circumflex after some vowels?

[Myndex]

The subject of all caps & also regarding special fonts for dyslexia, is encapsulated in the following article:

Hats off to ALL CAPS