Typographic Accessibility

Transcript

[00:00:00] Ben: Howdy, howdy, y'all! I'm back! Been gone for a few weeks. Now I'm all married and everything. But howdy. Welcome back to Some Antics. It's great to be back and it's great to be joined by the one and only Bruno Maag! Bruno, hello! Welcome to the stream!

[00:00:17] Bruno: Hello, hello! Thank you very much! You know, it's quite exciting to be live video streaming!

[00:00:24] Ben: It's definitely a different beast, isn't it?

[00:00:27] Bruno: It is.

[00:00:27] Ben: Than even doing, like, a rehearsed speech or anything like that. It just feels different, I think.

[00:00:34] Bruno: It is very different. In my whole career, you know, I've done many, many speeches and to a live audience, you know, in an auditorium, and sometimes to audiences as big as two and a half thousand people. And it just feels different because you have that feedback, that interpersonal feedback, even if you can't see the audience, because you know the glare of the lights or whatever, but you get a sense of the room, you know, and stuff. And obviously you know what the audience is like because of previous speakers or the speakers before you, you know. You have spoken to people, like, during the reception, you know. So you get a sense of what your audience is like, and then that allows you to tune, you know, and fine-tune your talk a little bit when you speak, you know. How much humor can you add, you know, or is the audience sensitive to a particular way of talking, say? You know?

[00:01:29] Ben: Gotcha.

[00:01:30] Bruno: And on the video, you just don't get that anymore. You don't have any feedback whatsoever.

[00:01:36] Ben: Yeah, well, we do — so I can see, and unfortunately you don't have the chat up, but I can see the chats up. We've got lots of wonderful people in today. Jason Lengstorf has sent over a whole crew. Thank you so much, Jason and friends for coming through. And thank you everyone for being here!

So Bruno, you mentioned you've had a career of doing speaking. Trost, thank you for the subs. Do you want to kind of introduce yourself for folks who haven't seen you around?

[00:02:01] Bruno: Yes, yes! Okay, my name is Bruno Maag, and I was the founder of a company called Dalton Maag, a studio that specializes in typeface design. It's based in south London in the UK. And I was the founder and then eventually the chairman of that company as well. And I've now been in retirement for the last two months and I very much enjoy it, I can tell you that. You know, once you go into retirement, you realize that work is actually vastly overrated, you know? But yeah, my whole career has been in typography. And then with Dalton Maag, obviously more specifically in typeface design. And over the last nine years I'd say, you know, I've really become much more interested in the accessibility part of it. Particularly, well, the neuroscientific part of reading, which obviously, you know, is closely linked to accessibility. So that's sort of like, in very short, sort of like my career, you know?

[00:03:13] Ben: So, I always try to, like, you know, vet a guest before I have them on and kind of see what they've done that, like, would be interesting to talk about, and I wanted to see if you had designed any typefaces that I would be familiar with. And you had! You designed Ubuntu, right?

[00:03:29] Bruno: Ubuntu, yes. I designed Ubuntu, obviously with my wonderful team at Dalton Maag. You're probably also familiar with Bookerly on the Amazon Kindle. That's also one of our creations where I was involved in. And then more recently, the typefaces for the BBC, you know, which I'm going to show a little bit, you know, here in the talk as well, and stuff. So that's some of it. In the US, you will probably also see where Dalton Maag has been involved, you know, the company I founded. Typefaces for Intel, for HP. We've worked with Facebook, you know, for like the Facebook Camera product. A whole set of, like, different styles of fonts so people can personalize their messages, you know, when they send out their pictures to their friends. That was interesting because it came in a whole host of different writing systems, different languages. I think we did about eight or nine different writing systems. And some of it was quite challenging as well because, you know, how do you translate, from a design point of view, how do you translate one design style into another writing system, into another culture. So, respecting the other culture, yet still make sure that from a design point of view, the two different writing systems with two different cultural backgrounds actually form a cohesive unit, you know.

[00:05:00] Ben: Yes!

[00:05:01] Bruno: Which is obviously an entire talk in itself!

[00:05:05] Ben: Yeah! Man, I need to go find, and maybe I'll peek off to the side and look for this, but I remember reading about someone who was doing, like, joint typeface design for, like, the Roman letters, like your ABC, and then the, like, Japanese character set as well.

[00:05:23] Bruno: Exactly!

[00:05:24] Ben: Trying to, like, make those feel similar vibes so that you could, like, put those fonts next to each other and they would look cohesive.

[00:05:32] Bruno: Yeah.

[00:05:32] Ben: Incredibly, incredibly interesting stuff.

[00:05:35] Bruno: Yeah, yeah. I mean, this was one of the biggest projects we did in the past, already about 12 years old, 10 years old now, was for Nokia when Nokia was still Nokia, you know? Nokia Pure, the typeface was called, and some of you guys may be familiar with that. And that was a challenging project, and we did altogether 19, I believe? 19 different writing systems. You know. And we did Klingon as well, as a bit of a joke. But we did Klingon, and apparently, the Klingon community regarded this as the best Klingon typeface that had ever been designed. Which is pretty cool!

