Accessible Typefaces, Fonts, and Text with Jared Smith

JARED: I'm Jared Smith. I'm from WebAIM, which is the Web Accessibility and Mind project. We're a non-profit accessibility consultancy, based at the Institute for Disability Research, Policy, and Practice at Utah State University. And we do web accessibility.

We help people make their content more accessible to people with disabilities. I encourage you to check out our website at WebAIM.org. There's just a wealth of information and resources available there. So let's dive into this a bit.

First of all, I wouldn't consider myself a typography expert. I'm not like a type designer. If you're looking for, like, a list of fonts that you're gonna use, that are accessible, you're not gonna get that in this presentation. My interests are really the intersection of cognition and accessibility and human experience.

I do have to disclaim a little bit here. That many of the examples I'm gonna show today are purely visual. Because reading really is a visual experience. And I'll try to provide some descriptions of the visual content to those that can't see it.

But as you'll see, or maybe not see, that will be a little bit difficult, due to the nature... The visual nature of some of these examples. So when we're online, most of our time is typically spent reading text. The longer I'm in this field -- and I've been working in web accessibility over 20 years -- the longer I'm in this field, the more I am realizing the impact of text on that human and accessibility experience.

It's just really important. So how does reading work? Well, magic. Kind of.

You know, if you consider the history of mankind and of human cognition, reading is really a very recent development. Only a few thousand years old. You know, even as recently as 200 years ago, only 1 in 8 people could read. So how have our minds developed to so powerfully adapt to something that's so incredibly complex as reading?

Let's explore that. Consider this visual scene. Within a matter of just a few milliseconds, our minds can start to determine the content of this artwork. A red and a yellow apple, a vase with flowers, framed artwork in the background.

But we don't initially examine individual components to determine the whole. We just kind of see it. We very quickly scan for shapes and for patterns, and our brain aligns those shapes and patterns to meaning before we even recognize the individual components. We then focus in on those particular components to further clarify the content.

You may have first thought it was a yellow pear rather than an apple. Maybe it took you a few seconds before you realized that the flowers in the vase there were wilting. So our initial examination of this scene is done by identifying corners, edges, and shapes. This gives us the high level context for the objects in question.

And even in the absence of the detail and the color, we can very often determine what those themes are, or at least how they go together. If we were to take this outline and remove significant portions of that outline and focus primarily on the places where elements intersect, or where shapes are very distinct, we would see that many of the shapes and intersections that we use to identify objects are remarkably similar to the strokes that make up human writing and text characters.

And where two objects come together, they might form a T or a Y shape, corners of objects might form Ls or Vs, C shapes and Os, circles, you know, they form the boundaries of all sorts of shapes, like apples or vases. And these shapes are not accidental. They're not random. You know, if you look at a haystack, or the clouds, you would very rarely find these shapes naturally occurring.

They usually align with something that is intentional or that has meaning or importance. So when we see these things in real life, it usually indicates something worth paying attention to. You know, food or structures or maybe... Text characters.

These shapes, these basic shapes, are really the foundational alphabet of things that are meaningful. And our brains are incredibly adept at spotting them. Here I've added a few more shapes to that basic alphabet. Some arrow pointy thingies, a triangle.

Each of the patterns of this alphabet of various shapes trigger different neurons in our brain when they are viewed. We can analyze brain activity and measure when specific neural networks are triggered in the brain. In other words, you may have a set of neurons that respond to seeing circles. And another that responds to seeing a Y-shaped pattern.

And when these neurons are triggered in specific combinations or patterns, our brain can associate those patterns with meaning. So while each of the shapes here on the screen are distinctly recognizable, alone they really don't have much meaning. But when placed together in a distinct pattern, we suddenly form meaning from them. In this case, we think...

Cat!

Similarly, these shapes, a partial circle, a vertical line with a horizontal line across its top, a pointy kind of arrow thingy with a line halfway through it... Each of those may trigger specific neural patterns in our brain. And they might have some basic meaning to us. But when we put them together in a specific pattern, they form the word "cat".

And that has a distinct and much deeper meaning to us. So the process in our minds of converting these character patterns into phonemes or sounds, then into words, which have associated meaning, is considered the phonological route. Meaning it's focused on phonemes or sounds. What's really most magical about reading is that when it's working properly and efficiently, when we see this pattern of shapes, we don't usually think C-A-T, or even the word or the sound cat.

Instead, the neurons in our brain immediately connect those shapes in that particular pattern to a complex meaning. What a cat is. This amazing creature that begins cute and cuddly and fluffy and then usually just grows up to be a big jerk. Right?

