35:1 Why type matters (more than you think)

Lee Matthew Jackson:
Welcome to the Agency Trailblazer Podcast. This is your host Lee, and on today’s show, we are through the magic of the internet repurposing a live stream here today with none other than Piccia Neri. How are you today, Piccia?

Piccia Neri:
I am very well. Thank you very much, Lee. How are you?

Lee Matthew Jackson:
I am too wonderful as well. Thank you, Piccia. Now, folks, if you are listening to the podcast, can I encourage you to head on over to the Facebook group on trailblazer.fm/group and you can come and check out the live stream that happened that made this podcast episode possible. Because I assure you, you will enjoy looking at all the beautiful greenery in the background of Piccia’s screen. It literally looks like she’s calling us from a greenhouse.

Piccia Neri:
I love it. It’s just so much… You have no idea how much it’s improved my working day to decide that this was the setting I was going to work in. It makes me so happy. Look at that.

Lee Matthew Jackson:
Top tip, number one, surround yourself with plants. Today, folks, we want to talk about the importance of typography. And I know as a designer and as a developer, I have learnt my craft by trial and error. And very often the decisions I make are actually based on incorrect assumptions or just the lack of basic knowledge. And I still struggle with this to this very day. For example, we’re branding up the Lee Matthew Jackson Brand, and I am struggling to understand how to select the right fonts and what’s an important thing to think of, what are the differences between Serif and Sans Serif. So there’s all these different buzz words out there, and I just get a hot mess really.

Lee Matthew Jackson:
So I want to selfishly today ask Piccia a whole lot of questions and you can join me for this journey and learn along with us. So Piccia, let’s kick this one off with why is topography so important? And let’s put this in the context of being online.

Piccia Neri:
10 years ago, people were saying, “Oh, it’s about 95% of the web.” Now, I don’t know whether that’s still the correct figure. I keep saying 95%, but it doesn’t really matter. It really is absolutely essential to any webpage. And when we do all our UX and UI reviews, you know I always… If you think about it, most of my comments are always about the typography. And by typography, I think it’s really important to say that the typeface that you select, the font that you select, because the terms are different, but nevermind about that, doesn’t matter as much as everything else. Because what typography really is, it’s everything to do with the way the text is displayed on the screen.

Piccia Neri:
So it’s the font size that you select, the distance between letters, which is something that you can tweak as well, the line spacing, the white space around blocks or the padding, but also the white space around different blocks of texts. It’s absolutely every single decision that you make regarding with type. So in fact, deciding which typeface to go for is only a part of many, many, many other issues that you have to sort out about typography, but typography is the first thing that people see really when they get onto your website.

Lee Matthew Jackson:
Sounds like your first impressions. Get it wrong and that creates a bad impression.

Piccia Neri:
Absolutely, because people simply can’t read it. They’re as loss as to how it interprets information. So that’s what psychographic is, is displaying your content in a way that makes it really easy for people to understand. And that involves also people that can’t see your website, but use a web reader. The way you typeset your topography, the decisions that you make regarding type are also essential for accessibility and for those people who can’t actually read it, but listen to it.

Lee Matthew Jackson:
So it’s fair to say from that that typography is not just fonts that I would normally think, but it is actually the way you choose to lay the fonts that you select out.

Piccia Neri:
Absolutely.

Lee Matthew Jackson:
We all know you hate centred text, et cetera, so making sure that it is readable, making sure the spacing between letters, the spacing between lines, the spacing between paragraphs, all of that becomes part of typography, making something either easy to read and enjoyable or just an absolute horror show that’s going to put people off and increase that bounce rate on your website.

Piccia Neri:
Absolutely. And the thing is that I see a lot of… It’s the most mistreated item on most websites. That’s a really interesting thing. And sometimes I see pages that I know must convert really well. Say for instance, ClickFunnels. I mean, the guy from ClickFunnels, Russell Brunson I think is his name, isn’t it?

Lee Matthew Jackson:
Yup.

Piccia Neri:
And of course, he converts like crazy. But when I look at his pages, I think that you could convert so much more if you actually made a little effort. I’ll give you an example that we all know, Dave Foy. The wonderful Dave Foy. Everybody says… I mean, everybody buys his courses because they’re amazing and everybody knows that, so it’s a no brainer. If you’re interested in the topic, you will buy it. But also his sales pages are flawless, his typography is flawless, and I’m going to show you how and why. So I’ll show you the good examples and a couple of examples that I don’t think work as well And that could just do so much better. And it’s a fundamental part… You know that also I talk about user experience all the time, and typographic is one of the first elements actually.