[00:06:16] Ben: I mean, when the nerds are happy, that's when you know you've done a good job.

[00:06:21] Bruno: Oh, yeah. Oh, yeah.

[00:06:24] Ben: Alright. So, we're here to talk a bit about typographic accessibility. You've actually prepared some slides, so I'm going to start showing those off to folks and…

[00:06:32] Bruno: Okay!

[00:06:33] Ben: And we can take it from here!

[00:06:36] Bruno: Great! Okay, well, thank you again! Let's go straight into this. So, it's all about typographic accessibility. Just very, very briefly again, quick intro about myself. Obviously I've already given you some background, but I started my typographic career in 1978 when I started an apprenticeship as a typesetter, and back then it was still in metal type, you know, so composing letter by letter. What you see here on the screen is in a sense — and for those of you who speak German, you know, you may be familiar with it. This is basically a certificate of… not excellence, that's wrong. A certificate that I have successfully completed my apprenticeship. And the Gautschbrief, you know, used to be in the old days, used to be that certificate, and you needed to have this in order to be able to work as a professional. You know. And it's basically a thing of a guild, you know, in that sense. But it proves that I have completed my four-year apprenticeship and that I am good enough to actually do the job. Anyway, so that was my starting to typography, my career.

But one a lot of people don't know is that I'm also a certified tank driver. Now, obviously being from Switzerland originally, as a Swiss citizen I had to do military service, and I was then kind of like put into this unit, put in an artillery unit, and was driving this particular tank, an M113. Now, obviously we're in a little bit of a sensitive time right now with, you know, threat of war looming, et cetera, et cetera. But you know, nonetheless, I have to say driving a tank is probably one of the most fun things you can do. I mean, first of all, you are the king of the road or the queen of the road. You are the absolute ruler. Nobody and nothing is in your way. There is no obstacles. You just either go across them or through them, you know? So it's incredible fun to drive it.

But there is also a point, you know, to having this in this talk, and it is about accessibility. And what you see now is the inside of the driver cabin. And as you can see, it doesn't look very pretty. But this is user interface design at its best. It does exactly what it's supposed to do. And also, it shows that the user interface design is designed for the purpose and for a specific audience, you know.

Just to give you a very brief overview. So the two sticks that you have here, those vertical sticks. That's basically your steering sticks. You know, you pull one of the levers. It slows down the track and then you go around the curve, you know. Over here, this one is your gearstick. It's kind of like a semi-automatic engine. And this one, these two levers, is kind of like the handbrake, if you want, you know. And then here are, like, the indicators for speed, engine temperature, and RPMs, et cetera, et cetera.

So, only a handful of actual instruments, you know, but with a five-minute induction, you can actually drive these things. Everything is self-explanatory. You do not need more than five minutes to actually be able to move away. However, it does take a little bit of practice, obviously, to maneuver the tank, you know, get an idea of its bearings, you know, because obviously it's oversized. And actually, what a lot of people don't realize as well is that when you drive on a tank, because it's on tracks, the turning point is over the vehicle's center, whereas in a normal car, you know, the turning point is over the back wheels. That means that when you go around the bend, your back end swings out. So when you take a bend, when you take a curve, you have to be able to see, kind of like take count of that, that your back end swings out, you know, unlike a car where everything turns around the back. Yeah. I hope that makes sense.

But anyway, this shows, you know, good user interface design. It's not very aesthetic. It could be probably, you know, kind of like tidied up a little bit more. But it does exactly what it needs to do. This is success as far as user interfaces go, I think.

Now, before we go into typography, we also need to talk a little bit about neuroscience, you know. Mostly about the brain. And I want to start off with… kind of like reiterating the concept, but we have, obviously, two hemispheres, and the left hemisphere is responsible for the right side of your body and the right hemisphere is responsible for the left side of your body for all the motor movements and everything you have. And it's also important to understand that the brain is the most important organ. You know. The brain controls everything. The brain basically makes you the human being. The brain lets you conceive and perceive the world as it is around. That also means that, you know, everyone has their own reality because everyone is perceiving things slightly differently.

But you have to understand the brain is where things are at, and everything else is just a feedback into the brain. So that also means that of course if you have a trauma to the brain, that it can affect parts of the body like, for example, in the little illustration. If you have a trauma in a particular part of your brain, that could affect your arm movements. It could paralyze you, say, if you have a stroke, you know, or if you have been hit and the trauma has been caused by an external force, it can affect part of your body. It also means it can affect actually the workings of the brain itself, you know, how the neurons connect and so on and so forth, or whether you can see or not. So everything happens in there.

We then also need to look at kind of like some basic details when we talk about typography. So, here we're looking at the left hemisphere. And the left hemisphere is, for the vast majority of people in the world, is where the linguistic functions happen. In the right hemisphere is usually where all the arithmetic functions happen. And so this is true for about 90 or so percent of global population. In about 10%, it's reversed. Right. But it doesn't affect their ability to do the functions like everyone else, you know. If you see what I mean.