And this is called the lexical route. Lexical, meaning that it bypasses for the most part the way things sound, and jumps more directly to lexicon or meaning and context. And these things happen in different areas of the brain. On the left hand side of the brain, near the back, behind the ear, is the area that receives visual stimulus.

And it generates word forms. I'll explain that a little bit more later. Slightly in front of that, and above that area, is the phonological area. Where we generate sounds for those word forms.

This is also the area of the brain where we verbalize, where we generate verbalized speech. Further ahead of that, in the frontal lobe, is the lexical region. Where we generate meaning. And these aren't, like, one way passageways between these parts of the brain.

There's a continual feedback loop. I mean, these things are constantly interacting and communicating with each other, and they support one another in this process of reading. So humankind -- man has created alphabets to allow us to read. And reading is essentially just that practice of associating patterns of shapes to meaning.

Those alphabets have evolved to support more efficient reading and more complex meanings over time. But alphabets are primarily based on shapes we already used to extract meaning from the world. Things that intersect sharply, such as Ls and Ts and Vs are more frequent in things that are meaningful in nature and more frequent in alphabets. And most languages average about three strokes per character, with a foundation of those basic shapes that consistently reoccur.

Even in totally unrelated cultures. In other words, while diverse, all of the major writing systems share the same building blocks. Consider this quote. This is by Stanislas Dehaene.

He's a cognitive psychologist. He's done really deep and powerful research on reading and the brain. And how these things work together. And much of what I'm gonna present today is based on his research.

But know that we're continually learning about how reading works. Some of what I'm presenting may not be entirely accurate. But it's probably about the best that we know right now. So the quote.

He writes: The neuroscience of reading sheds new light on the twisted historical path that finally led to the alphabet as we know it. We can consider it as a massive selection process: Over time, scribes developed increasingly efficient notations that fitted the organization of our brains. In brief, our cortex did not specifically evolve for writing. Rather, writing evolved to fit the cortex.

So to put this another way... Typography is still evolving to better align with the existing efficiencies of the human mind. Not the other way around. Nearly every major writing system has become increasingly simplified over time.

As we've learned that we don't have to encode meaning in characters, like we would see in hieroglyphics or pictographs, but instead we simply need to put shapes into written characters in the most basic ways that allow that visual differentiation and alignment of those basic characters to meaning. When we were first learning to read, most of us would typically break things down into individual letters. And we would then combine those letters into graphemes, which are a functional character or group of written characters.

We would then combine those graphemes to recognize visual words. We would also kind of parallel -- or sometimes separate from that -- we would learn the phonemes for those. Like how did those things sound out loud. And we can put together those phonemes to recognize audible words.

Forever, there's been debates about whether the visual or the phonetic approach is better for reading. You know, remember Hooked on Phonics. That's a phonetic approach. And we now know through research that both of those are important to developing reading skill.

While developing phonological or audio processing is critical for reading, the idea that we convert characters to sounds or phonemes and then put those phonemes together to identify those words and put words together to create meaning is not really how most of us read. At least, it's far from the most efficient process. Most of the time, we just convert the visual patterns almost directly into meaning. Not necessarily into words.

But into meaning. And we don't even realize that this is happening while we're reading. As soon as you start to think about it, suddenly your brain implements phonetic or other parts of the cognitive process that are not as efficient as when you just stop thinking and just read. So...

Consider the word "lion". You know, it can be broken down into phonemes. Ly-uhn. And then we put those phonemes together to form the word lion.

And that word triggers meaning in our mind. This majestic feline animal. In traditional Chinese, there's a similar symbol for lion. Phonologically, it's pronounced "shi", and "shi" can be associated to the meaning of this animal.

However... There are dozens of characters in classical Chinese that are all pronounced "shi". Or variations of that. With subtle inflections and differences in various dialects.

If you speak Chinese, you probably know I've butchered that. But each of those characters means something totally different. This is an example of a story written in... It's a fairly complex Chinese story.

That tells the story of a poet that went hunting for ten lions, and then went to a stone den and ate these lions. You know, when read in print, it tells a story that is readily understood by someone that knows the characters. But when read aloud... Each of these characters has nearly the same pronunciation.

So let's listen to this story a little bit, classical Chinese story, in Chinese.

Shi shi shi shi. Shi shi shi shi shi. Shi shi shi. Shi shi shi shi.

Shi shi shi shi shi shi shi. Shi shi shi shi shi shi shi. Okay. While that's really not how somebody would present that story in, say, Mandarin Chinese, it does highlight that the phonological route can introduce difficulties in some languages.

