Typographer vs. Accessibility

• Typographer vs. Accessibility
• Font Friday Newsletter
• Fonts for Accessibility with Eleni Beveratou
• Fix Color Contrast – Web Accessibility for Text & UI Design
• Download the Color Contrast Cheat sheet
• How to pick a Typeface for User Interface and App Design?

On the web, in our apps, using interfaces, information is mostly tech space. Information is mostly tech space. And typography is about showing this text edits best. It is about giving your words the right voice. Which can be very functional. But it also could be expressive! It could be traditional, or modern... bold! Or delicate.

It's my mission, as a typography consultant to guide other UX designers and design leads to show it with the power of type. For everyone to see.

For everyone to see. Sara called when she got the word, and I think she said, I suppose you've heard about A11y. Yeah, of course. I was here. A11y, anyway, let's continue. And A11y or accessibility, you know, this is the thing for blind people. I didn't pay so much attention, but I didn't pay teenage, and I heard you screen readers should have different voices and so on and so forth. And this is something technical.

And this is not for designers, I think. So I've got good news, everybody here, who would say you're doing mostly development stuff? Raise your hands. Oh, that's a lot. OK. Bad news for you. Who is doing mostly design related stuff? Oh, hello designer friends, great news for you.

Because accessibility, you can take this off your list. Don't have to care about it because, well, the they will do it for you, semantic HTML, everything. Don't care. It's all good, all gone. Yeah. Then, I rushed to the window and I looked outside, and I could hardly believe my eyes because suddenly I realized yes, yes, there's something in between. There's something in between 100% eyesight and complete blindness.

It's a range. It's a range! And on that range, there are 1.1 billion people globally. OK, well, I'm still sure most of them are blind. So coming back to our range, there can be various impairments that affect, for example, visual acuity, color vision, lights sensitivity, the field of vision, we heard of this already today. And these can be in various states and combinations.

For example, I am shortsighted. And I have a mild green blindness. Yes, I'm already on that range? But I can see. And if I can still see and I'm already on that range, who is now going to make type accessible to these 1.1 billion people? Who except for a visual designer, except for me?! And you! Who just raised their hands earlier.

I was mind blown. I was mind blown about this because after over 20 years of working as a visual designer, this only came to me quite recently. So I decided to double down on it. I wanted to know everything there is. I researched what I could. But then, suddenly, all these claims and fears popped up like, use Comic Sans, the biggest make it high contrast, ridiculous spacing, too many stupid rules, it has to look boring at the biggest one, it has to look ugly!

Ah! I don't know what this means here or where this all can go. I guess there are good reasons, but right now, I just don't know! Because for 20 plus years, I've been designing next door too early!

And what does it mean for typography? Well, this is my dramatic opening. This is my journey finding it out typographer versus accessibility. Who is this guy? They've already told you but I'm Oliver, I'm from Austria, UI designer and typography designer and consultant. And I really enjoy being here in London. Again, observing a lot fonts here.

You really like this kind of font. So on our journey, you can lean back now, and we will enter two sections. We will go into readability and legibility. But let's kick this off with legibility, which is all about clear character recognition.

So, in a longer way, we will bust down myths or misconceptions. Or maybe, I was correct all along and accessibility is horrible. Let's see. So, starting off with the first one. It has to look well, you know what I mean, boring. Oh. So boring. Here, again, accessibility with type spaces is a range, it's not something that is either good or bad.

People are flexible. But when it's about choosing a type face, I follow one thing, and this is as you saw very emotional, feelings, of course, feelings are important. So you can still be expressive. You can still have fun when choosing your type faces, maybe for a logo, headline, a big title, something that pulls you in, shows them personality.

But there's there's also too much, yeah? So this might not be very appropriate for user interface, but think about it. Don't use so many stylized fonts because even though font follows feeling, it's surprise, surprise, also follows function.

