Transcript ↓

In this episode of Get It Seen: The Simplest Way to Accessible Design host Michelle Frechette and typography expert Piccia Neri discuss the vital role of typography in web accessibility. They explore how factors like font choice, size, alignment, kerning, and style impact readability and legibility for all users, including those with visual or neurological differences. The conversation highlights common pitfalls—such as using all caps, centered text, or decorative fonts—and offers practical tips for creating accessible, user-friendly content. Real-world examples underscore how thoughtful typography can improve user experience and even boost website conversions. The episode concludes with a preview of next week’s focus on color and contrast.

Top Takeaways:

• Typography Is More Than Just Fonts — It’s a Core Element of Accessibility: Typography includes not only font choices but also layout, spacing, alignment, font weight, size, line height, tracking, and visual hierarchy. These elements together shape how readable and legible text is, directly affecting accessibility and user experience.
• Readability and Legibility Are Different, and Both Matter: Legibility is about how easily individual letters can be distinguished (e.g., clear letterforms, avoiding imposter letters like I/l/1). Readability refers to how easily blocks of text can be read and understood (e.g., proper line length, avoiding full justification, using appropriate spacing). Both need to be considered when designing for diverse users, including those with dyslexia or visual impairments.
• Alignment Strongly Impacts Usability and Conversion: Left-aligned text is significantly easier to read, especially online. Centered or poorly aligned text disrupts the reader’s visual flow and can make content inaccessible. 
• There Are No Universally “Perfect” Accessible Typefaces: Recommendations like “use sans-serif fonts” or “Arial is accessible” are oversimplified. Accessibility depends on how the typeface is used, whether it distinguishes similar characters clearly (e.g., capital I vs. lowercase L), and whether it’s appropriate for your audience. Typefaces like Atkinson Hyperlegible are designed with accessibility in mind, but even these aren’t universally preferred.

Mentioned In The Show:

• Don’t Make Me Think Book By Steve Krug
• Atkinson Hyperlegible
• Söhne Klim Type Foundry 
• National Klim Type Foundry
• Josef Albers
• Accessible typeface checklist – free resource
• Accessible Typography 101 course – 30% discount code: PODCAST30
• Better Accessibility Through Typography Masterclass – 30% discount code: PODCAST30

🐦 You can follow Post Status and our guests on Social Media:

• Piccia Neri (Accessible Design Lead, Aligned Consulting Group)
• Michelle Frechette (Director of Community Relations, Post Status)
• Olivia Bisset (Intern, Post Status)

The Post Status podcast is geared toward WordPress professionals, with interviews, news, and deep analysis. 📝

Browse our archives, and don’t forget to subscribe via iTunes, Google Podcasts, YouTube, Stitcher, Simplecast, or RSS. 🎧

Transcript

Michelle Frechette 00:00:25  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 5:00 somewhere. just not here. We’re back for our second installation of Get It Seen: The Simplest Way to Accessible design here with the very knowledgeable Piccia Neri. How are you today?

Piccia Neri 00:00:53  Doing our best. Doing our best. Always learning. Never stop learning. Good morning. Michelle. How are you?

Michelle Frechette 00:00:59  I’m good. Thank you. How are you?

Piccia Neri 00:01:01  I’m okay. I just realized that I forgot to, see how professional I am. I forgot to turn my light on. This is going to improve it. Yeah. There you go. There you go.

Michelle Frechette 00:01:10  It’s amazing the difference. I like to show people the difference here between my life on and my lights off. Right? 

Piccia Neri 00:01:18 Yeah. It’s different.

Michelle Frechette 00:01:20  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. And 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, is we just tell it how it is. And people I don’t know why they don’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. And I am not an expert on typography. I know what I like. I know what’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, so I am here to watch and listen and ask the questions and turn it over to you Piccia. 

Piccia Neri 00:02:07  Thank you, Michel. So that’s the interesting thing, isn’t it, that we always assume that what works for us will work for others. And then it turns out that that’s not quite the case. And and and why typography? Because 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, I actually consider typography in its most extended. As a, as an extended concept, I think that text is the typography. And that’s why I start from HTML, which we did last week. So to me, whenever I teach typography, it starts from HTML. And that makes a lot of sense, because you were saying Michelle and I was capable of this as well. When you get started, you think that headings are there for styling reasons. Well, they are not. So there’s 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. But it’s very, very, very, very important because one thing that I find with accessibility is that often it’s sort of 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, and it is as well, but it’s also for people that can see.