Especially those with a lot of homophones. Right? Words that sound alike, but have different meanings. Like sun, S-U-N, and son, S-O-N in English, or there, their, and they're in English.

Different characters or symbols, very different meanings, but very similar pronunciations. So when we begin reading, we focus a lot on the phonology. How things sound. But to really become an adept and efficient reader, one must couple those phonological processes with a more visually efficient process.

So let's talk about those visual processes. Now, from a visual perspective, what word do you think this is? For some people, it can be a bit of a challenge. But a lot of people can recognize a common word that would fit into this high level shaped pattern.

We can identify the descending stems on the lowercase ps, and the ascending stem on the uppercase letter l, and we can use those shapes to deduce that this is the word apple. And we used to think that that's how we would read. We would analyze the overall shape of entire words and scan for the ascending and descending character shapes and vacant places and use those shapes to deduce that this word, for example, is the word "shape".

And that seems to make sense to us. Right? For instance, reading lowercase text is usually faster, because we have those differences in the ascending and descending characters. And all caps is slower, because we lose some of those differences.

And if we throw in mixed case, well, that's just kind of a nightmare, because we're switching between these. But recognizing word shapes isn't really how we read at all. It's not the major differences in words or letters that we recognize and focus on. Instead, we mostly ignore those major similarities and instead focus on the very minor differences.

Those are the things that are most important.

To kind of demonstrate this, who is this a photo of? And I know this is a very visual activity here. Your mind will immediately do a little work, trying to determine who this is. Now, if you're familiar with them, you'll probably try to process whether it's Daniel Radcliffe or Elijah Wood, Harry Potter or Frodo Baggins.

And to do so, you'll begin to focus on the subtle differences that differentiate those two actors. Not the things that they have in common like the eyes or the eyebrows. Distances between their eyes, subtle differences between their eyelids or lip shapes or angles, and you'll associate those things to the cognitive model you previously built for both Daniel Radcliffe and Elijah Wood. We do the same types of things when we read.

Our brain has learned to ignore the big differences such as word shape and hone in on only the subtle differences that actually matter. The correct answer for this photo is that what you were viewing is actually a digital composite of both Daniel Radcliffe and Elijah Wood, so it is neither and both at the same time. But the brain hates that kind of ambiguity. Right?

What your brain is probably doing right now is analyzing the photos of Daniel and Elijah, and it's refining its mental model for each of them. It's refining those neural networks for the individual characteristics that differentiate them and then storing them in memory. So next time you see a photo of either of these guys, your brain is going to be better attuned to differentiating them. And it does those types of things with typography all the time.

Consider the word "illusion" in Times New Roman. The capital I and the lowercase ls are very similar. And immediately our focus will go on those distinctive features. Not on the major characteristics of those characters, but on the subtle differences.

And what we tend to find is that how a typeface looks has a much lower impact on readability than on how individual characters are differentiated. So again, if you're looking for a list of fonts, to look a certain way, you're not gonna get it in this presentation. You're gonna get the principles of good typography. And over time, those differences between those characters, even though subtle, they become coded to the neural networks in our brain.

So as an example, you might have a neural network in your brain that is triggered when you perceive a horizontal line. You probably have another neural network that responds to a vertical line. When both the horizontal and the vertical line networks are triggered in a specific pattern, that might cause other neural networks to be triggered. Such as one for a letter -- kind of a T shape or an L shape or an upside down L shape.

These are all different things that can be triggered inside of our brain, based on the visual stimulus that we're seeing. If those three neural networks are all triggered by a pattern that combines them, that might trigger a neural network that we associate with the letter E. And the same time, if we add our neural networks for the vertical line and one for an adjacent half circle that are both triggered at the same time, that might form the letter D.

And when the E and the D networks are triggered together, in that visual order, that can form a new pattern for -ED. And when we detect that pattern at the end of a word, you know, that was formed by a whole bunch of other neural networks all working together to form that word, it changes the meaning. It makes it past tense. And those complex relationships of neural networks are what allow us to very quickly convert shapes and patterns and combinations of those shapes and patterns into meaning.

Where this gets a little interesting and complex, though, is that there are a lot of different ways to visually present a letter D. You know, once our brain has established those neural networks for all of them, it might map all of those to a single meaning of the letter D. So rather than a visual form of D, we form kind of a cognitive or lexicon for the letter D. That is independent of the various visual presentations.

And the end result is still a letter D. Regardless of the visual form. So what we tend to see is kind of a divergence in those neural patterns that are fired, as we look at these finite shapes and patterns and graphemes within text. And as those shapes are kind of compiled into more phonemes and into words, we see a convergence back to...