There are situations where you need to be absolutely clear where it needs to be boring, as Sara said. For example, here. And you can have the best time finding this font. Come on, it's so ambiguous. It's so hard to what is this? What is this?

So don't let people guess in the critical situations. Oh, what? Let's see it, again. It's like, how can you come up with yeah. So in these situations, you want to be absolutely clear, of course. But now comes the big thing. You know you can be expressive. But it depends in which situation.

So, the question here now is, for your body text, for UI, what we just say, this is to be questioned, should you use Sans Serif? What should you use I woke up with this question. Sans Serif? Here, it's more Sans. But should I use Serif? I like Serif. Really. So bringing us to the next one. So, they take my Serifs away. Do they take my Serifs away? To anybody not taking time to look at Serifs, the tiny little things at the end of the stems, the Times New Roman things. But I love my Serifs, why do they want to take them away from me? Let's take a look here at this is a clear print guidelines, I need some guidance. Let's see what they suggest.

Maybe, choose standard fonts without Serifs? Like Arial? Really? Again? I love my Serifs, don't take them away from me. Let's think about legibility for a moment and not about Serifs. What would you say here? Three type faces, which one of these is most legible. Raise your hand, is it the left one? OK.

Most people raised their hand. The middle one? Nobody dares to raise their hand, interesting. And the right one? OK, still some people raised. Thank you, thank you, appreciate it. Here hyperlegible is surprisingly hyperlegible.

Arial, what? Arial? Here? But it was and still part legible. Interesting. There's another thing that you should always consider, which is how open they are. Look at the C, the E, how open is the shape to its surrounding? Now, what would you say is the first one open?

Raise your hands, again. Quite a lot of people raised. Even though we have here slight tear drop Serif, see the wonderful tear drop terminal. And here in the middle, what would you say? Open, yeah.

A lot of hand raised, and here, right? Not so many hands raised. OK. Let's see what is Serif. What Arial again, here? No, no, didn't see that coming. No.

OK. OK. Well, why does this matter now? So the thing is, the more open your shapes are, the easier it will be to read in smaller sizes or if you have low vision.

Take a look at these two examples. Here we have it, again. But when we see this in small sizes, you could mistake a C for an O or an E for an A or an S. So it's harder to read it. It will not be impossible to read. Just an other extra hurdle.

So not necessary to add these hurdles for your body text. So, when you want to pick a type face and I know it's the hardest thing in life is choosing a type face, obviously, subscribe to the newsletter and it won't be.

Here on this end, Arial, Atkinson, and PT Serif, type in this, yes, this is a moment you can take a picture of this. Imagine you had blurred vision. Then, you can see that Arial sucks. And the other ones, they weren't quite fine, even this Arial font. We have a lot of possibilities and it's not all about Sans or Serif. It's about Sans and Serif. Isn't it inclusive here? It is more thinking about which purposes and how open the letter shapes are.

These other things, we need to consider. Pick what fits your theme, and then, check the features of your type face. Now, you already know me quite a bit, but for this one situation, I have to set the scene. Imagine this, I book a table at a fancy restaurant in Vienna. Nice vegetarian restaurant. OK? With my wife, at the booking, I have to enter my credit card details because it has a 70 euro no show fee. My expectations are high, very high. Nice evening, my wife and I arrive at this nice place, we sit down and this is the moment where my wife takes a picture of me.

So, and now, you can guess, is it because actually is it because it was our anniversary and I totally forgot and she tells me, happy anniversary. Is it number one? Nobody raises hands. Yes, you're right. My marriage is still fine, even though I was hitting on come on, sorry.

Is it because the prices are even more than 70 euros for one dish? OK. No? It's not London. And? Could it be that there's something off with the typefaces? How do you know? How do you know? Come on, this is what I saw.

This is what I saw. Comic Sans. But maybe, just maybe they were super inclusive and I'm just the ignorant and not getting it. Every time this happened to me, yesterday at the speaker dinners. Every time I'm giving a talk about fonts and hitting on Comic Sans and easy jokes. Every time somebody comes up to me and says, well, didn't you know or did you know, did you know that Comic Sans is actually a very good font for people with dyslexia?