So, for the purpose of typography, we need now to look at the motor cortex, which is the light blue area here, the kind of like ellipsis; the primary auditory cortex, the dark blue circle; and the visual cortex, the red ellipsis. So this is where basic function happens. Now, the visual cortex is where all the visual input comes in and gets sorted. A first initial processing. The auditory cortex is where all auditory input — sound from your ears — is coming in and gets sorted. It's a first processing. And the motor cortex is where all your body's motor functions are executed. They're not planned. They're all coordinated. They're simply executed.

We then these two new circles in kind of like light brown. On the left, we have the Broca area, and on the right, we have the Wernicke area. The Wernicke area is responsible for language input, and the Broca area is responsible for language output. You know. I'm being very conceptual about this, you know. It's obviously far more complex than I'm making it out, but it gives you an idea of what is happening. So as I'm speaking now, and you're hearing my voice, the voice goes into the primary auditory cortex and that recognizes that it is speech. And the speech patterns are being sent into the Wernicke area where they are analyzed and processed, and sense is being made of the speech. I then have to respond, or you may want to respond to me, at which point, your Broca area is being activated. A sentence is being formed. The information of that sentence is then being sent into the motor cortex, which then activates all your muscles in your face, in your throat. It controls your breathing so that you can form a speech pattern. And you're hearing yourself talking into the Wernicke area for a feedback loop for self-regulation. And if I'm saying something wrong, I can hear myself saying it wrong. Therefore I can correct it. So it's a continuous feedback loop. So this is broadly speaking, how the linguistic area functions. Broadly speaking.

And this is kind of like important because obviously the visual part of it is included in that as well, and I'm going to go into that a little bit more detail later. But when we read, it is obviously a language input and therefore, the linguistic area of the brain is activated, including Wernicke and including Broca. For example, if I am writing, Broca is activated. It formulates the sentences, and then it tells the motor cortex how to actually move my hand and my fingers and my arm to do writing or to do touch-typing or whatever form of written language I am creating, you know. And the same goes, say, for example, for deaf signing, or maybe for the deaf-mute community — deafblind community, sorry — where touch signing is happening, you know. All that goes via the linguistic functions via Wernicke and Broca, you know, because this is language. It's as simple as that.

Let's come to typography, you know. Typography was invented roughly five thousand to five and a half thousand years ago, you know. And it is totally reading and writing, and it's a completely neural niche. At this point, we also have to be clear that… or this dispel this myth that the brain… we humans only use about 10% of the capacity of our brain. It's absolute rubbish. You know. The brain is used a full 100%, but not always 100% at the same time, you know. Because if that were happening at 100% at the same time, you'd be surviving about three days because the brain is the organ in our body that uses up most of our energy. You simply could not feed it enough energy to actually maintain 100% output at the same time. Right.

So when reading happened, neuronal recycling had to happen. So basically, neurons that were doing something had to be reacquisitioned to do something new because the previous thing was no longer necessary, right? And for that, the brain activated the visual word form area, you know, which is a part of the brain not far from the visual cortex and not far from the primary auditory cortex. And I'm going to go back to the map in a minute as well to show that. Basically, before the advent of agricultural society and more sophisticated societies around, you know, 3500 BC, 4000 BC, thereabouts, people oriented themselves on kind of like abstract shapes in the landscape. And as these were no longer needed, or that skill was no longer needed, the visual word form area, that part of the neurons, was reacquisitioned to then acquire this new skill, which was reading and writing, you know.

And as we can see, you know, of course humans then took objects and transliterated the objects, you know? So for symbols, for writing purpose, or they took little shapes completely abstract with nothing else, but then maybe created a letter out of it. Here I have just a quick overview of some of the very first writing that you can see, or that was around. On the left, we have Egyptian hieroglyphics, which was pretty much the first instance where writing happened. Now, hieroglyphics are literally formalistic representation of objects in the world, you know. And obviously, I've kind of like simplified and rationalized a little bit, but there are objects and they represent a concept. They represent a word, a thought, and so on and so forth. In the middle, we have Demotic. Unfortunately, we can't see it that well, but… oh, no, sorry. It's not Demotic. I'm getting this wrong. This is the Babylonian cuneiform, which is a semi-alphabetic and syllabic writing system. So, we're seeing this switch from a conceptual writing system into a sound-based writing system. So that's quite an important step, right? Because you can then now… you can actually start putting symbols together in order to create sentences, which with a iconographic or with a concept-based writing system is much harder to also kind of represent the complexities of like modern language, you know. And then on the right, we have the Phoenician demotic writing system. So purely alphabetic already, you know. The demotic on the left here, that led eventually into Greek in the middle, which then eventually led into the Latin writing system as we know it today, you know. And as a little typographic exposé, the writing system or the script is called capitalis monumentalis, so the monumental capitals, which was used from about 400 AD right into about… 400 BC right into about 400 AD, you know, for a good 800 years. This was the main way of writing in the European world.

