On Uppercase Text within Lowercase Text (A Twitter Case Study)

On Sep. 16, 2022; kàsàlà burst on Tech TwitterNG. TechCabal had just made a tweet summarising Kuda's financial report for 2021. The much more interesting thing for me (and you too, I guess) is a quote tweet by @onu_kwue. It reads as follows:

Numbers in the tweet make it a bit dizzy to read but an important story, gives a rare look at a buzzy fintech startup's finances. More of this, please

If you ask me, how numbers may have caused dizziness – I made an analysis below. I won't play you as Omawumi did us with the reply – “Na who I go ask?”

Open in a new tab to continue listening on Youtube.

Besides, you will learn – like I do – how we read paragraphs containing different character cases. As well as, how to format them.

Problem Identification

Of the 4 types of user impairments, the above is a case of Cognitive load. So, the problem could stem from how the Numbers were perceived or presented.

On perception:

A quick check on @onu_kwue reveals he is a “Tech, business, and economy correspondent @qz”. Meaning, he isn't a novice with Numbers.

Chances are: there might be some environmental or medical factors. But, his tweet is definite. Hence, we can take a quick stab at how the information was presented.

On Presentation:

TechCabal may opt-in to truncate the numbers for simplicity. Example: ₦6,092,554,866 becomes ₦6bn+. Yet, there's financial trust in being detailed to the very last kobo. And TechCabal needs that trust to drive traffic to the appended link.

Meanwhile, Twitter as a media platform uses uppercase to present numbers within lowercase text. This, is a known issue.

One of the most common detriments to typographic readability is the overuse of ALL CAPS. Setting text in all caps (expecially lengthy blocks) decreases the ease, speed, and appeal of reading, and can cause a reader to quickly lose interest, albeit without realizing why. - Ilene Strizver

Luckily, @onu_kwue realized how he feels. As designers, it's left for us to connect the dots and improve the presentation.

I'm no medical student but below is the connection I made between uppercase characters and dizziness.

Problem Research

According to NHS, one cause of dizziness is Motion Sickness.

Motion sickness is caused by repeated movements ... like going over bumps ... The inner ear sends different signals to your brain from those your eyes are seeing. These confusing messages cause you to feel unwell.

One of the recommendation is... Guess it – Do not read.

Why?

Because reading has to do with eye movements which you ought to reduce at the state of dizziness. This leads to another recommendation being made – close your eyes and breathe slowly.

Here's how all this relate to Typography:

There're 4 types of eye movements. One of them is Saccades.

Saccades are rapid eye movements that allow us to quickly scan a visual scene. It's ... what your eyes are doing right now as you read this. - Bryn Farnsworth

If the eye moves, the eyes can be stressed. And, the way we format text impacts our experience.

To visualize the saccade of that tweet, let's refresh how we read.

How we read

An English text, like that tweet, can be broken down into 3 components: letters, numbers, and punctuations. Punctuations aid the reading flow of the other 2 components. Thus, let's compare how we read letters and numbers.

Letters Numbers
We read in words We read by characters
The fewer the word syllable, the faster we read. And, vice versa. The fewer the numeric characters, the faster we read. And., vice versa.
The lower the cases of letters, the faster we read. Because, lowercase letters has more distinctive shapes The number cases do not impact reading speed. Because, it doesn't affect the glyph's shape but the vertical alignment.

Irrespective, there's one thing uppercase characters within lowercase text does to reading flow.

Like comma, and periods, uppercase introduce a soft pause in reading flow. This is the reason why Sentence case feels faster to read than Title case. And, Title case feels faster than all caps.

One more thing though:

Uppercase characters are perceived bigger because their blocky shapes take more available space. So, having them within lowercase letters cause the eyes to refocus.

Now, let's analyse the tweet:

  • The eyes starts with reading fast the sentence-case text,
  • it refocuses at the first uppercase character,
  • and slows down to read other uppercase character(s).
  • Then, it refocuses to lowercase characters.
  • and repeats for change in character case within the current text line.
  • Upon reaching line end, it refocus to the next line start.
  • The circle repeats.

Visualizing the above, we'll have something like below:

The tweet with annotations of how we might read it.
The ragged line trigger a character pause. The circles show points of fixation. The lines indicate the saccade, while the curves indicates regression-saccade.

See: The eyes move fast, refocus, slow, refocus all within a short line of text, repeatedly. It's fair to say the inner ear sends alternating signals to the brain that may cause you to feel unwell – dizzy.

Problem Solution

Bulk of the solution actually lies in UX writing.

TechCabal could have written in naira only as the main target audience are Nigerians. By that, 27 characters are saved which reduce the cognitive load for readers by 11.739%.

Other than that, Twitter can as well save readers of the stress of focus shifts. Each group of uppercase numbers within lowercase text should be made lowercase numbers.

By lowercase numbers, I mean old-style numerals which are also called Text Figures.

To show you a mockup, I ran through Google Fonts. I could only find 12 sans-serif typefaces with 3+ styles that have lowercase numbers by default.

Of these 12, only 3 pass the quick legibility test. That is, they have distinctive characters for the uppercase letter eye, lowercase letter el and number one (Il1).

Of those 3, Alegreya Sans SC is a small caps font and wouldn't fit for a tweet with any letter case.

Of the remaining two, Raleway is too geometrical for my liking as body text. Hence, we're left with Nobile.

The below mockup shows a comparison of Before and Afters.

The orignal tweet, and 2 mockups. The first mockup had lowercase numbers. The second mockup had both lowercase numbers and no dollar equivalent of naira values.

Takeaway:

Simplify each paragraph of text. Use sentence case through & through. That is: Only the first character of a sentence is in uppercase, others – including numbers – are not. If the need for uppercase arises within a sentence, eg. for acronyms, use small caps.