As we get closer to the final meaning or lexicon. In other words, we take shapes, things get really complex in our mind, and then they tend to get simplified as we get to that meaning. And our brain is developed -- we've learned to master those efficiencies over time. So how do we do that, when we're actually reading?

You know, as we read, our eyes do not move smoothly across lines of text. They jump in patterns called saccades. Sometimes pronounced "sah-caydes". And these happen really quickly.

Only 25 to 30 milliseconds per jump. With proficient readers, there's only about 200 milliseconds between saccades, where we're fixated on something. So about 10% of the time when you're reading, your eyes are moving very quickly. So why can't we see or even notice those saccades when we're reading?

If we move our head back and forth, shake our head, things get really blurry really quickly. Why doesn't that happen when our eyes are moving really quickly across the page? It's really because your brain fills in that gap. As your eyes are moving, it creates an illusion of one or both of two things.

What we just saw, and what it thinks we might see in just a moment. After our eye has moved. So when we read, only around 10% of the time... I'm sorry.

10% of the time is not spent in visual processing, but with our brain presenting that illusion, while it verifies and processes what we just saw, and predicts or anticipates what we're about to see. So as we consider how that might work with this sentence... The quick brown fox jumps over the lazy dog. You know our eyes will jump from left to right, across this sentence, stopping or fixating typically every seven to nine characters.

Give or take a few. Our mind will take in the visual stimuli in the vicinity of those landing spots all at once. So it essentially absorbs all of the characters in that area, and processes them in parallel, rather than serially. We don't read letter by letter.

We absorb several characters, all at once. Interestingly, in skilled readers, the length of time to read and process a three-letter word is not any different than the time it takes to read and process an eight-letter word. Our mind is really good at processing these things in parallel. And we read all of those surrounding characters at once, not focusing on word shapes, but on character patterns.

And sometimes our brain will tell us to skip entirely over short words or connected words or words that our brain anticipates are coming. In other words, the brain is really good at filling in the gaps. Right? And ignoring the stimuli that it doesn't need or want.

In this sentence, for instance, it might skip over both instances of the word "the". If we're familiar with the sentence already, it might skip over the word "dog" at the end, because it knows it's probably coming. And this can significantly reduce the number of saccades, and thus increase our reading speed. Though that comes at the peril of potential reading errors.

Overall, your eyes only stop on about 60% of the words that you read. I'm kind of doing air quotes here. Right? Because you have to remember: Optimally, we're not really reading words.

We're generating meaning from those character patterns. So for the first saccade, your eye might fixate around the letter q. In quick. Right?

And the nearest three to eight characters will be in focus and the characters more distant will become increasingly out of focus. So the area where focus is sufficient to pick out those subtle differences between characters is really incredibly small. It's about the size of your thumbnail at arm's distance. So if you do that right now, put it up to your thumb at arm's distance, and look how small that is...

It's really a small area where we can read and differentiate character differences. So in that brief moment when your brain is processing the character patterns, near the letter q, it's also predicting things in the more blurry area of your peripheral vision that we're about to read next. It knows, for instance, if it knows a short or expected pattern is coming, that might skip over it entirely, or it might just intuit or guess at the most likely meaning.

If it's an unfamiliar pattern, or if it senses a very long word, it might... That's gonna require some more cognitive processing. Your brain might break that into two or three future saccades, to better ensure reliable and efficient decoding. Your eye then jumps to the next saccade, maybe around the letter o in the word brown.

While that jump is occurring, a few things are happening. First, we're processing the things that we just saw, and we're predicting the things that might happen in the future. For instance, we might predict the fox is coming and our brain might know that, and thus we're not gonna land on it visually next time. We'll just skip over it.

It also can correct things that it got wrong. Once we have the context of the word brown, if maybe our brain interpreted "quack" instead of "quick", our brain can really quickly fix that. And it can make those corrections before it actually gets to our cortex and we realize it. So these corrections occur automatically.

You know, before they even hit our memory or recognition, the brain can do these things without us even realizing it. But we can sometimes interrupt that process. We can introduce character patterns for which we don't have these neural connections already established. To determine what that meaning is.

For instance, misspelling a word, such as brown. Misspelled as B-R-W-O-N, that can derail the reading process. And in this case, we have to stop and break the pattern into letters or phonemes. We might have to implement additional higher level cognitive functions and processes to see if we can make sense of that thing or not in its context.