Piccia Neri:
It’s the user interface. It’s the way you display your interface, but it has a direct influence on the experience that your users have. Because if they can’t interpret your website, if they struggle to interpret your website, then they’re not going to have a good experience.

Lee Matthew Jackson:
Would a really good example be, if I was to purchase a book and the entire book was done in Comic Sans font in italic, I can imagine that would be a very horrible experience because I don’t naturally instantly recognise the words because of the cartoony type of font that I’m looking at. And also it’s big and bold and it’s also italic and perhaps it’s all scrunched up in my book to pack it all in. That’s not going to be an enjoyable user experience. Therefore, I am probably not going to read that book. Flip that over and give that a really nice rounded font of some sort or a Sans… And this is actually leading up to the next question actually, a readable font with a nice spacing, I’m going to enjoy that.

Lee Matthew Jackson:
And that’s why I like my Kindle because that actually allows me to edit that experience even further.

Piccia Neri:
Absolutely. Absolutely.

Lee Matthew Jackson:
So I can make it even wider and stretched out so I can read it in the way that I read.

Piccia Neri:
And in fact, you have brought up a few accessibility issues. That is to say that if you use certain types of typefaces, Comic Sans is one of them, they’re not apt to long chunks of text really. And you were saying that you struggled to select typefaces. Well, what would you associate Comic Sans with? Give me an example, Lee.

Lee Matthew Jackson:
Children.

Piccia Neri:
So in fact, you have just told me that you can, in fact, associate… You can select fonts because you have already done that because Comic Sans is a font that you associate with something that has to do with children. It’s childish because it mimics a handwriting that’s not too developed. And that’s why it’s not necessarily helpful in long chunks of text because your brain has to work too hard to identify the shapes. That’s an accessibility issue. Accessibility is a legal matter, not just a being nice to people matter, which we like anyway. We’re always striving, aren’t we? That’s what we do.

Lee Matthew Jackson:
Absolutely. On fonts then… Sorry.

Piccia Neri:
Yes.

Lee Matthew Jackson:
On fonts then, what I’m interested in is… There’s two words I hear a lot. A lot of us designers know what this is, but what is the difference between a Serif and Sans Serif font, and what would the use cases be for either? Because I know that I see one type of font in a book and then I’ll see another type of font predominantly on the web. So could you describe what are the two differences and then what and why are those use cases there for? Because I think that will really help a lot of people who are listening who are not necessarily massively design focused and maybe focus more on the development.

Piccia Neri:
Of course. So a Serif typeface is a typeface that has those little strokes at the end of the letter or those little embellishments. Like for instance, if you think of the letter Y, it has a nice little sort of stem that descends. And then if you look at the Y in Times New Roman, for instance, which is a font that we all know, it will have an embellishment at the bottom, and so will every letter. A Sans Serif typeface doesn’t have those little embellishments. And for instance, Ariel is a Sans Serif that everybody has because it’s a system font and it’s just simple strokes with no embellishments. And funnily enough, you would think that to read long chunks of text, it would be easier to have a typeface that has fewer embellishments.

Piccia Neri:
But in fact, it is the opposite, because those embellishments actually help out the flow. And the Serif typefaces were the first ones invented when we went to moveable type because it reproduces script, the handwriting let’s say, handwriting, but in a codified way so that each letter looks always the same, which is not what happens when we write. And also because handwriting, even though there is a codified… All the symbols are similar, but then personal quirks come in and it becomes much more difficult to recognise. So in terms of what you use one or the other for, there are guidelines, but they do change on the web. And that’s really interesting because whereas I am… Personally, I am unable to read a whole book in a Sans Serif typeface.

Piccia Neri:
It’s just not possible for me. But on the web, I am perfectly happy to read a long article in a Sans Serif typeface. And that’s because on the web we actually read in a different way, and we tend to skim through more. And also on the web, when type is set correctly, it’s always very… It’s short paragraphs. So on my websites, for instance, I use a Sans Serif typeface even for my long form blog posts, but I know that I’m not causing issues because it always chunk text up in really readable chunks. The web is actually somewhere where you can use Serif or Sans Serif for headings and body copy and it doesn’t matter so much. However, having said that…