Piccia Neri 00:03:46  And there is so much that is affected by typography and how we choose our typefaces, or how we set them, how we how we lay out content on the page and so on. And I’m also a big proponent of content first. You would say a lot.

Michelle Frechette 00:04:11  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 00:04:20  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. And one example is the example that I always bring is if you take the most banal page, like for instance, Facebook page or Twitter. Even more so, Twitter is now called X page. You can.

Piccia Neri 00:05:02  You could design it without any images, but you could never design it without any text. And it’s super important. There are so many micro choices that we make that deeply affect. The experience or that people have sometimes really affecting whether they’re able to even understand what is what is on the screen. I think we’ve got. Yes. James. James Lau. Yes. He’s saying James Lau it’s way , with lots of a’s more than just fonts. Definitely. Yes. There you go. Composition, dynamic of colours, shape, size. Absolutely. 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 and 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 encyclopedias. 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. And I absolutely loved it. I loved nerding out. So I still 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. And 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 wrestling with language. They say 95%. But we’ll never be able to prove this as. 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 blog 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 god, this image is old. I have a new one. Never mind. Look at me. Look at my face. I was so young. I never mind. I had 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, 2023 is not last year anymore.

Michelle Frechette 00:08:20 Back in 2023.

Piccia Neri 00:08:22  The 70s isn’t 20 years ago. So and and 23 is not last year. No. It was two years ago. So there was this, lawsuit over 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 80’s who died terribly young, like maybe at 26, 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 it’s a relatively recent artist. But 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 80’s. So there you go. You know, I rest my case. Typography is super important because it’s also a time machine. So let me just say, you know, you 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 WordCamp Europe. And this this image is of this beautiful, stationery shop. And the sign it says Papelaria Peninsular. Papelaria is, stationary shop in Portuguese. And it’s a beautiful sign in all caps and it’s, golden letters. I mean, it immediately transports us to a different world, doesn’t it? So. But don’t like me, I mean, I could this is what I talk about in my courses, but I don’t want to nerd out on this, 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, 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, how text looks. So way more than just, choosing operating typefaces. And it’s font size, it’s font style, it’s font color, it’s font weight, line length. It’s a bugbear of mine. These are all things that are essential for accessibility because our topic really is accessibility. How much I love to nerd out on other stuff, but, line height, tracking, vertical rhythm, horizontal rhythm, whitespace, 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, that make a, a typeface. I know the things to bear in mind. we’ve got Bud as well. Hi. Bod. Thank you.

Michelle Frechette 00:12:14  Bud loves your red glasses.

Piccia Neri 00:12:16  Thank you. Yeah. You and I have have sort of, kind 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.

Michelle Frechette 00:12:35  We never do.

Piccia Neri 00:12:37  With with varying degrees of success. But so the most important thing is, readability and legibility. Now, are they the same thing? Readability and legibility?

Michelle Frechette 00:12:52  I would think not. I would think there’s something between them. You wouldn’t ask if they were the same thing.

Piccia Neri 00:12:58  I wouldn’t, would I? 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 when people come in, and when we see it. And I think we are a bit like a few seconds further ahead. But 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 anything yet.

Piccia Neri 00:13:33  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 00:13:50  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 to, for me to read when the spaces between words are differing because of full justification versus left, center, or right justification. And so to me, that’s a readability issue, not a legibility issue. Correct?

Piccia Neri 00:14:12  You’ve got it right. That is a readability issue and not 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 recognize the individual letters. And I actually wanted to say about justification, Michelle, you’re absolutely right. That is a justifying, as you see here for for instance, this is what is called left aligned when text is simply left aligned. It means that it has like a, if 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’t draw. A line down the left side and the right side. Have it touch all the letters.

Piccia Neri 00:15:15   Exactly. 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. 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 capitalization.

Michelle Frechette 3 00:16:16  Font weigh, italics.

Piccia Neri 00:16:18  Font weight, Italics, and so on. It is still legible because I can tell the the letters apart, but it’s not readable because everything is all over the place. So the, the individual letters are legible, but the chunk in itself is not readable.

Michelle Frechette: Is not readable.