Now, going back to the neurosciencey bit, here we have a representation of an eye and how light is projected onto the eye. Obviously, it's very much like a photographic camera. So from the left, light goes in through the lens, gets projected to the back of the eyeball where the shape appears, you know. At the back of the eyeball we have, in the middle, we have the fovea, the red dot. Then the orange area is the macula. And then we have the retina kind of like the light orange/browny bit, you know. And this is the area which is actually light-receptive and light-sensitive, you know. There's a white spot here as well. That's the blind spot where all the light receptors — so the cones and the rods — connect into the optic nerve, you know, which then obviously leads to the back of the brain.

Now… the retina — so the light-sensitive area of the eye, of the back of the eye — covers about 70 to 75% of the back of our eyeball. So that gives you a viewing of roughly about 150, 160°, you know. So 180° is theoretically actually already out. Although you can probably just about make out if you have your hands set to 180°.

Now, when we read, we also need to understand that we don't read in a continuous line, but we read in saccadic eye movements. So basically you get a fixation of your eye on a particular character, here represented in black. And at that moment, the eye and the brain capture about seven to eight, seven to nine characters. Once it's captured that, it moves on about seven to nine characters to the next saccadic fixation and so on and so forth. And all that information is continuously sent back to the visual cortex. Just to give you an idea of why it is seven to nine characters at the roughly a reading distance of 30 centimeters with a type size of about 9 to 11pt, the reason is seven to nine characters fit pretty much exactly into the fovea. The fovea is, of course, the area of the back of your eye with the highest concentration of light receptors, you know. So therefore you have the best representation of what you're seeing. In the macula, the resolution starts going down a little bit, so you're seeing a little bit less, but you can still make out a fair good amount. And then once you get the retina, it starts getting pretty poor. You know. You can just about make it out, but a lot of it is guesswork.

Now when the brain starts calculating the saccadic jumps, so at the fixture, it already works out where the next fixation is, and the one after that. It starts estimating the one after that as well. So although we're focusing on the fovea area, and that's what's being processed, the brain at the same time actually processes already where it's going to be from the information it has. Now, this is the ideal setup. In some instances, you know, people say now, "Oh, you know, for good accessibility, you need to have 12, 13, 15, 16pt sites. You know, large letters! That's the best accessibility!" No. Because if you increase the type size, you reduce the number of characters that go into your fovea, and that requires more saccadic jumps. And research has shown that the ideal number of saccadic movements is seven to eight saccadic movements per line. Anything less or anything more than that and reading speed and comprehension and reading accuracy dramatically drop. So before you go off and actually make the type size larger, which is detrimental to the comprehension, maybe if you have a problem with the typeface and it's not very accessible, maybe you should start thinking about using a different typeface that's a little bit more accessible and you can avoid some of the problems of having to go larger. Yeah.

Once stuff is on the back of your eye, you know, it gets then sent along your optic nerve into your visual cortex at the back of your brain. Sorry about that. At the back of your brain. I don't know whether you guys can see the pointer, you know. And here we come back to our little map. The back of the brain has the visual cortex, and from the visual cortex, anything that is language is being sent into the visual word form area, the red dot. In the red dot, every single character gets decoded, character pairs get put together, syllables get put together, and word shapes get put together. You know, the brain knows how to do that, but it doesn't have an idea of what it is. It has no meaning. It then sends that word shape into the yellow area, which is the lexical area. So the Broca — roughly where Broca sits — to attach meaning to a word, you know. And if it cannot successfully attach the meaning from the visual shape alone, it actually sends that shape into the phonological area, which sits right next to the auditory cortex to attach a sound unit to the shape. And then together with visual shape and sound shape, it can successfully create the meaning of the word, you know.

This has an impact also on language, you know. For example, like, English is a really, really difficult language because nothing sounds how it's written, you know, which is also why English has a really high percentage of dyslexic people. About 15% of the English-speaking population is dyslexic compared to, say, about 7% of the German- and Italian-speaking population, because English is a transparent language, but that's a diff dyslexia as well. It's also one of my, uh, little, um, uh, kind of like not hobbies as a word. Uh, you know, my, my, my things, uh, that's another 20 minute lecture or half an hour lecture in itself, you know? Uh, but basically to put it short dyslexia has very little to do with reading and it has a lot to do with sound, you know, so don't give me that, you know, characters are jumbled up and all that.

No, and you're not dyslexic, you know.

Anyway. Let's get into the typographic parts. So we got all the background, you know, about the neuroscience. When you talk about typographic accessibility, or accessibility in general, you have to think of it in three pillars, you know: emotional, functional, and technical.

You know. Emotional: is it appealing? If it's not appealing to you, then you already have failed at the first accessibility hurdle, you know. If you don't like it, you're not going to engage with it. And it can be wonderfully built, it can be… everything can be perfect. If you don't engage with it, the whole exercise is moot. You know. So you have to create that emotional appeal. That's the first pillar of accessibility. Not the only one, but the first one, the first step.

The second one is the functional. You know, is it appropriate to the audience? You know, one of things you have to be clear is that you cannot be all things to everyone. You know, you need to design for your audience. You need to understand who is your audience and what are the audience's needs, and of course also what is your product need. And then you need to bring those together.