But sometimes our eyes and our brain might just skip over these misspellings, and this noise entirely. And it'll just fill in the gaps. Because again, we're really only closely examining around 60% of the words on the page anyway. If you play Wordle, in many ways, the processes that our brain goes through to determine content and meaning are very similar to how we play Wordle.

Which is part of why I think it's so popular. It gives us excellent practice in refining, training, and testing our neural networks for reading. So the brain tries to deduce in Wordle the most logical answer based on the limited context that it has. When reading, the brain does similar things.

Once the brain is satisfied that it has the correct meaning with a high level of reliability, it doesn't need to exert any more cognitive effort on getting the exact answer. And with this pattern in Wordle, you can be quite assured of the correct answer, that it's brown, before you type it out. You've probably seen something like this cross your social media feed in the past. You know, the point of this is that you can still determine the meaning of text, even if the letters are not in the right order.

So long as the first and last letters are correct. And the last sentence of this text states: This is because the human mind does not read every letter by itself, but the word as a whole. That is fundamentally incorrect. We don't read the word as a whole.

The reason why we can properly deduce what these words are is because your brain is essentially playing Wordle on each of them. And is filtering out the nonsense words that don't align with those established neural patterns, and it's replacing them with the most logical replacement. Also, as you read this text, you're probably sounding out words in your head. You're using context.

You're doing a lot of additional cognitive things. And that's expensive. Right? That's burdensome on the user.

To do those. So thinking is the enemy of efficient reading. That doesn't mean we shouldn't think about what we're reading. But if we have to think to read, that's cognitive effort and time that could best be spent somewhere else.

Such as on thinking about what you're reading. Now, thinking in order to read isn't always a bad thing. Consider a favorite author that uses really flowery language. Or a New York Times editorial.

You know, these are... They often use words in ways that are not expected, or perhaps even words that are unknown. You know, when reading poetry, for instance, we focus on alliteration and how things rhyme. By triggering those higher level cognitive processes, it causes us to repeatedly re-examine and contemplate on the meaning of the words that we're reading.

These things make us think. We should, however, avoid making our users think unnecessarily. Just be aware that those things come with a price. In short, we want to write as simply and as is appropriate for the content and the audience.

So let's get into some typographic principles that can help here. The things that hopefully we can avoid derailing or slowing down that reading process. First of all, there is not a best typeface or font. Okay?

The general principle is that simplicity is important, but it's not always vital. Most important is that the typeface be familiar or becomes easily familiar. It's easily processed or parsed, so the brain can build a mental model for that typeface or font. Now, many common or standard fonts available on most modern operating systems kind of meet those requirements.

They may not necessarily be, like, great typefaces. But they're often already familiar. And that familiarity is incredibly powerful. Also really powerful is that a typeface can tell a story.

Right? Can make a powerful first impression. You can, for instance, take a company that is rather nondescript and bland and turn it into something fun. And personable.

Or something exclusive and luxurious. Or something well established and well trusted. So we do need to align the typefaces with the tone. The messaging.

The brand of the content. You know, if your bank logo uses a cartoony kind of font face... Or typeface... That might impact the trust that you have in that.

And that does bring me, of course, to Comic Sans. Now, there's a great article -- I suggest that you read it -- by Eric Bailey. It's entitled: Comic Sans is a good typeface, actually. And it goes into a lot of detail.

From a technical standpoint, Comic Sans is not that bad. And perhaps even better than a lot of typefaces that are out there. Its perception as being inferior is mostly a self-reinforcing phenomenon based on peer pressure, elitism, and perhaps even ableism in the design community. And Eric explores those interesting accessibility implications of Comic Sans.

Not as a typeface, but as kind of a phenomenon in the design culture. So I would encourage you to read that. While complexity is not the most important aspect of a typeface, it can have a big impact on reading. Right?

The first typeface here makes it really difficult to find those foundational building blocks, the Ts, the Ls, the Xs, the intersections of strokes. So differentiating those characters becomes more difficult, compared to the second typeface. This is an email... Screenshot of an email that I took on my phone.

I received this from my kid's school. And the fact that the subject line is: Donkey Basketball tells you a lot about where I live, here in rural Utah. But as I was reading this, I got stuck on these words. I just...

My brain just could not parse what these words were. I got the word "advance", but then it was like... I was broken. No matter what I did, I could not decipher that second word.

Until I read the word "sold". Adjacent to it. And then that triggered a neural connection that allowed me to determine that it is "advance tickets". And so that context is incredibly important.

Our mind uses it extensively when reading. Especially when there are difficulties. Like a horrible complex typeface. We want to avoid and be careful with ambiguities.