Lee Matthew Jackson:
[crosstalk 00:12:07] understand something. So what you’re saying there is the Serif font is a good format for reading obviously based on layout, et cetera. The Sans Serif font works better on the web simply because you can chunk out your paragraphs in a different way than you would in a book. And for the web, most of us start with the headings, don’t we? We kind of skim the headings and jump to the section we want to read. So if that short paragraph is nicely laid out with good line heights, good lettering, et cetera, that’s going to be an easier read first. So there’s two kind of different use cases there, those two different types of font. Sorry, carry on. I’m trying to make sure I’m following you so I can [crosstalk 00:12:46]

Piccia Neri:
Exactly. No, no, very, very important.

Lee Matthew Jackson:
Carry on.

Piccia Neri:
But having said that, as I was about to say, it’s interesting how most online publications, newspapers, magazines, and so on almost always invariably use a Serif typeface for their content. And in fact, I think it’s a very good yardstick to go and look at what the pros do and then copy that. So in fact, I do think that a Serif is probably any way better for long form content. And in fact, because I think when I chose the typeface for my brands, I think I made a mistake. That is an interesting point that I can make and I can show how the anatomy of the typeface that I chose explains why I made a little bit of a mistake. So it’s a pretty typeface, but is problematic and I’m going to have to change it.

Piccia Neri:
So if you are thinking that then it gets too complicated and you don’t really need to know about the anatomy of typefaces, actually there are a few pieces of information that you should consider when you’re selecting a typeface. So even knowing a little bit about type anatomy can help you a lot.

Lee Matthew Jackson:
Can really help. I’ve got an interesting question then. So earlier on you taught me something that I didn’t know I knew, which was that I am actually able to look at a font and give it a… I’m able to attribute something to that font, like a use case, et cetera. I’m able to recognise that that font has a use in a particular environment, and we actually picked Comic Sans, which is the one font that everybody loves to hate on.

Piccia Neri:
There’s a website called Comic Sans Criminal, but we’re here to help you. There’s help for those like you.

Lee Matthew Jackson:
So if you’re a font snub, go check that out. However, I also recognise that there are actually some good use cases for Comic Sans, and I’ve seen Comic Sans that used in those forums and it works. So on that, therefore, is there such things of any no-go fonts?

Piccia Neri:
Well, there are no-go fonts, but there’s various reasons. An example is, for instance, if you remember a short while ago, we reviewed a website called pushoutfilm.com that I recommend that everybody checks out, which is it’s a documentary on the criminalization of black girls in schools, and it’s really good to be informed on this and help out if you can. It’s a good website, very informative, but uses typefaces that, as we were saying earlier, is difficult to decode because it mixes uppercase type forms with lowercase. And therefore, it makes it really difficult to work out. So that would be a no-go font because it makes it difficult for someone whose dyslexics, for instance, to recognise the symbols. Then there are other typefaces that use, for instance, where the T looks like a cross.

Piccia Neri:
And so it makes it quite difficult for me to identify. These are extreme cases. In general, when I select a typeface, I always check how many weights it has, how many different options I have to change the tone to differentiate, to be able to choose a hierarchy with a different weight or a different style, so that’s what I look at. And for me, another no-go font would be a font or a typeface that has… There’s a difference as you know, but anyway, nevermind. I said I do use the terms interchangeably, even though I shouldn’t. So if a font has three different weights and it doesn’t have italics, it’s a no-go font. And that’s why you should really… My recommendation is to always… I think that using outlets for font that do carry all these details is very, very important.

Piccia Neri:
And Google Fonts can be absolutely great, but then otherwise, it’s always worth paying for the typeface that you choose for your important projects I think.

Lee Matthew Jackson:
Absolutely. Well, on that then as we wrap up the podcast segment, I do have one final question about where we can go and find good fonts. If you’re listening to the podcast, remember that we also are going to do a little bit of a deep dive into some existing websites. I’d actually like to take another look at Pushout film with you just to highlight what you meant by that combined font. So we’ll take a look at that, and we’ll also have a look at examples that you’ve got lined up for us as well, Piccia. So remember folks, if you head on over to trailblazer.fm/group, you’ll be able to watch that part, which will have been the recorded version of this live stream.

Lee Matthew Jackson:
So for the podcast segment, Piccia, this is your last question. You mentioned Google Fonts is a great place to go especially because we can say, “I want to think fun, or I want to fund with multiple weights and italics, et cetera.” So I can select all that when I’m searching. That is great. Are there any other resources that you would recommend for me to go and find fonts, especially premium fonts?