And I'm like, good for them. Well, the next myth. And now, trigger warning, sensitive, sensitive people, visually sensitive people will have to look away now. Because this is a recommendation I also here in context of dyslexia. I should use, please, cover your eyes, I should use open dyslexic, oh, ah, come on. To me, this is even more meaning I have to make my design come on. Look at this font.

This is just like if somebody forced you with, like, for example, yeah, you're blindfolded with a gun against your head and you're forced to carve a typeface into a potato and stamp it, and then you trace it, digitize it, and make this one. Good, yeah.

Go away. OK. Now, let's talk a bit about dyslexia, for a moment. Because this is actually not an impairment, it's a reading difficulty. And it's something that we also want to cover with inclusive design. And as it is with legible typefaces, oh, surprise, surprise, it's a range. So people are affected in various degrees and various stages, and of course, this affects the fluent reading on spelling of words.

So one thing that is often coming up is avoiding mirrored letter shapes, which means that the more differentiated your letter shapes are, the easier it is for people, or it can be for people to read. Now, looking here at these three examples, again, which of these is most distinct.

Is it the one on the left? Nobody raises their hands. OK. The one in the middle, a few raise their nobody dares, just forget about what it is. Just try to embrace it. But it's is it distinct? Yeah, it is quite distinct.

Yeah, on the right side, is it distinct? Here, you don't hesitate to raise your but here you do, come on, I don't get you. What? Arial, again? No way! That we have Comic Sans and open dyslexic. OK. But imagine this, Comic Sans and open dyslexias do not have a monopoly over the fact they are not having mirrored DBPQs. There are other type faces that have this, as well.

Here, for example, hyperlegible, and the Comic Sans for grownups, the (inaudible) fans. It's a great variable. It's great. Check it out. And research also has shown that these typefaces, these so called dyslexia friendly typefaces perform poorly among people with dyslexia. If you want to dive deeper into this, then I recommend you this video with type designer Eliot, please subscribe and hit the bell.

And like and whatever, you know the game. So, I'm not saying that these typefaces cannot help individuals if you feel like, wow, now I can read here. This is amazing. And but the guy said you can't because he doesn't like it. Well, it's not about me. It's about you. You can change the fonts to whatever fonts you like.

But as a general guideline rule of thumb or idea, even though if these fonts might help some people, most of them, they will just look broken. So, I recommend not using them. Which now brings us in the next section. Readability.

All about making text pleasant to read. And, I know, midpoint of the talk, you're getting a bit tired and, yeah, it's a bit boring already, I guess. And you need so many fonts, I think you need something to you need to wake up.

So we need some more power here, energy, because the best, most legible fonts, this is what we will do. We will Pimp this up, let's do it, my friends. Let's do it.

Make it large enough. Don't justify text. Underline sparingly. Avoid all caps. And we're good. Easy, easy, easy. Quick wins, still. Next myth, number four. Make it high contrast. High contrast. OK.

Well, you know now, I'm super famous YouTuber. I can spend 70 euros in restaurants, I've got so much money from ad revenue, I'm not sure why I'm even here. This is a crime scene. I don't get it. So I need to invest that money. And you know I'm a designer, I'm sensitive, I need a cool bank to invest my money in and some crypto, maybe to the moon my friends. And I need a cool bank.

So let's check out a cool bank Trade Republic, but what do they what is this? Here! What is this text here? It's 1.6 font to 1, 1.6 font to 1. It's ridiculous!

What about this contrast? When it actually should be at least 3 to 1 to be readable. This is too good. Just too good. You can't even see. But what do these numbers mean? Time to address the elephant in the room.

Yeah, it's the WCAG, again, and I'm only mentioning WCAG now in the middle of the talk and not at the beginning. No, it's a fail. But we already saw this at Sara's joyful slides. And you know, the WCAG, first you fight them and then you fall asleep over them.