Letter C that is very closed, has a very narrow opening on the right -- can be confused with a letter O. Having a more open letter C reduces that potential ambiguity. A letter e with a very narrow opening might be confused for a letter o. In the Gil Sans typeface, for instance, the letter uppercase i, lowercase l, and number 1 are virtually identical.

Whereas in Verdana, those characters are more complex, but those complexities help address those ambiguities. So simpler is not always better. Typefaces need to balance that complexity with a need to avoid ambiguities. Interestingly, one of the most visually ambiguous words in many typefaces is the word "accessibility".

We have two letter cs, next to an e, next to two letter ss, and visually, they're all very similar, and that can introduce that ambiguity. And difficult differentiating them. And then we have six characters in a row that have these prominent vertical features. One of the interesting tests that you can do on any page, on any typeface, is what I call the blur test.

Just kind of blur out that text, and then see how that impacts or introduces additional complexities. This is kind of a simulation of a certain type of visual disability. But being able to detect those ambiguities is really helpful for choosing types that are not going to be difficult for all of your users.

Each new typeface is also going to introduce additional cognitive overhead. Every time you come to a new typeface, you have to either develop or kind of remember the mental model for that typeface. How do these characters differentiate? What is the word and the letter spacing?

So each new typeface you come to, you have to rebuild that model. That takes cognitive load. So just be careful with the number of typefaces that you use. Especially if they're significantly different.

Very thin fonts make it more difficult to find those differentiations between those characters. You know, overly bold can also be problematic, because those characteristics can kind of be -- those differentiators can kind of be lost in the boldness of that text. Sometimes bold text can kind of run... Characters can run into each other, into adjacent characters.

And some of those differentiators can easily become lost. Of course, low contrast -- we know that makes reading more difficult. Studies have found that readers have higher trust in statements that are written in higher contrast. And so having a low contrast environment is not only difficult to read, but your readers are going to have less trust in the things that you're presenting to them.

Too much contrast can also cause problems. This isn't something to find in the accessibility guidelines, but too much contrast can cause halos or echoes around those text characters and that can impact readability, especially for someone with dyslexia. We want to be careful with very small text. There is no text sizing requirement in the web content accessibility guidelines, which is a little mind blowing.

But small text is especially impactful. We know from research we've conducted the notable impact it has on users with certain types of cognitive and reading disabilities. You know, text that is italicized can also be difficult. Also all caps.

Again, because those differentiators become a little more difficult to differentiate. And we don't want to shout at our readers. We want to be careful with text that is inside graphics. Raster-based graphics.

As that text is enlarged -- for instance, by somebody with low vision that needs to zoom or magnified page -- that text can become more pixelated or blocky. And so just another caution. Use real text whenever we can, to maintain that readability, when it's enlarged. We can be mindful of our line length.

Meaning the number of characters per line. You know, fewer than around 40 characters and more than around 120 characters per line will tend to introduce some types of overhead. If we have very short line lengths, we spend a lot of time wrapping down to the beginning of the next line. If the line lengths are very long, we might lose track, as we go back to the next line.

We might skip a line or land on the same line, and that introduces overhead. There are exceptions. Short lines are needed sometimes. Like in a haiku.

Right? With shorter lines, you can get away with smaller line spacing, because we don't have to try to solve that. The line spacing can be adjusted down to accommodate that. Centering of lots of text causes the beginning of each new line to be in a slightly different place.

So as we track back to the beginning of a new line, it's in a slightly different place on each line, and that can cause some overhead. It can cause additional saccades to have to be implemented to capture the text on that next line. Left-aligned text provides a consistent landing point at the beginning of each new line. Now, the ends of these lines of text, however, they're in different places.

Right? So some people think... Well, let's fully justify the text. Then the left and the right sides of the text form straight vertical lines.

And that'll be optimal for readability. The difficulty with this is... To fully justify, the word spacing is adjusted on each subsequent line. And that change in word spacing or character spacing can introduce a change in that mental model.

Right? Of what those characters will look like. And that can introduce some complexity as well. And really, it's not a problem.

We can visually see the ends of lines in our peripheral vision, and know when they're coming, and so having disparities in the end of the lines does not have a notable impact on reading. Fully justified text can also introduce what are called rivers of white. It's just... Because of that variable word spacing, it can introduce these patterns of white space that can be a little distracting to that reading experience.

It can just cause our minds to say... Hey, there's something a little different here. And that can distract us. Which is cognitive effort that we don't want to...