The last one is technical. You know, is it built correctly? Now, you know, I can have a fancy car, you know, and it's brilliant, you know. You know, I'm an older gentleman with disposable income. I like a fancy car. I don't want a Ferarri. It's too low down, you know, because I can't get out of it anymore. That kind of thing. But I want something that appeals to me, so well, you know, I'll get a nice, sporty car, you know. Like, not a limousine, but something a bit sporty, da-da-da. If it has square wheels, it's not built correctly! It's useless! It fails! You know, it appeals emotionally. It's functional, you know. It's appropriate to the audience, but it's built wrongly. Or if it hasn't got, like, keys or ways to open the door. It fails! It's wrong. You know.

The three have to kind of like come together, you know. And you have to find, if you think of it as a Venn diagram, you know, you have to think of the sweet spot in the middle, you know.

So, let's look at the emotional part a little bit, you know, so which in that sense is a brand expression. Here we have just a couple examples that actually show, you know, how a typeface can represent a brand and how we can create that engagement, you know. Obviously Nickelodeon is for kids, you know, so you want something bubbly, a bit awkward, a bit weird, you know.

[00:33:36] Ben: It's squishy and, like, I could just, like, squeeze it, almost like a plush toy or something like that.

[00:33:41] Bruno: Exactly. Exactly right, yes.

You know, Lush, you may be familiar with. You know, it's a cosmetics brand. You know, they do kind of like these soaps and smellies and all that sort of stuff. So the handwritten letters, you know, really is appealing to the audience of the Lush brand. You know, it creates that familiarity, that personal touch. Intel is a computer company, was a chip company, is an engineering company, so you want something that is precise, clean. You know, without fuss. And then Channel 4. That's one of the UK channels. It's a publicly owned channel, but works commercially. And it's quite avant-garde and it always, you know, pushes the boundaries a little bit, you know? So, you have, for the information basis, you have like a very simple typeface. And then for the display versions, you know, Horseferry and Chadwick, you can see — Horseferry, you can see, is a typeface. You know, it's a bit edgy, a bit weird. It really tries to disrupt, you know. So again, it's appropriate to the brand.

And the next few slides come from my colleagues from Dalton Maag. I've been given permission to show them. Just to give you a little bit of an idea, you know, how different typefaces could be perceived, you know. Sophisticated. Or hardworking. I'm going to go through quickly on these, you know, but just for you to get, like, a bit of an idea how you need to look at typefaces when you start making these choices, you know, to get that emotional connection, you know.

And here, we also have to make clear that you have to be careful that style does not go over function. You know. "I love Coco." Brilliant! It's a beautiful art. It's nice. You know, it works. But once you've seen "Cow," you can never ever unsee it again. You know. So clearly, you know, it just about works because it's within a context, you know, and you see "Chanel," so yeah, it's unlikely to mean "cow," but you read "Cow." So clearly the designer didn't quite understand that style-over-function thing. And this is where functionality is starting to come in as well. So functional: is it appropriate to the audience?

And I want to give you a few examples here, and this is probably also quite important for you guys out there, you know. I want to talk a little bit about just one of the things, you know, that I came across in my career when we designed the typefaces for Nokia Pure. And the Pure typeface was created for, like, about 19 different writing systems, as I mentioned earlier, and one of them was Arabic. So we designed this Arabic as you can see it here now. It's beautiful design. You know, it feels like it fits with the Latin. You know, it has a slightly geometric structure, but not too hard, you know. It's very vertical. It's very horizontal. It's an Arabic of, broadly speaking, the Kūfic style, you know? And yeah, it works well because it's kind of like a geometric appearance. It's obviously also really well suited for like a mobile phone environment, you know, for the pixel grid on the user interfaces, you know, because we only have a handful of diagonals in there. So it looks really good.

We designed the typeface. The Arabs were happy. It worked really beautifully. And then the Persians got their hands on it and they said, "Hmm. We can read it, but we will not. We refuse to read it because this is Arab imperialism." That's a cultural thing, you know! Because of course, you know, when you go back, you know, thousand years or something, when the Ottomans and the Arabs, you know, went into Persia and kind of like through Islam, you know, went into these areas and started… I wouldn't say subjugating, but you know, not oppressing, but colonizing to a degree, you know, these areas and imposing their writing on to these people. So this is kind of like now being taken as an Arab imperialism. So we had to go and design a typeface more in the naskh style, so which is a slightly more calligraphic style. And this style now was then accepted. by all — by the Arabs, by the Persians, and by the Central Asians, you know, so Pakistan and Afghanistan and the whole, you know, that whole band across, you know. Whoever uses Arabic as their native writing system. That was accepted as a compromise that everyone could live with, you know. So this is the naskh style.

There's many other styles. In Persia and in Pakistan, they use nastaʿlīq and Thuluth styles, which are almost impossible to recreate on a computing level because they have cascading baselines. So the sentence runs in a horizontal baseline, but words are cascading, so the words themselves might actually run on a diagonal baseline. Right? So from a computational point of view, almost impossible to do, you know.

