Accessible typography

Contents of this article:
    Add a header to begin generating the table of contents

    From a live conversation between myself, Piccia Neri, and Michelle Frechette about web accessibility fundamentals: this episode is on typography, and it is the second in a limited series podcast on accessible design.

    A Post Status/ Piccia Neri initiative. Broadcast live on Thursday 17 July 2025

    Watch the recording

    You can watch the entire conversation between Michelle and I below, audience interaction included. For any questions, or suggestions on what you want to hear about next, email me at piccia at piccianeri.com or write a comment below the video.

    Read the transcript

    Open to read the podcast transcript

    [Michelle Frechette]

    Good morning, good afternoon, good evening wherever you are, wherever you’re watching from. I know it’s morning here, it’s afternoon for Piccia, and wherever you are in the world, it’s sometime. What do they say, it’s five o’clock somewhere?

    Just not here. We’re back for our second installation of 10 of “Get it Seen: the simplest way to accessible design” here with the very knowledgeable Piccia Neri. Piccia, how are you today?

    [Piccia Neri]

    Doing our best, doing our best, always learning, never stop learning. Good morning, Michelle. How are you?

    I’m good, thank you. How are you? I’m okay, I just realised that I forgot to see how professional I am.

    I forgot to turn my lights on, this is going to improve it.

    [Michelle Frechette]

    There you go. It’s amazing the difference. I like to show people the difference here between my lights on and my lights off, right?

    Yeah, it’s different. Today we’re going to talk about typography. Last week we talked about HTML and kind of did a basic introduction to the series here.

    I said if people had questions, they could put them in the comments even after we were off. Nobody had questions. That’s how good we are.

    We just tell it how it is and people, I don’t know why they didn’t have questions, but if you’re watching today and you do have questions, please put them in the chat. We will absolutely be happy to answer them. I am not an expert on typography.

    I know what I like. I know it’s easy for me to read. I assume that makes things easy for other people to read as well, but maybe I’m quirky and I don’t know.

    I am here to watch and listen and ask the questions and turn it over to you, Piccia.

    [Piccia Neri]

    Thank you, Michelle. That’s the interesting thing, isn’t it? We always assume that what works for us will work for others and then it turns out that that’s not quite the case.

    Why typography? Typography really is the, 95% of the web is still typography. You can quote me on this, but I will never be able to prove it, obviously.

    This is not a figure that anybody can prove, but when you think about it, I actually consider typography in its most extended, as an extended concept. I think that text is the typography and that’s why I start from HTML, which we did last week. To me, whenever I teach typography, it starts from HTML.

    That makes a lot of sense because you were saying, Michelle, and I was culpable of this as well. When you get started, you think that headings are there for styling reasons. They are not.

    I start from HTML, which is sort of the bottom of the iceberg, below the surface of the iceberg, and then the tip is typography. It’s very, very, very, very important because one thing that I find with accessibility is that often, the visual side gets a little bit neglected because of what you were saying last week, Michelle, that often people think accessibility is mostly for people who can’t see. It is as well, but it’s also for people that can see, and there is so much that is affected by typography and how we choose our typefaces, how we set them, how we lay out our content on the page, and so on.

    I’m also a big proponent of content first. You would say a lot…

    [Michelle Frechette]

    I want to ask a question before you go too far. For people who think typography means font choice, it’s more than just your font choice, isn’t it?

    [Piccia Neri]

    It’s so much more than your font choice. Thank you so much for asking this question. Typography is basically anything that relates to how you make your text content look and how you structure it with HTML and how you design it.

    It definitely isn’t just your typography choice. That’s important, but not as important as how you put everything together. One example that I always bring is if you take the most banal page, like, for instance, Facebook page or Twitter, even more so Twitter or now called X page, you could design it without any images, but you could never design it without any text.

    It’s super important. There are so many micro choices that we make that deeply affect the experience that people have, sometimes really affecting whether they’re able to even understand what is on the screen. I think we’ve got, yes, James, he’s saying it’s way more than just fonts, definitely.

    Yes, there you go. Composition, dynamic colour, shape, size. And also, I am old enough that I got started with editorial design.

    That’s how I became a designer. I was a book designer, a magazine designer for many years, and that’s why typography is so important to me. I mean, I used to design art catalogues and art encyclopaedias.

    I mean, you had to be really, really very, very specific with your choices and really know your way around typography because, you know, you had footnotes, you had bibliography, you had so many different things. I absolutely loved it. I loved nerding out.

    But I still do that. And I have, in fact, I have a few typography courses that we have discounts for. We’re not here to promote that, but just so that people get a chance to learn more if they want.

    I just, as we did last week, I am going to bring out, we’re not going to do a class, but we are going to. So we’ve got it on the screen already. So when I say, you know, that most on the Internet is still written language, language is a 95 percent.

    But we’ll never be able to prove this. It’s if you can’t read a web page, then that page has no reason to exist, because also Google will have no way of reading it. We were saying that browsers and search engines are basically blind as well.

    They only see what you put in writing. So, for instance, if we take your bog standard Facebook feed, it’s got lots of images because it’s got icons, it’s got stories, it’s got videos. But then if you take this image is old, I have a new one.

    No, my look at me, look at my face. I don’t know mine. I have very short hair as well for a short period.

    But then if we take all the text out. There there is virtually nothing left. I mean, no, I exaggerate.

    There are the images left, but you can’t make a really head or tail of it. You could design without without typography, without text. But you couldn’t design without it.

    And I’m also going to point out something that I find utterly fascinating. So last year, not last year, twenty three is not last year anymore. Twenty three.

    The 70s isn’t 20 years ago. So and twenty three is not last year. No, it was two years ago.

    So there was this lawsuit by the Orlando Museum of Art over fake Jean-Michel Basquiat paintings. Jean-Michel Basquiat, for those who don’t know, I used to be an art historian, is a very famous artist from the 80s who died terribly young, like maybe at twenty six of AIDS. And so there are, we know that there are very few works.

    It’s not. You can’t. But you still may find a batch because he’s a relatively recent artist.

    Well, there was something dodgy about this batch of paintings. And the most fascinating thing is that the presence in one work of a FedEx typeface that wasn’t created until 1994 is what revealed that these paintings were fake, because I can’t remember what year Basquiat died, but it was the 80s. So there you go.

    I rest my case: typography is super important because it’s also a time machine. So let me just say, you know, it can recreate recreate lost worlds. For instance, I was this is a photo from Porto where many of us were in 2022 on the occasion of World Camp Europe.

    And this this image is of this beautiful stationery shop and the. Sign is it says Papelaria Peninsular: Papelaria is stationery shop in Portuguese. And it’s a beautiful sign in all caps and it’s in golden letters.

    I mean, it immediately transports us to a different world, doesn’t it? So don’t let me. I mean, I could… this is what I talk about in my courses, but I don’t want to nerd out on this side of it too much.

    But it really just to say that type is essential in creating an experience. And so in this way, yes, it is very important. What you, which type you decide to go for.

    Of course, you know, you can express so many things just by choosing a typeface. But when it comes to what typography is made of, it really is every single thing that determines how text looks. So way more than just choosing or pairing typefaces.

    And it’s for size, it’s for style, it’s for colour, it’s for weight. Line length, it’s a bugbear of mine. These are all things that are essential for accessibility, because our topic really is accessibility, however much I’d love to nerd out on other stuff. Line height, tracking, vertical rhythm, horizontal rhythm, white space, tone and emotion, style, hierarchy and visual order.

    And the thing is that even tone and emotion of a typeface are relative to accessibility, even if it may not seem so, because sometimes we may choose a typeface for its tone and emotion and we are not aware that actually it may express, I don’t know, a happy feeling, but it’s not readable because because maybe it’s a script and things like that. So these are all the things that make a typeface. And all the things to bear in mind.

    We’ve got bad as well. Hi, bad. Thank you.

    But those are red glasses. Thank you. Yeah, you and I have sort of coordinated glasses.

    They go well together, which is great. So the first thing that I want to talk about, because it brings up a few essential things. Also, we said that we’re going to keep these podcasts brief.

    We never do. With varying degrees of success. So the most important thing is the readability and legibility.

    Now, are they the same thing? Readability and legibility?

    [Michelle Frechette]

    I would think not.

    [Piccia Neri]

    Yeah, I mean obviously…

    [Michelle Frechette]

    You wouldn’t ask if they were the same thing.

    [Piccia Neri]

    I wouldn’t. So I’m just wondering whether anyone who’s watching actually knows the difference between readability and legibility. Just put it in the comments.

    There’s a slight delay with when people comment and when we see it. And I think we are a bit like a few seconds further ahead. Clearly, there is a difference between readability and legibility.

    And both of them are things that come up on the web a lot. Now I’m checking the comments, but there isn’t yet. And I think readability.

    I’m just going to go with it. Readability refers to the ease of reading words phrases and whole blocks of text. It’s how well you see the words in long chunks of copy.

    [Michelle Frechette]

    So things like I think about justification a lot, right? So there’s so many people that used to put full justification. It is so difficult for me to read when the spaces between words are differing because of full justification versus left centre or right justification.

    And so to me, that’s a readability issue, not a legibility issue.

    [Piccia Neri]

    You’ve got it right. That is a readability issue and not a legibility issue for sure. The long chunks of copy is readability, whereas legibility refers to how easy it is to distinguish each letter from other letters.

    It’s how well you see and recognise the individual letters. And I actually wanted to say about justification, Michelle, you’re absolutely right. That is a justifying you see here, for instance, this is what is called left aligned.

    When text is simply left aligned, it means that it has, like a, you don’t fully justify a line. The lines are not all the same length. So you don’t force… the distance between words is always the same.

    You don’t force, just to fill the lines, you don’t force different gaps between words.

    [Michelle Frechette]

    You can draw a line on the left side and the right side and have it touch all the letters.

    [Piccia Neri]

    Yeah, which especially doesn’t work on online, on the web, because when we adjust browser window size, then, of course, that all changes. So, you know, it was much easier to design books. I think I said it last time as well, that printed design.

    I used to think, oh, my God, I wish I were a web designer so that things wouldn’t move all the time. But now I think, oh, God, it was so great when you only had to design one thing and that was it and it never moved. So, so, yeah.

    So, for instance, this is an example. When we look at readability, here’s a readable paragraph because I can tell the letters apart easily and because the vertical and horizontal spacing and the layout doesn’t change, it helps me read it. It’s all very familiar.

    But if I then use a layout where I use big gaps between words, I change the size, I change the capitalisation, italics and so on, it is still legible because I can tell the letters apart, but it’s not readable because everything is all over the place. So the individual letters are legible, but the chunk in itself is not readable, readable. Does that make sense?

    Yeah, it makes that. Yeah. Whereas if I use a really weird typeface with letters that look like symbols as in this paragraph that I’ve got here, it’s readable because the layout and the distance between words and so on all works, but it’s truly not so legible because the letters, it’s a typeface that has letters that look like symbols, for instance, the T looks like a cross, the H is just two vertical lines.

    So it’s just really, really hard to read.

    [Michelle Frechette]

    So I mean, you can read it, but you have to work really hard at it and you don’t want people to have to work hard to take in what you’re trying to tell them.

    [Piccia Neri]

    Absolutely. That is the number one rule on the web. And if you ever read one book about web design, this is for everyone.

    Make it “Don’t Make Me Think” by Steve Krug. It’s a fantastic book that anyone can read. If you’re not a designer, it will help you anyway.

    And basically just whenever you’re in doubt, just ask yourself, is this putting… making people make an effort with a cognitive load? And if the answer is yes, then don’t do it. It’s just not worth it because whenever we publish anything online, really, we have an aim of sorts.

    It can be to convey information. It can be to sell something, but it’s never to show off how cool we are. So just don’t do it.

    It makes no sense. So I have so many examples of this. But anyway, I’ll give you an example.

    I’ll give you an example. I’m just flicking through because we don’t want to make it too heavy a lesson. But I’ll give you an example of something that’s very, very common.

    It’s the use of and especially in a certain type of website. This is a website that uses a script typeface for the headings. And this is such a typical thing that you see, especially with a certain type of entrepreneur.

    I’m just going to have a drink quickly.

    [Michelle Frechette]

    So Michelle, say anything. I will say things. So one of the things that I had actually written down the word kerning and James Lau put that something about kerning, meaning the space between the letters.

    And I noticed that the sign that you had put up earlier for the paper store, the stationery store, the kerning was very close on that, which actually and it was all caps, which also was beautiful, but made it a little bit more difficult for me to read, as opposed to spreading the letters out a little bit more so that my brain could take them in without having to decipher, especially because it was not in English.

    So that was already a barrier for me. But kerning also the distance and the tracking with space between the letters makes a difference in how you partake of them. And then, yes, there is absolutely a certain type of entrepreneur who uses this kind of a handwritten font.

    I’ve been guilty of it in the past as well. I’m not going to lie, because I have made all the mistakes that you can make and I’ve learned from them as I go, at least I hope I’ve learned from them, but it’s, it’s visually simulating.

    But I still have to think about what does that say? Because it’s not necessarily a good hint. There are handwritten fonts that are much easier to read.

    And there are handwritten fonts that are ridiculous to try to read. And then there are fonts that people have created. I don’t know if you remember cowboy something font that’s like you literally have to almost highlight it, put it in a document, change the font to even understand what it says.

    [Piccia Neri]

    Yeah, I know exactly what you mean. And also, are you dyslexic, Michelle?

    [Michelle Frechette]

    I’m not, no.

    [Piccia Neri]

    So this is a typical case where we don’t even know what it’s like for dyslexic people to try even a script or handwritten typeface that we think, OK, so this is fairly, fairly understandable. Someone with dyslexia may find it completely impossible to read it or with other types of neurological differences, neurodivergence. It may really, really be impossible because you have to think that letters are dancing already.

    So there’s an added level of need to interpret that really can make…

    [Michelle Frechette]

    This is where a screen reader is beautiful because the screen reader doesn’t care what the font is. It’ll tell you what it says.

    [Piccia Neri]

    Yeah, yeah, yeah, exactly. No, that’s that’s yeah, that is that is interesting. Although, be careful, though, because one thing that I see a lot is people using Unicode characters in on LinkedIn because LinkedIn doesn’t allow for formatting.

    On Facebook, you can use bold, you can use headings, you can use italics, but you can’t on LinkedIn. So people use Unicode characters, not knowing that those are not readable by most screen readers can’t read Unicode characters. So no, there you go.

    A lot of people don’t know that. So there are cases in which fancy fonts just just just avoid them. And what you were saying with… about caps is absolutely true.

    Generally speaking, they are harder to read. In fact, I have this is this short typography course that I have and rules… now I give some best practise typography rules and number eleven, not in order of importance is to be careful with caps because some screen readers read capitalised text letter by letter. And they even sometimes even when the capitalisation is added via CSS.

    But if you never just press the caps lock because also not only that, but they are harder to read because all letters and words can appear as just rectangles with no further shape differentiation and a lot of friends who are dyslexic tell me that it’s really, really hard for them. I used to love my caps because they look more stylish. And my, if you look at my talks, my first talks like my 2018 talks at WordCamps, they, the slides were in all caps.

    They were never long because I never have like wall in wall of text that it’s always like short chunks of text. But even so, it’s it’s really dangerous. And James is saying quite a few interesting things, things.

    The thing is that what there isn’t anything, anything that is actually proven about typography, because all the studies, for instance, he’s saying there’s a study from a college that states that we can read large bodies of text with the first and last letter of the word, but the middle are jumbled. So there is, no, I know that there are all these studies, and there are, for instance, there’s a typeface that is, was developed specifically for dyslexia, but there is no proof that it works better than other typefaces. And in fact, specifically, I’ve heard dyslexic people saying that they hate it because it’s patronising and it doesn’t actually help them read.

    So it’s kind of, it’s kind of difficult. It’s not always easy. But if you go safer, like, for instance, this typeface that I use is called Atkinson Hyperlegible, and it was developed by the Braille Institute specifically to be completely legible.

    And in fact, because we’re already at the half hour mark, Michelle, I’m telling you now, there is the, I have a, because I gave you a number of a few links tonight to add. And the difference, the what makes a typeface accessible? I have a whole, it’s a Notion page on what makes a typeface legible.

    And I actually I apologise that it’s a Notion page because I know that notion pages are not completely accessible. I will also create another version in a different with a different tool, so it’s it’s more accessible to everyone. But anyway, so, for instance, everybody says, oh, use Arial or use a sans serif because it’s accessible, but that’s not proven either.

    And I don’t find sans serifs more accessible because they present problems. And I’m actually going to show you a few. Let me just.

    Where is it? I mean, it was inevitable, wasn’t it, that I’d I tried to prepare myself, I didn’t I? But then there’s always oh, I know why, I need to stop this share.

    Which I yes, I don’t know if you did that for me, but I did. So there is so much to talk about, like, for instance, my, my, my bugbear, because I really don’t want to end this without saying this. I absolutely loathe centred text.

    So I just want to say that because that’s one typical thing that maybe you don’t think, you don’t, most people don’t think it matters. In fact, most people centre text online. And to me, it’s impossible to read.

    All I see is a shape. I see the shape of the text. I don’t see, I don’t, I can’t read the text.

    So I will see a flying saucer. I will see a vase. I don’t, I actually can’t read the text.

    And now I’m, I’ve almost found it. If you can bear with me, I am.

    [Michelle Frechette]

    I have to tell people a header, I don’t mind a header to be centred, but nothing more than one line of text, if you have more than one line of text, it’s a paragraph and you should never send your paragraphs. That’s so hard to read. So I don’t mind breaking up sections with centred to, you know, that kind of thing.

    But other than that, I don’t want to see anything centred. It’s much too difficult to take in and to read that way.

    [Piccia Neri]

    I am so glad that you say that because you really it’s my – and also, we need an anchor, the eye needs an anchor. At least use your left aligned. Yes, you know, that that one anchor.

    Now, I’m going to show you, because last week we mentioned the Stripe website and we’re going to do that again, Michelle. So I’m just going to present again. OK.

    Window. Here we are. Yeah, so this is the Stripe website, again, that uses a beautiful typeface which is called Söhne.

    It’s German. I’m not very good with my German by Klim type foundry, which is a New Zealand foundry that I love because they’ve got beautiful typefaces, but also because their licencing system is so simple. Now, if you have an Adobe subscription, as unfortunately I still have as much as I would love to get rid of it.

    It’s so difficult to licence a typeface for a client. They make it almost impossible. Klim make it super easy and really affordable as well.

    So that’s why I love them. So this is the typeface on their website. And you would think, well, it’s beautiful.

    Definitely, it’s very stylish. It’s what is called a Grotesque typeface. It’s got lots of styles.

    That’s something that you need to look at. It should either be a variable fonts or have lots of styles. So that you can differentiate, but you shouldn’t use a lot of styles.

    You should use a maximum of three. You don’t really need more than three. And then but then what do we need to check?

    What we need to check is, for instance, the word “illicit”. OK, the word illicit has a an I and two L’s, a capital I and two L’s. And this is what is called an imposter letter.

    Look at the I, capital I and the L. They look exactly the same. Exactly the same.

    Plus, this is I’m showing in this slide, a super big type. It’s 190 pixels. But when you make this type very, very small, even the lowercase I becomes difficult to tell from a lower size, it just all looks like a line.

    If your vision isn’t perfect. We’ve got Bud on on watching us – know this. I mean, I’ve learned so much.

    [Michelle Frechette]

    He loves to count by found out, but I love it.

    [Piccia Neri]

    I love it. So this is what is called, is what is called the, an imposter letter.

    And this same foundry has another, another typeface called National that I love, because when you do the “illicit” test, you can see that the capital I is different from the L because the L has a little curve at the bottom and it’s a different height as well. So from the capital from the both the L and the lowercase I.

    So the imposter letter, it just works. And I, also National is the name of a band that I love. So if you do the same test with Arial, you can see that the three letters, the I and the two L’s are exactly the same.

    So, no, it’s not an accessible typeface. I’m sorry. It just isn’t.

    So, yeah, I was just too simple, basically.

    [Michelle Frechette]

    It’s so funny that you put this up, especially the L I situation, because I constantly will copy of that somewhere and put it in a different type to see if it’s really an L or an I sometimes, especially if it’s a name, for example, right? Like so Ilona, I-L-O-N-A. Is it as it I-L or is it L-L?

    Is it Yona? Like, what is it? Right.

    And so I had just a dad joke kind of idea yesterday was, is it A-I or is it Alfredo? Like, you know, I like pasta Alfredo and like you could make it A-I Fredo and kind of chat GPT kind of like fake pasta. I don’t know.

    [Piccia Neri]

    Yeah, yeah, yeah.

    [Michelle Frechette]

    It’s an imposter instead of an imposter. Get it? Sorry.

    OK, I’m stepping back now. I’m just going to meet myself.

    [Piccia Neri]

    No, no, no, no, no, no. I do get it. I do get it.

    So this is another word that is a very useful standard to check whether a typeface is accessible or not, which is 1 millilitre. If you write one millilitre, the one also has to be different because in a lot of typefaces, the one isn’t that different and you have to test it at different sizes. So this is how you decide, you see whether a typeface is accessible or not.

    There are other standards such as, for instance, if certain letter forms such as the B and the D are specular or not. So these are the things that make a typeface accessible. But there’s also how you set the type.

    And actually, I’m just going to, I’m going to go back to the previous one because I’ve got different files everywhere. So I have to stop this one, don’t I? Stop screen.

    Yes. Done that. So that’s the beauty of lives, isn’t it?

    So now I’ve got to answer it and. I got the new one, but also find what I was looking for, which is why alignment is so important. And this is a design tip as well as a typography tip, but it applies to typography because, as we were saying, just like – people just centre everything.

    And this is an example that I, it’s a screenshot that I took a while ago, but they still, it’s still the same on that website, which is a very interesting website for a number of reasons. Here we go. So it’s a website for a Dutch museum, the Frans Hals Museum, and it’s a very inventive website which has a lot of lots of accessibility issues, but it looks great if you can see it, that is, because the page that I’m showing uses centre the line in a way that doesn’t make any sense, because it’s centred to two different sections.

    So you looking, the… it is so skewed, the line that your eye must follow in order to find each beginning, at the beginning of each line, it is so hard. And also there isn’t that much hierarchy either, especially when it goes to more organic information. If you compare it with a much simpler page of another website, museum website, that clearly uses a grid where you’ve got just text aligned to the left.

    And even though there isn’t, there aren’t actual lines, you can’t see a line on the page, but they might as well be. It’s such a tight, such a tight grid. So if we go back to the other museum page, look at the mess this is in comparison with the previous one that we were saying that we always describe a lot of other problems as well, because this is definitely got some contrast issues and some fun things as well.

    Yeah, exactly. Exactly. But if you just write it up with all those issues, the contrast, the hierarchy, everything, even just by left aligning, you are making everything so much clearer and so much easier to look at.

    So if I, if you go away with one thing, make it be this one, use alignment, because alignment is also a tool that we have in our arsenal to guide the eye of the user. So why wouldn’t you want them to lead them to your conversion button or to… by using alignment? And actually with that, I hope I have another example here, which is an old example, but it was so interesting.

    Basically, it was someone who asked me to help them with their landing page for a for a summit, an online summit, and it wasn’t converting so much. I think it’s actually in another… it wasn’t converting so much. And I looked at it and I was like, wow, this… I’m not surprised that it’s not converting because it was so hard to, to, the journey that the eye had to take was so hard.

    So I just gave alignment tips. And the next day they, they saw, they woke up to a four hundred percent, four hundred percent increase.

    [Michelle Frechette]

    Wow.

    [Piccia Neri]

    Which by any standard is amazing. And even if it was ten views and went up to four hundred, I mean, it’s huge.

    [Michelle Frechette]

    And alignment is free. It doesn’t cost you anything to do alignment. Like you haven’t bought a new font.

    You haven’t to invest in just alignment.

    [Piccia Neri]

    And I used to say there’s a really great quote that is I mean, it’s not even a quote. It’s like principles to live by. Ask yourself two things.

    Is it a wedding invitation, number one? Or is it a graveyard? What’s it called?

    A tombstone? If it’s neither of those, don’t centre it. Just don’t, you know, yeah, sometimes.

    So when I said I used to be a book designer, you would centre text when, sometimes on book covers, you would centre text. But it’s only sometimes. And I always preferred to, to avoid it.

    And there is so much more that we could talk about in terms of, I could carry on for hours. I mean, I literally have a masterclass that’s nine hours.

    So.

    [Michelle Frechette]

    Yeah, so if you’re interested in more, we’ll put those links. I will add those links to this episode. We’ll put them in the show notes on the Post Status blog as well.

    And next week we’re going to talk about colour and contrast, which I think are fascinating as well. And yeah, there’s just so much. This could be a year study to do all the things that we’re doing.

    And we’re really scratching the surface. But the whole idea is that we’re inspiring you to look beyond what you’re doing, to create more accessible websites and to do a little research on your own, too. We’ve given you some tips.

    We’ve given you some ideas and some things that you should definitely be looking into to make sure that your sites are much more accessible, even your printed papers and things like that are better, more easily read by the people who are looking at them. So, yeah, I think it’s all fascinating stuff. And we could go on for hours, we are going to cut ourselves off here.

    But come back next week. We’re talking about contrast and colour. And James is asking, are we diving into Josef Albers colour study next week?

    I have no idea what’s on your list.

    [Piccia Neri]

    I love that you mentioned Josef, Josef Albers, James, because, of course, he gets – I’ll make sure that we mention him. So it’s all about the relative relativity of colour, how we perceive colour. I mean, I have a talk that I’ve changed the title actually because the title gave away the punch line.

    But it’s basically to demonstrate that we the way that we perceive colour is highly, highly personal. Colour is basically a, colour is relative to so many things. And that’s, again, a topic that I talk about for hours and hours and hours. And I do in another – the red glasses.

    Yes. So, yeah, and we did worse than last week, Michelle. It’s now 51 minutes.

    [Michelle Frechette]

    Well, no, we’re 40 minutes, 40 minutes and 25 seconds.

    [Piccia Neri]

    So, oh, yeah, of course. OK, sorry.

    Yeah, I think it’s showing 51. But it’s because we got together at that point.

    [Michelle Frechette]

    Yeah.

    [Piccia Neri]

    Yeah.

    [Michelle Frechette]

    So 40 minutes in. We will cut it off here. But next week, we’re talking colour and contrast.

    Piccia, thank you again for all the great tips and tricks and conversation this week. We’ll see everybody next week. In the meantime, go and look at your websites.

    Look at some of your alignment. Look at some of your fonts. Look at some of the weight and all of the things we talked about this week.

    And come back next week with a better website for everybody. All right. We’ll see everybody next week.

    Thank you so much, Michelle. My pleasure.

    Summary of the conversation on accessible typography

    No time to watch? Here’s a summary of the accessible typography chat that Michelle and I had, while also responding to the points the audience made in the comments during the live broadcasting.

    The importance of typography

    Piccia Neri emphasises that typography constitutes about 95% of the web and is crucial for accessibility, affecting not only those who can’t see but also those who can. She defines typography as anything that relates to how text content looks and is structured, going beyond just font choice to include composition, color, shape, size, line length, line height, tracking, vertical rhythm, horizontal rhythm, white space, tone, emotion, style, hierarchy, and visual order.

    Readability vs. legibility

    Readability is the ease of reading words, phrases, and blocks of text (how well you see words in long chunks of copy). Michelle provides justification as an example of a readability issue.

    Legibility is how easy it is to distinguish individual letters from other letters (how well you recognise individual letters). Piccia gives an example of a typeface with letters that look like symbols as a legibility issue.

    “Don’t Make Me Think” Principle: The primary rule for web design is to minimise cognitive load for users. If something makes people think too hard, it’s not worth doing.

    Common typography mistakes & best practices

    Script/handwritten typefaces: Often used by entrepreneurs, these can be difficult to read, especially for individuals with dyslexia or other neurodivergences. Screen readers generally help, but Unicode characters (often used on platforms like LinkedIn for formatting) are not readable by most screen readers.

    All Caps: Generally harder to read because letters and words can appear as undifferentiated rectangles. Some screen readers read capitalised text letter by letter.

    Centred text: Piccia absolutely loathes centered text for body paragraphs, stating it makes it impossible to read and that the eye needs a left anchor. Michelle agrees, saying only headers of one line should be centered.

    Imposter letters: Piccia introduces the concept of “imposter letters,” where different characters (like a capital ‘I’ and a lowercase ‘l’) look identical in certain typefaces (e.g., Söhne, Arial), making them less accessible. She recommends testing with words like “illicit” and “1 millilitre.”

    Alignment: Crucial for guiding the user’s eye and improving readability. A case study showed that simply correcting alignment on a landing page led to a 400% increase in conversions.

    Accessible typefaces: Piccia mentions Atkinson Hyperlegible, developed by the Braille Institute, as an example of a typeface designed for legibility. She also challenges the common belief that sans-serif fonts are inherently more accessible, arguing they can present their own problems.

    Next week’s topic: The discussion will continue next week, focusing on colour and contrast, with a potential mention of Josef Albers’ colour studies.

    Review Your Cart
    0
    Add Coupon Code
    Subtotal

     
    Scroll to Top