We would rather have that exerted elsewhere. A foundational principle of text is that the user has ultimate control over how your text appears. So we need to support flexibility and adaptability. If the user changes their font face for better readability, maybe because of a visual disability, maybe because of dyslexia, if they change the color of the text, the sizing of the text, or the paragraph, line, word, or letter spacing to spread these things out further, which can be useful for users with some types of disabilities, we want to ensure that things don't break.

That they don't fall apart. That they're maintaining that readability when the user makes those changes. We're gonna talk for just a moment about dyslexia. And just note that dyslexia is not a single condition.

Dyslexia is simply when someone has difficulty reading at an anticipated level. And that might be due to those neural networks or reading strategies not being fully formed, or it might be due to a brain injury or other disability. And we often think of dyslexia as being when people see letters or words backwards, and that's not usually the case. The user usually sees the words as expected.

But the neural networks do not align those words correctly to meaning. Because dyslexia is a diverse thing, there is not a single dyslexia-friendly or dyslexia-optimized typeface, despite what some sellers of dyslexia fonts might say, there's not a single typeface that's going to be good for everybody with dyslexia. Because dyslexia is not a single thing. Now, one consideration with dyslexia is that our brains have developed the capability to recognize faces and objects regardless of their orientation.

These two images present very different stimuli, visually. But your brain can readily determine that they're the same. Despite being mirror images of each other. For most things, differentiating left and right doesn't really matter.

These images -- you probably visually instantly recognize them. The Mona Lisa, a quarter, the Statue of Liberty. Even though this is probably the first time you've ever seen them in their mirror image form. They're reversed.

But we can readily recognize them. Back when I had hair, before the pandemic, every few years, I would change the side on which I parted my hair. I don't know why. I just did.

And only my wife ever noticed. Even the person that cut my hair every four weeks for 15 years never noticed when I would switch sides. But when we do this with text and we present these mirror images of text, suddenly it impacts meaning. Right?

It can become difficult or impossible to interpret those. So when we learn to read, we have to essentially unlearn the lowercase b and the lowercase d are the same. Our mind tells us they're the same. And we have to unlearn that.

We have to essentially rewire the brain over time. And that takes time. That's not always successful or possible. And so in providing differentiators between characters, like the lowercase b and lowercase d in Times New Roman -- they have subtle differentiators in the thickness of the strokes.

The directions in which the flags go. And so forth. To help differentiate those, even if they are mirrored. So...

That was a lot. Right? So how does reading work? Again, it's magic.

Kind of. Right? Our choice of typefaces, fonts, and how we present text can have a significant impact on that end user experience. So...

Go use your magic to create beautiful, highly readable web experiences. To that, I will say thank you, and see if there are any questions that I can answer.

THOMAS: Great. Thank you so much, Jared. That was awesome. And a really clean presentation.

Easy to focus on the I loved the readability. I really related to the part about the fonts, because I'm trying to learn Japanese. And I can basically read hiragana and katakana in the iPhone font, but if I see it in a different font, I really haven't built up that neural net yet. So I'm gonna give you some questions.

We've got a question...

Please give us your opinion of what I found on the web for an audience of disabled adults... Use bold instead of italics.

JARED: I think this would depend on the users. Italics, because it's changing a lot of the fundamental characteristics of the type, it just can be a little bit jarring. Bold can do the same thing. We can lose some of those characteristics.

Overall, I would probably suggest that in most typefaces, bold maintains those similarities more than italics does. So I would kind of venture a guess that the cognitive impact is probably a little lower when encountering bold for emphasized text than italics. Whether that is a sufficient justification for using one over the other... I don't know.

I would probably defer more to the semantics, to the meaning of what you're trying to convey, and really let that drive the cognitive decision versus just the legibility of those. I'll certainly consider the legibility, but some things I think are better presented as bold versus italicized or vice versa, depending on the context or content.

THOMAS: And a question from Claudio. Should we be calling dyslexia non-specific, because it's a symptom of a non-birth cognitive condition?

JARED: Yeah, I think so. Like a lot of... I think terms or vocabulary that we use in disability, we need to be a little careful. Especially how we're characterizing or labeling individuals with that.

But dyslexia itself is... We can't tie it directly to a particular cognitive process or visual process. And so it's a little bit different than some other forms of disability. So I think that idea of...

You know, generalizing it, just not labeling... Just understanding what dyslexia is, and more importantly, what it is not, is really helpful, as we use those terms.

THOMAS: All right. And you're getting lots of thank yous and applause in the chat. I'll ask a question from Jonathan. What evidence is there that font design evolves toward efficiency?

Don't designers often privilege elegance over economy?

JARED: That's a good question. You know, I think generally that statement is true. Right? As we look at the history of typography, and evolution...