Then we need to think about print versus pixels. And here, I want to just talk a little bit, or just hint at the work we did with the BBC. Helvetica and Gill Sans were, up until about four years ago, the BBC's primary typefaces. Everything was there done with those fonts. We were then approached by David Bailey and Gareth Ford Williams to help them develop a new typeface, you know, that was fit for the changes that the BBC wanted to do. They wanted to move from being a traditional broadcaster into an online content creator, and simply put, Helvetica and Gill Sans didn't do the job anymore. They didn't work well on the screen, legibility was really compromised, et cetera, you know. We then created BBC Reith Sans and BBC Reith Serif. So we created a typeface system of a sans and a serif, each in five weights, so light, regular, semibold bold — or not semibold, medium — bold, extra bold. Plus the italics, you know. So a whole range, which then allows, now, the BBC to mix and match the fonts together to create different brand expressions for the different products the BBC has, you know, but all within one overarching BBC brand expression. So the emotional connection has now been guaranteed. The typeface was designed to be functional for online purposes, but also for print, you know. And after the design was completed, the BBC did some legibility testing and readability testing and actually, that outperforms Gill Sans and Helvetica quite dramatically. So it works. It really, really does the job. And the beauty is, when the BBC switched it, hardly anyone noticed it, you know. For me as a typeface designer, that's a good thing. If I give something to people and people don't notice it, you know, that's a good thing. Although it really makes the job really tough because you don't get any feedback, but no feedback is good feedback in this instance, you know.

But also, to give you a little bit of an idea about what accessibility actually means in the context of Helvetica or, like, a grotesque typeface and the BBC Reith. On the left, you have the BBC typeface. On the right, you have a typeface called Aktiv Grotesk. So it's very similar to Helvetica and stuff. And if you sort of, like, think of someone who has macular degeneration, which is very much an age-related condition, you know, you will find that, you know, everything is starting to blur. And then all of a sudden the Grotesk typeface on the right, you know, starts becoming much more difficult to read. And you're — whoops. Sorry again. Sorry about all that. Goodness. You're not quite sure whether actually you can distinguish "i" from "l" anymore. These c's… are they o's? You know, it's just kinda like you really have to work hard. Whereas with the BBC font, it's still fairly clear, you know, even with a macular degeneration condition or any other condition for that matter.

Earlier, I was talking about the number of saccadic movements in a line length. So when you design, make sure your line lengths are not too short or not too long. Keep it within those seven to eight saccadic movements. So that basically means that you should stick with about 55 to 65 characters per line, you know. This is something that we typographers have known for the last 500 years, you know, that this is the ideal number. But now we have science to actually prove it, you know, because if you have seven to nine characters per fixation, and you multiply that with seven to eight saccadic movements, that gives you 55 to 65 characters. You know? Science is great.

[00:43:59] Ben: Science is awesome.

[00:44:00] Bruno: Science is awesome!

[00:44:01] Ben: I think — like, connecting this to things I'm familiar with, like, I frequently have to, like, look at the Web Content Accessibility Guidelines.

[00:44:09] Bruno: Yeah!

[00:44:09] Ben: And they set a maximum line length of 80 characters in that case. But that's the, like, you know, if you absolutely must have to, 80 characters is like the limit on what's terrible, basically.

[00:44:26] Bruno: Absolutely. Absolutely. Yeah, it is. Of course, you know, like, within a digital environment, it's much harder nowadays to do it as well, because everything is dynamic, you know. So you have far less control over actually how your content is presented, and you have no control over the device the user is looking at that. You know, so it's much harder, but at least if you as a producer of the content, you have an understanding of what is optimal, you can maybe create a framework that defines some of the parameters, you know?

So, this is sort of like what an ideal line length, you know, we'll be looking like — roughly 55 to 65 characters.

Contrast, very important. And now if I just go back quickly. So here we see a serif typeface, you know, very monolinear so it gives you, like, a nice and even sort of, like, impression on the page or on the screen as well. Here, I used a high-contrast typeface, so all the vertical strokes are all really thick and the horizontal strokes are really thin. This is bad. This is great if you're using it large, you know, for an emotional expression for a display environment, but for text, this is really bad because it creates visual striping, you know. And visual striping has been shown to trigger what's called reading epilepsy. You know? It's a rare condition that some people suffer from, you know, that actually when they read text, they get a seizure, you know, and it is usually triggered by high-contrast typefaces, by visual striping. So get away from that. You know, don't use this type of type, this kind of typeface, you know, for continuous reading. Don't worry about a single line or, like, a headline or so. That's perfectly acceptable because it's larger, you know, and it's presented differently. But not in continuous reading. In continuous reading, you want to have something that is even and smooth, almost monolinear. Not boring. You can have a slight contrast because it creates a bit of tension, but overall, it's nice and even and harmonious, you know.

And of course also foreground color/background color contrast, and this is something that you guys are probably familiar with from WCAG anyway, you know. I don't really have to go into that, you know. But again, it's something that typography has… classical typography has known. You know, in book typography, it's always been clear that you should never go full black on full white. Always go slightly off-black and slightly off-white for an ideal reading experience.