But eventually, you start to love them because you're the one who is carrying them. So, yeah. You need to make sure color contrast is working. Here minimum, that's the minimum. So here 4.5 to 1 for normal text, 3 to 1 for large text. Or 3 to 1 for large bold text. This is not hard to do.

Don't and this is often a mistake I hear among no, it's not the maximum, it's the minimum. I know you want to design fancy, but this was the minimum supposed to be. OK. So choose this for a minimum for 7 to 1, minimum.

Care about minimum contrast and always use a tool to check it. We already heard about Stark which is handy, and right click on any text to find out which font it is. I know you want this. And here it also says the contrast ratio and if it passes, the WCAG.

So keep this in mind. Bringing us to our last myth. Which is about using ridiculous spacing. Let's see. OK. Now, I have to take a sip of water. Dramatic pause. Brace yourself. Does this look appealing to you? No. It doesn't. No. This doesn't pull me in. It's not very nice to look at. And the biggest problem we have here is we have too long lines in the first place. 95 characters, that's very, very long, very unpleasant to read.

So our first thing we should do is make our text a bit narrow or column narrow, use only 71 characters, that's a nice measure. But something's still not right here. What's not working? The line spacing, the line. Yeah, somebody open a window, we need an air between these lines here. Come on! Let the air in! 0.8 times or 80% is wow! That's too much, too much! Yeah. Yeah.

It's much better. So 1.4, 1.5 ish, good approach for your line height, choose that one. But what you think is now very pleasant and attractive to read might not be that way if we looked at it on our mobile phones because suddenly structural integrity got lost. And this is never good in Star Trek, never. And it's also bad in typography. So it is the shorter your lines, the shorter your line height can be. So let's adjust that and make it 1.3, ahhh, so much better.

This is what it should look like. We are good. We are good, all said. What? Success criteria 1, 4, 12, line height at least 1.5 times the font size letter spacing, 0.12 times, work spacing 0.16 times the font size? What? OK.

Now, if we are we just crafted this together with our own hands. And if we apply the success criteria in here, what will this look like? Oh, my God! Oh! This looks horrible! Come on, is this true?!

This is all for nothing, I'm out of here. No, just

A11Y: Hey, Oliver.

OLIVER: Hey? Who are you?

A11Y: It's me, A11y.

OLIVER: Is this you're using open dyslexic?

A11Y: No, I was just fonting with you, lol.

OLIVER: You're so cruel, A11y, first success, and now you're making fun of me, I'm heart broken!

A11Y: Don't be mad, is this better?

OLIVER: Yes, it's better. But I still don't get it. We came along so well, and now you seem to hate good tech, all of you, why?

A11Y: I didn't want to hurt your feelings. Why don't you read on?

OLIVER: Why should I read on? Oh, OK. The content is not required to use these tech spacing values. The requirement is to ensure that when a user overrides the author text space, it is not lost. So I'm not forced to use this.

They just need to be able to change it.

A11Y: You're right.

OLIVER: Ahhh, oh, so I don't need to make this I just need to give people options. Because after a certain point, people need to be able to make adjustments. They're individual, and what might work for me might not work for them. And A11y's just making sure that everyone gets it the way they need it.

I've got you, A11y.

A11Y: And I've got you, too.

OLIVER: And that's the thing. Because people are diverse and one size never fits all. But maybe this was never a bad all. Maybe this was just about more. Making your designs more robust to include more people. So now that you know more, how will your next design project look like?

With fonts really functional, or expressive but without making everyone's eyes bleed? You can make it traditional. But give it the size it deserves. Or modern but with proper spacing.

Then, it can be bold in the contrast it needs or delicate in the weight it deserves.

Because the ingredients are fonts, contrast, size, and weight. These are the things that will make your next project stand out and work. You know now what this means here and where this all can go. You understand the meaning and your next project will show. From today on, and forever, your text will be beautifully A11y! Thank you.