Piccia Neri 00:16:34 Does that make sense?

Michelle Frechette 00:16:36  Absolutely, absolutely.

Piccia Neri 00:16:39  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 are it’s a typeface that has letters that look like symbols. For instance, the T looks like a cross. The the H is just two vertical lines. So it’s just, really, really hard to read.

Michelle Frechette 00:17:17 So yeah, for sure. I mean, you can read it, but you have to work really hard at it. And the you don’t want people to have to work hard to take in what you’re trying to tell them.

Piccia Neri 00:17:27  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. We’ll 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 post, 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, 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 I don’t want to make two too heavy to have a lesson. But I’ll give you an example of something that’s very, very common. It’s the use of an, especially in a certain type of of website. this is a website that uses for, uses a script typeface for the, for the headings. And this is such a typical thing. That you see especially, especially with a certain type of entrepreneur. I’m just going to have a drink quickly. So, Michelle, say anything you want.

Michelle Frechette 00:19:10  I will say things. So one of the things that, the. 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 the sign that you had put up earlier for the paper store or 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 that in English. So that was already a barrier for me, right? But kerning, also the distance and, you know, the tracking 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 learned from them as I go. At least I hope I’ve learned from them. But and it’s it’s visually stimulating. But I still have to think about what does that say? Because it’s not necessarily a good hand. 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 it’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 00:20:45  Yeah. I,I know exactly what you mean. And, also, are you dyslexic,  Michelle?

Michelle Frechette 00:20:52 I’m not. No.

Piccia Neri 00:20:55  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, okay, 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 you there’s a added level of needs, to interpret, need to interpret that really can make.

Michelle Frechette 00:21:35  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 00:21:43  Yeah, exactly. No, that’s, that’s a 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.You know, in Facebook you if 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. 

Michelle Frechette: I didn’t know that. 

Piccia Neri: 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 topography course that I have. And rule,  give some best practice. Topography rules, number 11, not in order of importance, is to be careful with caps, because some screen readers read capitalized text letter by letter, and they even sometimes even when the capitalization is added via CSS. But if you never just press the the, capslock 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 WorkCamps. The slides were in all caps. They were never long because I never have like a wall of text. 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.

Piccia Neri 00:23:54  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 and last letter of the word, but the middle all jumbled. So there is no, I know that there are all these studies. And there are, for instance, there’s a typeface that 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, 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 the. I have a, because I gave you a number of, a few links didn’t I. To add and the difference, the what makes a typeface accessible. I have a whole, it’s a notion page on what makes a a typeface legible and, and actually, I apologize 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 more 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, as 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 thank you. 

Michelle Frechette 00:26:27  I did.

Piccia Neri 00:26:29  I’ll show you. 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 center text. So I just want to say that because that’s one typical thing that maybe you don’t think it. You don’t. Most people don’t think it matters. In fact, most people center a 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’m. I’ve almost found it. If you can bear with me.

Michelle Frechette 00:27:16  I,  I tell people.  A header. I don’t mind a header to be centered, 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 center paragraphs. That’s so hard to read, so I don’t mind breaking up sections with centered H2. You know, that kind of thing. But other than that, I don’t want to see anything centered. It’s it’s much too difficult to take in and to read that way.

Piccia Neri 00:27:45  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. 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. 

Piccia Neri 00:28:04  So, I’m just going to present again. Okay. Window. Here we are. So this is, the Stripe website again that uses a beautiful typeface, which is called Söhne. 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 licensing 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.Tthey it’s so difficult to license a typeface for a client. They make it almost impossible Klim makes 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 font 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. Okay. 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.

Michelle Frechette: Exactly the same.

Piccia Neri 00:29:50  Plus, at this is I’m showing in this slide. Super big type is 190 pixels. But when you make this type very, very small, even the, the, lowercase I becomes difficult to tell from, you know, a lower size. It just all looks like a line. If your vision isn’t perfect and we’ve got by Bud on watching us that knows this. I mean, I’ve learned so much.

Michelle Frechette  00:30:21  He loves the Cowboy font though. Bud! 

Piccia Neri 00:30:28  I love it. I love it. So this is what it’s called is what is called the 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 from, the both the L and the lowercase I. So the imposter letter, it just, 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 Ls are exactly the same. So no, it’s not an accessible typeface. I’m sorry. It just isn’t. So there is such a thing as too simple. 