User behavior and sustainability, you know. On the mobile devices nowadays, you know, people actually have a tendency to turn down the brightness on the screen. And this is not so much because of the glare. It's because they want to preserve battery life. You know, it's simple as that. And they're gonna put it down to the bare minimum that they can just about make stuff out. You know. That means when you choose your typefaces and your sizes and everything, you need to bear that in mind. "Is my typeface strong enough? Is that regular weight strong enough that it can actually hold up against a reduced brightness on the screen?" So think about that, too.

And then user behavior can also, of course, also go then into sustainability. Here is a typeface we did nearly 20 years ago for the British Telecom, for the actual telephone directory. And just by changing the typeface, you know, without changing the layout, on average about ten lines per page were saved. So you multiply that over 300 pages, over about 15 million books printed a year. It took British Telecom two print runs to recover the investment into the typeface. You know. So paper was saved, ink was saved, you know, and obviously, printing time was saved. You know. It had a major environmental impact. Yeah. And this is what you can do just by making slight tweaks and thinking about stuff a little bit more consciously, you know,?

Last one, technical. I know we're starting to run out of time, but we can certainly get through the technical part.

Now I was talking about, you know, low-contrast and high-contrast typefaces. Low contrast on the left. That's the BBC Reith typeface, the serif. And on the right, obviously it's… I think it's Bodoni.

[00:49:08] Ben: I was thinking that was Bodoni! I wondered.

[00:49:10] Bruno: Yes, it is Bodoni, yeah. And at large sizes, it's perfectly fine but, you know, below I've simulated what happens if it's at smaller sizes so you have fewer pixels available. And the thing nowadays as well is that many typefaces come unhinted. Now, hinting are extra instructions built into the font that tell the outline how to distort to fit on a raster grid at any size or any resolution, right.? To give you optimal alignment, particularly of vertical alignment zones, but also align stem widths, et cetera, et cetera. You know. And when you have an unhinted typeface on a website, you can see that particularly when on the x-height, the characters jump up and down. That means the typeface has not been hinted. And that's a technical fault, you know, in a sense, and it affects the user experience, which means it affects accessibility and so on and so forth. And with high-resolution or high-contrast typefaces at these lower sizes, the vertical striping becomes even more prominent because all the thin areas are starting to break through and you literally just get these vertical lines, and it really affects legibility and the risk of seizures even more, you know. So again, another reason maybe to go for a more monolinear style of a typeface at the reading sizes, you know. In a screen environment as well, when you're not entirely certain how the font will behave on the screen, you know. And different operating systems also handle the hinting information differently. macOS, for example, ignores it altogether and applies its own routines of anti-aliasing, for example, which is why at small sizes, all the phones always look really washed out. You know. Anyway.

Not all sizes are equal, you know? You've got to come away from this idea that if I define a type size of 24 pixels, everything will be okay. It's not, because the typefaces in themselves vary in size. Right? Because typefaces, even in this digital age, are designed to fit into an em square. And this is something that comes from the old hot metal days, where you obviously had physical boundaries, you know, particularly in the height. You had a physical body, you know, and you could not exceed that. So that physical height times square would be the em square. And this is still being used today in a digital environment to define the height of typefaces, you know.

And if we're looking at this now, three typefaces. On the left, we have Segoe. In the middle, we have… god, it's escaped me now. BBC Reith, I believe — no, it's not BBC Reith. I can't remember now. It's escaped me now, sorry. And on the right, we have Verdana. And you can see the x-height is fractionally larger each time we go more to the right. So Segoe has the smallest x-height; Verdana has the largest x-height at the same type size. And the proportion of the ascenders, or the top part of the "h," and the descenders, the bottom part of the "p," varies as well within that, you know. Now, you may think, "Okay, this is just minor stuff," you know, but actually on the page, it has a major impact because obviously the higher the x-height, the denser the copy looks on the page given the same line spacing, you know, so you need to think a little bit about that, too. And then if you go into serif typefaces, it can actually change even more dramatically, you know? If you think of Garamond, for example, or the Bodoni, where the x-height is only about 65, 66% of capital height, you know, whereas in most sans serif typefaces — the ones here certainly — where the x-height is around 72, 73% of capital height, you know. So you need to think about that so, you know, when you're actually defining typefaces and what it means, size.

And then lastly, also you need to think about technical accessibility. Do you have a global audience or do you have a non-Latin audience, you know, and you need to communicate with them, and do you have actually fonts available to communicate in that language, and do those phones emotionally and functionally match what you're trying to do with — and technically — what you're trying to do with the Latin as well, you know? And again, here we come to heights. You know, for example, like, a lot of the Asian writing systems — Thai — you know, are really, really, really tall, you know? Which means that the middle part of the characters has to be fairly small. When you actually then put Latin and Thai together, you always get the sense that the Thai is really small. Or the Arabic as well. You always get a sense that the Arabic next to the Latin looks really, really small. It is because Arabic has a tendency to run really, really tall from top to very bottom within that em square. So you need to think about that, you know, for accessibility purposes on the emotional, functional, and technical front.

We have about three minutes haven't we, Ben?

[00:54:55] Ben: Yeah, and I'm okay running a little longer if you do need as well, but we should probably soonish start wrapping up.