You know, we've trended towards more simplicity. Certainly in a lot of Eastern culture languages, English itself, you know, our alphabet is really pretty notably simplified over time. I should say... Kind of a Latin-based alphabet.

Not just English. Right? There's a lot of these are related. So...

I think we've seen that. Now, we're at a real interesting time. Right? In the last 20, 30 years, anybody can design type.

And that idea of... Are we favoring elegance? And differentiation over maybe... Affordances and efficiency...

Yeah. I think we're seeing that with some typefaces. I think, however, a lot of the research is showing... I said it kind of briefly.

The way that a font looks tends to have less impact on legibility and readability than in following the foundational rules of good typeface design. For instance, avoiding ambiguities. And so we can really convey style in typefaces. Without a significant impact on legibility.

So there's always going to be a balance there. I think sometimes we do favor fancy and totally different and kind of maybe a shock value of typography and font selection. Over the end user experience. That's a little concerning.

But I think we can find a good balance.

THOMAS: All right. We've got another one from Don. Old school typing class taught to leave two spaces after a period. I know this changed long ago, but is a habit that is hard to break.

Do you think this is something to be cognizant about?

JARED: Yeah. Two spaces is wrong. It really is kind of a personal preference. I think...

I did read a little bit about this. And probably need to give it a little more due diligence. I think one of the biggest things is -- in particular text, is consistency. Again, if you're reading text in a particular font, when you encounter two spaces versus one, your brain can really quickly attune to that.

And if that's consistent, it will build that model for that spacing. Just like it does with character and word spacing in various typefaces. So... You know, if you're alternating in that spacing, then that's problematic.

That's something I really see when I read. Right? If there's two versus one, if it's changing back and forth, that really impacts me. Maybe it's an annoyance.

Maybe it is kind of my neural network saying... Hey, this isn't consistent!

But overall, I'm not aware of anything that would... Any research that would say... Yeah, one or two is better than the other.

THOMAS: Okay. We're gonna take just a couple more questions. We've got one from Jennifer. I'm curious if there's any connection between learning cursive writing in childhood and when writing or reading...

And recognizing serif or very ornate fonts. Thinking of your donkey email.

JARED: Good question. I don't know the answer to that. I would suspect... There has been studies sort of that measured the impact of learning cursive in that writing style to reading generally, and they've not found strong alignment.

In other words... Students that learn cursive versus those that don't -- there's not a big difference in how they read generally. Whether learning cursive could maybe build those neural networks that would support characteristics of, say, fancy cursive-type fonts... I would suspect there's probably something there.

But I don't know for sure.

THOMAS: All right. Question from Matt. How mature is this field of research? Is there anything we still need to understand better?

JARED: I think there's lots that we need to understand. I would suggest reading some of the research by Stanislas Dehaene, who I cited. He's doing great research. He's measuring brain activity and getting down almost to the neuron level in the brain of activation for...

And seeing the differences between the brain response to characters and different font faces and mirroring, versus images. And there's just some incredible research that's happening. If I could go back 20 years, that's what I would do. In this field of accessibility...

And learn how to measure brain activity. And instead of saying... Oh, this is difficult or this is easy... I would go to research and measure the impact of those things on the brain.

I would love to do that. And there are people that are doing it. But even the best researchers, Dr. Dehaene...

He's the first one to say: We don't know how a lot of these things are working inside the brain. A lot of it is theoretical. Some of the things I presented today are a little theoretical. But I think they align with these concepts of better accessibility.

So yeah. There's a lot. I wish I could go back in time. Maybe I'll change my career and become a cognitive psychologist and therapist and measure these things.

THOMAS: All right. Let's end on a fun question here. This is from Deb. She said: So much I didn't know.

Fantastic talk. But she wants to know if you had to pick, what's your favorite typeface?

JARED: Oh, snap! I knew somebody... I knew somebody would ask that. You know what?

I really... Ha-ha... That's a great question. I really can't say that I have, like, a favorite.

You'll notice my presentation actually used a variety of font faces. And some of that was actually intentional, to present things a little differently. I actually used some different contrasts and a few things in some areas... Some of that was intentional.

Some of it was just like... Yeah, that looks nice. And that's usually where I go, kind of following some of those foundational principles of non-ambiguity and good contrast. And size and clarity of the characters themselves.

A lot with typefaces... Kind of you know it when you see it. So yeah. I just...

I tend to go with ones that I liked, that follow these principles. I don't really have a favorite. So...

THOMAS: Can't play favorites. Right? Well, thank you so much, Jared. This has been an amazing talk.

And... Applause for Jared. Thank you so much.