Piccia Neri:
Yes. I have to say that I stick to my Adobe subscription mostly because of Typekit, which is now… I think it’s called now Adobe Fonts and it’s fonts.adobe.com, something like that. It is a really good resource, and it’s become so easy to use. The UX of it is very, very good. It’s worth it. It’s not free, but it’s really worth it. Having said that, Google Fonts, I repeat, is really, really great as well. But sometimes, I told you a long time ago and you repeated it to me, that premium fonts look premium. And if you are interested in really differentiating your… I mean, I think that even if you use Helvetica, which is one of the most used fonts in the world, you can express your personality anyway. But Adobe is a very good source.

Piccia Neri:
Then I also love Hoefler, which is typography.com, and that’s kind of the Rolls Royce of fonts. It’s one of my favourite places. It works on a yearly subscription. And in the end, it’s not that expensive because it’s only expensive if you have huge websites. But then in that case, you probably are supporting… This comes with a cost of it. There are lots of beautiful, beautiful fonts there, and the website also helps you very much with pairing and seeing use cases and so on. But then there’s also MyFonts, for instance. It’s myfonts.com isn’t it? It’s a website that has lots of other typefaces that are very, very good, but you need to make sure that you select a typeface that has many different weights, but also the italics. Do not choose a font that doesn’t have italics.

Piccia Neri:
That would be my main recommendation when you make your choices. But there’s also these other websites where you can buy fonts, but there’s also websites where you can find font inspiration. And one, for instance, is fontsinuse.com, which is very good for inspiration because it gives you use cases or various typefaces and it sticks to the classic typefaces. There’s a very strong argument that says that you can be an amazing designer and have an incredibly creative career using a maximum of six typefaces that you stick to, and I actually agree with that. I mean, I could carry on and talk about this a lot, and I won’t, but that’s basically… That’s what I…

Lee Matthew Jackson:
No, that’s good. That’s very, very helpful. Well, as we wrap up the podcast segment, I’m going to share with you two of my favourite fonts, one’s Helvetica and the other one is Futura. What are your two favourite fonts? I’m sure you’ve got more, and then we will wrap up this part of the show.

Piccia Neri:
Well, Helvetica is an absolute all-time favourite, but I also have Serif as a Sans Serif. I also love Futura. I really love it. I love grotesque fonts. One is Avenir. I love it. I love Serifs too. There are Serifs that are timeless. They’re like 500-600 years old, and they can still look totally modern. And one of them is Baskerville.

Lee Matthew Jackson:
I know Baskerville. Gorgeous.

Piccia Neri:
And I love Freight. Freight is a tight face that you can find on Adobe, and I love it because within the Freight sort of a super family, there are many other families and some are Serifs and some are Sans Serifs. So you can couple them together knowing that they are going to work because they share similar features and they can work really, really, really well together.

Lee Matthew Jackson:
Folks, we are coming in to land on the podcast element. I want to encourage you to go and check out the typography master class that Piccia is running. It’s over on trailblazer.fm/typography-masterclass. Let me do a little bit of a recap as well of this episode. We know we like that, just to make sure that I’ve learned what I need to learn and hopefully help you learn as well. We started off with why typography is important, and we shared that we want to make the user experience of the end user who’s using the book or the website or whatever the product is, we want to make that as easy as possible to allow them to consume the information and to get what they need from it.

Lee Matthew Jackson:
We talked about the difference between Serifs and Sans Serifs, and we described a Serifs font being the one that’s got the flicks and twists on it as it were, the little embellishments, versus a Sans Serif font, which is a cleaner sort of font experience. We talked then about the different use cases where sometimes a Serif font would be much better in print and long form content, as opposed to Serif font, which is more likely to be used on the web for shorter form, shorter paragraphs, et cetera. So those are a couple of use cases that we discussed.

Lee Matthew Jackson:
We also did look at a few no-go fonts where we mentioned pushoutfilm.com, where on an accessibility level, having a font that combines uppercase and lowercase characters, whilst it looks great and cool, actually is a bit of a no-go for a few people and actually even makes it hard for the day-to-day person to read. We then finally wrapped up with a whole load of resources, which includes fonts.adobe.com, typography.com, myfonts.com, and fontsinuse.com. All of those will be in the show notes of this episode, but can I encourage you? Head on over to trailblazer.fm/typography-masterclass to join the party with Piccia Neri. Piccia, thank you so much for your time. Let’s now do the livey bit.