[00:55:02] Bruno: Yeah, yeah, and the last part would also be a little bit of a repeat of the presentation we gave at axe-con, so many of you will probably have seen that, so we can drop that, you know.

One of the things that also I want to talk about, and this is quite important, is that of course, you know, good accessibility is good for your money, good for your finances, you know. In the UK alone, the disability or the accessibility market for everything is worth about £15 billion. You know. And as I mentioned earlier, about 15% of English speakers are dyslexic, you know. In the US, 25% of the population is functionally illiterate. That means they have a reading literacy level of, like, a 9, 10-year-old or younger, you know. Basically yes, they can read the letters, but they haven't got a clue what they have read. You know? So if you add a barrier there, you know, with poor typography, you absolutely kill the accessibility for that segment of the population. You know. This is something you need to think about.

Just briefly on the Bookerly typeface. When we designed the Bookerly typeface, we presented three different design concepts to Amazon, and Amazon test everything. They test against reading speed, comprehension, and emotional acceptance, you know. And Bookerly eventually performed 3% better across all those parameters against the three concepts, but also against two or three of the other typefaces that were already on the Kindle, you know? And if you think on the reading speed that the average proficient reader reads around 250 words per minute, you know, if you think 3%, that's seven words per minute, which means that book is read several hours quicker, which means you buy an extra book at $4.99, over 10 million users.

[00:57:12] Ben: Okay!

[00:57:12] Bruno: I think the numbers match up! Even if it's just 10,000 users, it's still already good numbers. You know.

And of course, good accessibility reduces risk, you know? I mean, all of you at some point or another probably have opened up, you know, that leaflet of the side effects, you know, for medication. It's impossible to read! I'm 60 years old! You know, my visual acuity is only 20% of that of a 20-year-old. I can't actually see the stuff any more! That creates a risk, and I'm surprised that no one has ever, ever, ever sued Big Pharma over this, you know. Anyway.

Yeah. And the testing platforms say — many of you — I just very, very quickly want to show something that people may not be familiar with. You know, one of the things we tested for was dyslexic traits, you know? And we tested 20 different typefaces, the ones that you can see here, and all the typefaces that are supposedly good for people with dyslexia and other kind of like reading impairments or whatever you want to call it performed worst. The best performers were Segoe and San Francisco Pro.

[00:58:43] Ben: And so when you're describing, like, the dyslexic fonts, you're describing those… I see you've got, like, OpenDyslexic. Like, for anyone who is unfamiliar, those are the fonts that tend to look… I would describe them as very goopy.

[00:58:56] Bruno: Yeah, yeah, yep.

[00:58:56] Ben: Like, uneven shapes where, like, everything is, like, weighted down at the bottom. There we go, yeah, you've got some.

[00:59:02] Bruno: Exactly, exactly. Comic Sans obviously here. Where have we got…? OpenDyslexic, yeah. The top oneon the, on the right hand side, you know. Really poor! You know, and Dyslexie is similar, you know. A similar thing, you know? Yeah, so they are really, you know, really no good, you know. Absolutely no good.

And one of the things that you also need to think about is when you choose typefaces for example, like here, one of the things we were testing for is specific letter combinations. And in some typefaces, the letter combination "rn" created extra problems, you know, for legibility, you know. Times new Roman, the "r" and the "n," you know, I mean, even large, you could easily mistake it for an "m." Whereas in Roboto, it's clear and distinct. So when you choose a typeface, maybe think a little bit about those issues as well, you know.

But the main thing is that you cannot be fully accessible for everyone. What you can do is try to lower the barriers. That should be your first ambition — lower the barriers — and you can only ever optimize accessibility. You can never be perfect, you know, and you have to make compromises. And I think that's the takeaway from this.

I've got some articles on Medium as well if you want to read up, you know, on neuroscience and type and et cetera, et cetera. Yeah, thank you very much for listening to my ramblings here.

[01:00:38] Ben: Bruno, this has been delightful. Thank you so much. I'm also going to put a link to your Twitter in the chat as well.

[01:00:46] Bruno: Yes, okay!

[01:00:47] Ben: That way, folks can go follow you over there.

Thank you so much for your time. This has just been so many good nuggets, I think. And I enjoyed the neuroscience as well. It's really cool to see how the neuroscience directly ties into, like, very actionable things. Like, I think sometimes we think of, like, you know, "Yeah, visual perception is complex… and then there's also like reading and design and stuff like that." Like, they have a lot more interplay because they're literally one big system there.

So thank you so much for your time!

[01:01:22] Bruno: Thank you! Thank you for having me!

[01:01:26] Ben: Y'all, while you're following Bruno on Twitter, go follow Some Antics on Twitter, and that way you can keep apprised of all the streams coming up. I should be doing — I need to confirm with him just to be sure, but I should be doing some creative CSS coding with Kevin Powell this Friday, I believe. So, keep your ear out for that. And y'all, it's been a good one. Thank you for being here!

[01:01:49] Bruno: Cheers! Thank you.

[01:01:54] Ben: Bye, y'all!

[01:01:59] Bruno: Bye.