Michelle Frechette 00:31:17  Basically, it’s so funny that you put this up, especially the L – I situation, because I constantly will copy 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-N-O-N-A. Is it IL? Is it LL? Like Llona? what is it? Right? And so I had a just a dad joke kind of idea yesterday. Was is it AI? Or is it Alfredo? Like, you know what? I like pasta alfredo. And, like, you could make it. AI-fredo and kind of ChatGPT kind of thing. Like, fake pasta. I don’t know.

Piccia Neri 00:32:02  Yeah, yeah.

Michelle Frechette 00:32:05  Oh, it’s an impasta instead of imposter. Get it? 

Piccia Neri: Haha! Yeah.

Michelle Frechette 00:32:10  Sorry. Okay. I’m stepping back now. I’m just going to mute myself and let you finish.

Piccia Neri 00:32:16   No 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 the one 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 you decide, you see whether a typeface is accessible or not. There are other standards, such as, for instance, if certain letterforms, 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, the previous 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 get out of it. 

Piccia Neri 00:33:25  And, got the new one. But I also find what I was looking for. Which is why alignment is so important. 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 center everything. And this is an example that I it’s screenshots that I took a while ago, but they still, is still the same in that website, which is a very interesting website for a number of reasons. Here we go. So it’s a website for a 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 centered alignment in a way that doesn’t make any sense, because it’s centered to do to two different sections. So you’re looking, there is so skewed that the line that your eye must follow in order to find each beginning at the beginning of each line 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 there 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 described.

Michelle Frechette 00:35:23  There are a lot of other problems as well, because this is definitely got some contrast issues and some issues as well, yeah.

Piccia Neri 00:35:33  Exactly. But if you just write along with all those issues, the contrast, the hierarchy, everything, even just by left aligning. You are making.

Michelle Frechette: So much easier. 

Piccia Neri 00:35:46  Everything so much easier. 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 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, I’m not surprised that it’s not converting because it was so hard to to the, the journey that the eye had to take was so hard. So I just gave alignment, alignment tips. And the next day they, they saw they woke up to a 400%, 400% increase in conversions.

Michelle Frechette 00:37:03  Wow!

Piccia Neri 00:37:06  Which by any standard is amazing, even if it was ten views and went went up to to 400. I mean, it’s huge.

Michelle Frechette 00:37:15  And alignment is free. It doesn’t cost you anything to do alignment. Like you haven’t bought a new font. You haven’t like invested. Just alignment.

Piccia Neri 00:37:25  Alignment. 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.

Michelle Frechette 00:37:48  Yeah.

Piccia Neri 00:37:48  If it’s neither of those. Don’t center it. Just don’t, you know? 

Michelle Frechette: Yeah.

Piccia Neri 00:37:54  Sometimes. So when I set out, you know, I used to be a book designer. You would center a text when sometimes on book covers, you would center text, but only sometimes. And I always preferred to, to avoid it. And there is so much more that we could talk about in terms of Typeography. I could carry on for hours. I mean, I literally have a master class that’s nine hours, so.

Michelle Frechette 00:38:24 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 color 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, you know, 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. Easily, 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, but we are going to cut ourselves off here. But come back next week. We’re talking about contrast and color. And James is asking, are we diving into Josef Albers color study next week? I have no idea what is on your list. 

Piccia Neri 00:39:34  I love that you mentioned, Josef, Josef Albers, James because of course, he got. And make sure that we mention him. So it’s all about the relative, relativity of color, how we perceive color. I mean, I have a talk that’s, I’ve changed the title actually, because the title gave away the punchline. But it’s basically to demonstrate that we, the way that we perceive color is highly, highly personal. Color is basically an opinion. Color 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 is now 51 minutes.

Michelle Frechette 00:40:24  Well, there were 40 minutes, 40 minutes and 25 seconds, so.

Piccia Neri00:40:28  Oh, yeah. Of course. Okay. Sorry. Yeah I think it’s showing 51, but it’s because we got together at that point.

Speaker 3 00:40:35  Yeah. Yeah.

Michelle Frechette 00:40:36  Yeah. So 40 minutes in and we will cut it off here. But next week we’re talking color 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.

Piccia Neri 00:41:02  Thank you so much, Michelle.

Michelle Frechette 00:41:04  My pleasure.