All caps titles and Dyslexia

Is this a dub of the related issue?

We might need designer consideration here. I've tried locally by removing CAPS from the tab links. This is how it looks:

Also we can compare with Seven theme:

#6 looks fine to me. I don't know what useful purpose uppercase would serve there.

There are other instances of uppercase text which I think are unwarranted. In particular, I'd say these instances are particularly risky:

.fieldset__legend--group {
    text-transform: uppercase;

th {
  text-transform: uppercase;

Fieldset legends and table headers are completely arbitrary text, and there's no telling how long they may be, or what they will say.

Block headings are also all-caps. Is this okay in this context or no?

[#d9-theme meeting] -> if you like we can put a patch up removing all text-transform: uppercase - or do you think this requires more thought/discussion?

Block titles are in the same league as the other ones seen here; they have an arbitrary content and length.

The problem of all-caps for readability is well attested (regardless of dyslexia), and many style guides caution against their use. The frustrating part is that most of them are rather vague about it. They typically advise you to "avoid overuse", or "use sparingly", without any useful advice on how to assess this. Some suggest that uppercase is OK for "short titles", again with no guidance on what that amounts to. I wrote more about this in #2958239-8: Readability problem with all-caps text in core themes.

Of all the style guides that I've read, there's only one which provides a clear process. The Web Style Guide (3rd edition) is all-out against it. "Capitalized text is one of the most common and least effective methods for adding typographical emphasis. [...] We recommend down-style typing (capitalize only the first word and any proper nouns) for your headlines, subheads, and text."

WCAG 2.0 doesn't say much about it, but there is a tantalizing placeholder for an advisory technique in Understanding SC 1.4.8 Visual Presentation which says: "Using upper and lower case according to the spelling conventions of the text language (future link)". Presumably the proposed technique never gained consensus; it isn't mentioned from the WCAG 2.1 version. That doesn't mean it isn't good advice; more likely it was dropped because it wasn't deemed to be sufficiently testable. So it's no better than those style guides.

As I see it, the main problems with using all-caps are:

• Headings, menu links, table headers, fieldset legends, etc. are all arbitrary length. So a theme like Olivero can never be sure that any of these would qualify for the "OK in short titles" guideline. (Even if the style guides told us how short that means...)
• Headings and labels often contain abbreviations which would normally be capitalized (e.g. BBC or IBM) but when the surrounding text is all-caps, these abbreviations are harder to pick out. (When skim-reading headings, say.)
• Localization is a potential problem. That WCAG technique says "according to the spelling conventions of the text language". As a core theme, we can expect Olivero to be used in all the languages that currently have Drupal translations. Note that some scripts (notably Arabic and Hebrew) don't even have a concept of letter case, which may mean it's risky to use this for emphasis.

Brute-forcing all-caps via CSS isn't taking any of these contexts into account. So my view is coming around to an outright ban on using text-transform: uppercase for a theme which needs to be as general-purpose as Olivero. (Meaning any core, contrib, or distro theme really.)

@anruether - thanks for linking to #2958239: Readability problem with all-caps text in core themes, and making it the parent issue here.

For anyone interested in the topic, that issue has much more information and discussion.

@KarinG - going ahead with the patch would be a good idea. At the very least, it's a survey of all the places that are using it, and we can get a better picture of whether those places will need any further design changes.

Found 20 uses:

karins-MBP:olivero sysadmin$ git diff |grep uppercase |wc -l
20

In addition to the places already referenced -> also in user account menu e.g.

Patch -> attached()

Not sure if you where asking for reviews?

Patch apply cleanly.

Before

grep -R uppercase css/ | wc -l
      20

After

grep -R uppercase css/ | wc -l
       0

Thanks for confirming and toggling to Needs review.

In last week's (or was it the week before that...) Slack meeting when I asked about it @mherchel mentioned that this change was with the designers for their input/review.

Updated designs without all caps are at https://www.figma.com/file/r8uq72Q9weTMVsNUFZKEYH/D9-Theme-Master?node-i...

Sorry not understanding what the work to be done is? The patch is already transforming everything to lower case - or are you saying it just needs to be rebased to latest -dev?

I believe there are some type size, spacing, and weight changes. I guess the first step is to inventory exactly what needs to be changed.

I don't think I know enough about figma (first look ever just now) - to extract/spot that detail. Sorry about that!

This patch makes the changes in Figma, and includes adding the semibold variant of the Metropolis font.

Awesome! 👍

Happy to pull that in and test it tomorrow!

Reviewing this now!

git pull

patch applies cleanly:

karins-MBP:olivero sysadmin$ cat 3153334-20.patch |patch -p1
patching file css/dist/base/fonts.css
patching file css/dist/components/block.css
patching file css/dist/components/button.css
patching file css/dist/components/cke-dialog.css
patching file css/dist/components/feed.css
patching file css/dist/components/fieldset.css
patching file css/dist/components/nav-button-mobile.css
patching file css/dist/components/nav-secondary.css
patching file css/dist/components/table.css
patching file css/dist/components/tabs.css
patching file css/dist/components/tags.css
patching file css/src/base/fonts.css
patching file css/src/components/block.css
patching file css/src/components/button.css
patching file css/src/components/cke-dialog.css
patching file css/src/components/feed.css
patching file css/src/components/fieldset.css
patching file css/src/components/nav-button-mobile.css
patching file css/src/components/nav-secondary.css
patching file css/src/components/table.css
patching file css/src/components/tabs.css
patching file css/src/components/tags.css
patching file templates/includes/preload.twig

Clear all caches

Visual check - great! Looked at menu items, tabs, table headers, block titles, button (managed to get them into one screenshot):

Yay!
I'm going to commit this now (I want to tag a release today).

Committed!