#85 – Giulia Laco on the Importance of Typography for Your Websites

[00:00:00] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley.

Jukebox is a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the blocks, the themes, and in this case the importance of typography for your websites.

If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast player of choice, or by going to WPTavern.com forward slash feed forward slash podcast. And you can copy that URL into most podcast players.

If you have a topic that you’d like us to feature on the podcast, I’m keen to hear from you, and hopefully get you or your idea featured on the show. Head to WPTavern.com forward slash contact forward slash Jukebox, and use the form there.

So on the podcast today, we have Giulia Laco. Giulia is a web designer and developer who has been working on the web since the mid 1990s. Her primary interests are web typography and font design. In addition to project development, she’s a consultant and a trainer, mostly working with CSS, web fonts and web typography.

This is the last of our podcasts from WordCamp Europe, 2023. I spoke to Giulia in Athens because she had just finished her presentation entitled “typographic readability in theme design and development”.

In this session, she explored how designers can assist with the readability of websites through careful consideration of the fonts they choose and why they choose them.

It turns out there’s quite a lot to consider. And if you’ve not given this topic much thought in the past, you’ll perhaps learn something new. I certainly did.

We begin the podcast talking through how, at the start of the web, we were making do with a limited range of tools to help us make typographic choices. There were no web fonts available, but that started to change around 2010. Now we have access to hundreds of fonts and need to be mindful that some fonts can pose readability challenges for some users of your website.

Giulia talks about the fact that the manner in which we read has changed since the dawn of the internet. Many people now mostly consume small passages of text, which need to be considered in a different way to longer writing.

Concentrating upon the letters in the Latin alphabet, we talk about the ways in which readers typically break up words into smaller units, and the fact that the way letters are shaped can make them easier to parse. There’s some technical language here, ligatures X-height, apertures, and more. Which tell us about the shaping and spacing of letters. Giulia explains the current state of research into how these characteristics of fonts can affect readability.

We talk about whether or not there are fonts which are more readable than others. Is there a collection of fonts, which you can use and be confident that you’re going to make it easy for all users of your websites?

Giulia talks about how designs need to consider the spaces into which the text is put. Most people have a proclivity for the order in which they view a page. And knowing about this path across the page can help your readers access the text.

The width of the text is also important. You want people to be able to read from side to side without having to move their head. How does this work across different device sizes and what can be said about text, which runs right to left, or top to bottom?

We round off the conversation with Giulia telling us where we can find out more, as well as some of the thought leaders in this space.

It’s a fascinating conversation about a subject that often gets overlooked. Web designers, this episode is for you.

If you’re interested in finding out more, you can find all of the links in the show notes by heading to WPTavern.com forward slash podcast, where you’ll find all the other episodes as well.

And so without further delay, I bring you Giulia Laco.

I am joined on the podcast by Giulia Laco. Hello Giulia.

[00:04:43] Giulia Laco: Hello.

[00:04:43] Nathan Wrigley: It’s very nice to have you on. Giulia is joining me at WordCamp EU in Athens. It’s the last conversation that I’m recording, so very nice to have you on. You are going to be talking to us today about something that I genuinely didn’t know about.

This was a really interesting topic to research from my point of view. You’re going to be talking to us a little bit about typography. That’s based upon a workshop that you did yesterday. How did it go?

[00:05:12] Giulia Laco: I’m happy about that. I’m happy to hear that you are interested in typography as well.

[00:05:17] Nathan Wrigley: Was it well attended? Did you get your information across? Did people engage with the topic?

[00:05:22] Giulia Laco: I think so. I divided people in two groups, developers and designers. So to let them think about typography with the mentality of the others. So that was the point I was trying to have.

[00:05:35] Nathan Wrigley: Well, the reason I wanted to talk to you was because when I was looking through the list of presentations and workshops, yours was really different, a topic that I genuinely hadn’t thought about in the way that you’ve made me think about it.

Because whenever I think about typography, I am really just thinking about whether I like a font. So if I go to a website, I just make a quick judgment. Do I like that font? Do I not like that font? But there’s a lot more to it than that, which we’re going to get into. But can you just tell us why you’re interested in this? Do you have a history with working with type? Why are you so fascinated by typography?

[00:06:17] Giulia Laco: Okay, well, maybe it’s because I’ve started making websites at the very beginning of the internet era. It was around, mid nineties. And we didn’t have the possibility to use web fonts of any kind on the web. We did what we could with very few tools. Whereas later on in 2009 or 10, we had this great possibility of using web fonts, and I started to get engaged with, with the typography. And that was the time when I was starting typography for the first time actually.

[00:06:52] Nathan Wrigley: Are you interested in typography away from the internet? Are you interested in the way that type is presented in books and on paper?

[00:07:00] Giulia Laco: Yes, everywhere. On menus as well.

[00:07:03] Nathan Wrigley: Yeah, because when you actually turn your attention to typography, which is what I did after we booked this interview. Text is everywhere, and it’s really, really different wherever you look. So we are sitting in a room. There’s almost no text, but there’s a little bit of text behind you. It has a particular font.

[00:07:22] Giulia Laco: Montserrat.

[00:07:23] Nathan Wrigley: Montserrat probably, yeah. I’m looking at my computer. It has a font on it. I’ve just been downstairs, looked at a menu. It had three or four fonts on it. Wherever you look, there is text, and usually the typography has been thought about.

But you were talking about typography from the point of view of how can be done better. How can be a problem for some people, and that I didn’t really realize. I knew that people would perhaps struggle to read text because it was too small, or there was a background color, which clashed with the color of the text. But I didn’t realize that the font itself could be a problem. So tell us how it can be a problem. How can some people struggle to read one font but not another?

[00:08:08] Giulia Laco: Well, it’s a big question, because, there’s a lot of research about that, recent research on readability. Because very few people read a lot nowadays in each country. So a lot of countries are worried about that.

So there are movements to let people read better by making some tools. And big companies like Adobe, Google are on this concern. They’re concerned about that. So they’re trying to study that subject. The Readability Consortium, a consortium from between these big companies and universities in America.

And it’s working interdisciplinary. So with psychologists, typographers, graphic designers. And started to focus on what makes text legible. And what they are, as far as I know, they’re saying is that it’s different for everybody. So you test it.

And so that’s why you need to make tools that help people adjust their texts when they read for long form reading, of course. Not for just a menu or, very few words you are going to read. And they’re trying to do those tools. And maybe it’s difficult for a user to know what they need.

[00:09:30] Nathan Wrigley: Right.

[00:09:30] Giulia Laco: So, they are working also with AI. Trying to have some patterns and, have some themes, let’s say. So that can adapt to very different kind of people. But they’re trying to reach that patterns by research, not by guessing. So that’s very intereting.

[00:09:50] Nathan Wrigley: Yeah, really interesting. I mean, again, when I was researching this, it suddenly occurred to me that, I have children, they’re grown up largely now. But I remember when they came home from school, at the beginning, their homework was in child-friendly fonts. Let’s put it that way. Often it was something along the lines of comic sans something like that. And it didn’t occur to me at all at the time, I just thought, oh, well it’s a child-friendly font. It’s kind of round and it’s got, you know, there’s no hard edges.

I just thought it’s just a pleasant thing to look at. But now that I’m thinking about it, it was probably an easier font for the child to begin to learn to read with. Because all of the letters were clear. There was no confusion between one letter and the other. You know, you couldn’t mistake the L for the I, for example. And I did wonder, you were saying that there’s less people reading than ever. If the typography is a, quotes, difficult font, it may be more difficult to begin learning to read. I don’t know if that’s something that you were trying to say there.

[00:10:59] Giulia Laco: Well actually, when a child start reading has a very tough task. And helping that process is important. I remember seeing books in upper case letters only, it was meant to be simpler. But they started only to recognize only one kind of letters. In the Latin alphabet, we have upper case and lower case, and they’re very different because of their history.

Uppercase letters comes from the engraved Latin letters. Whereas the small, lowercase, comes from calligraphy. So they’re very different origins,. And it’s not the same to learn lowercase a and a lowercase a. Recognizing them as the same letter, the same sound.

And with sound is also difficult, especially in English, you have so much problem with sounds and letters.

[00:11:57] Nathan Wrigley: Yeah. I think we have 44 sounds, but only 26 letters.

[00:12:02] Giulia Laco: And the combination. When you use a letter and a sound, other languages are much more simpler on that respect.

[00:12:09] Nathan Wrigley: Yeah again, remarkable. I’d never really given any thought to how different uppercase and lowercase are. But they don’t bear, in some cases they’re quite similar.

[00:12:17] Giulia Laco: Yes.

[00:12:18] Nathan Wrigley: So an l and a capital L, broadly the same. But something like an a, the capital letter A and the lowercase letter. They’re just utterly different, aren’t they? They’re really, really remarkably different. Oh, that’s fascinating. I hadn’t given any thought. So what makes text legible to a lot of people, or not legible to a lot of people? Are there any kind of guidelines around that?

[00:12:41] Giulia Laco: Okay, I will distinguish between legibility and readability. Because, you have this distinction in English and it’s great. We don’t have it in Italian. I guess the legibility comes from lighting as we have for legibilita in Italian. And it’s something that has to do with decoding. So that’s something that has to do with the typeface.

Whereas readability is something you want to read, you like to read something, you want to read. And not you’re just trying to decode things. So that’s a big difference, when you start to understand why a text is readable or not. I would say that trying to take a legible font means to have a font with certain characteristics.

For example, it’s let’s say proved that a font with a higher X-height is more legible. I’m talking about running text, the body text for long reading experience. So X-height is basically the medium height of the lower case letters, based on the letter x, that’s why X-height, you see.

And so for example, I don’t Helvetica has a higher X-height than Times New Roman, for example, if you compare it. And having a higher X-height is a typeface, be more readable.

And another very important thing is with apertures. Apertures, how can I say, the white space inside the part of the letters that are open. Take a lowercase e in the lower part of the letter. You have this room. If it’s more closed, it’s less legible because it can be taken for an o for example, you see. So Helvetica, for example, is very well used, but it’s not legible as a body copy. Helvetica is wonderful for display type for titles, but not so well for body text.

[00:14:42] Nathan Wrigley: So you are saying, so this X-height? So is typically the height of the letter x. So if I put an x next to the letter h, for example, it’s the height of the rounded bit of the letter h?

[00:15:55] Giulia Laco: Yes, exactly.

[00:14:57] Nathan Wrigley: Or it would be the height of the letter a? Or the rounded bit of the letter p? The more tall that bit is, the more legible it is for most people to read. I had no idea.

[00:15:09] Giulia Laco: Well, it’s just one thing because, not only that, because it’s also how you set type. For example, if you have a large X-height, typeface and you set it with a very small space between the lines, the line height, the leading, they say in typography. You don’t take advantage of that highness, you see.

[00:15:32] Nathan Wrigley: Okay. So if letters are squashed. If one line of letters is compressed, so line height.

[00:15:37] Giulia Laco: Mm-hmm.

[00:15:37] Nathan Wrigley: Is compressed up against another line of letters beneath it, that makes it more difficult to read because there’s just no room for the letters to breathe, There’s no gap. They’re all just squished together. Okay?

[00:15:48] Giulia Laco: But you have to pay attention not to put too much line height. Otherwise you lose the next line when you jump from one line to the other, it’s too far and you can’t find it.

[00:15:59] Nathan Wrigley: So this is the eyes ability to go from the end of one line and track, and immediately find the beginning the next line.

[00:16:46] Giulia Laco: Yes exactlly.

[00:16:47] Nathan Wrigley: I confess I have experienced that problem before, and I hadn’t noticed, until just now, that that was because of that. I’ve definitely had books that I’ve been reading where I’ve struggled to begin the next line, and sometimes repeated the line that I was supposed to be on. Or I’ve skipped a line and missed a line out and only halfway through thought, actually that doesn’t make any sense. Let me go back. I had no idea. But also you are saying that the amount of, what did you call it, the space?

[00:16:30] Giulia Laco: Oh, typographers call it leading because it’s comes from lead, lead, lead, I don’t know, of the metal types. With metal types they used to put some space between the lines with some lead. So the lead bars.

[00:16:45] Nathan Wrigley: Oh, okay. So they spaced them out with a physical object.

[00:16:30] Giulia Laco: Yes, exactly.

[00:16:45] Nathan Wrigley: And it was a bar of lead, and the wider the bar of lead, the more space. This is fascinating. But you also mentioned in the letter e for example, the lowercase e, forgive me if I misunderstood. So the bottom half of the letter e, there’s a gap, a little gap, and the amount of gap, if the gap is bigger.

[00:17:07] Giulia Laco: That’s the aperture, yes.

[00:17:08] Nathan Wrigley: The bigger the gap is, the more you are likely to be able to read it, typically?

[00:17:13] Giulia Laco: Yes, because you’re likely to distinguish it from an o.

[00:17:16] Nathan Wrigley: Of course.

[00:17:17] Giulia Laco: You decode it easiest.

[00:17:19] Nathan Wrigley: You keep mentioning Helvetica. Is that a font which has lots of problems? Is that why you mention it, because it’s full of things you can identify?

[00:17:26] Giulia Laco: It’s very well known. That’s why I’m mentioning. And very much used. But it’s better to use it as a display type.

[00:17:34] Nathan Wrigley: The only thing that I’ve ever had a problem reading, was the thing that I’ve just described where I have skipped a line or gone back and reread the other line. But I’m imagining that you’ve done this talk because there are problems which people experience, which I fortunately, don’t appear to have a problem with. What trips people up? If you were somebody that, I don’t know how to say this correctly. If you are somebody who struggles to read, what are the trip wires, if you know what I mean?

What are the things in a font could be wrong that make you unable to read it? So you mentioned that the line height, you mentioned the X-height. Is there more to it than that?

[00:18:14] Giulia Laco: Well, there might be a lot. One thing that I can think of are ambiguous forms of letters. Let’s take lowercase letters, p and q or b and d. So for these four letters in a sans serif font, for example, are usually with the same shape, just flipped or rotated. That’s said to be a problem with people that experience dyslexia. But it’s actually opinionated because we don’t know exactly how it works. Actually for everybody can be a problem to distinguish between similar shapes.

For example, as you said before, a child who is starting to read, or to write as well, may experience the same problem. No matter if it’s, if there’s a problem of dyslexia or not. So if you are going to avoid these kind of things, you can pick a font, a serif font that generally has different letters, different forms. The four letters I mentioned, typically with small serfis in different parts of the letters so they can be distinguished, for sure.

[00:19:27] Nathan Wrigley: Can you, I know it’s probably obvious to most people, but will you just tell people what a serif font is and what it isn’t? You know, if you’ve got a non serif font or serif font, what’s the difference?

[00:19:39] Giulia Laco: Let’s take the example of Helvetica and Times New Roman. So maybe it’s easier for people to visualize the difference. Helvetica has straight lines, nothing at the termination of the strokes. Whereas Times New Roman has some small shapes that derive from the calligraphic or the, in that case, for the upper case, the engraving, the instrument that we use to engrave. And so they had this little [feet?] let’s say so, that distinguish the kind of font.

And the font has a different mood, very different mood. And a lot of other characteristics. There are, well, history of typography is based on that more or less.

[00:20:24] Nathan Wrigley: It always feels to me as if a font, a serif font, which has these, I think you use the word where the letter terminates. I’ve never really

[00:20:31] Giulia Laco: thought about that. They always look as if they’re more, I don’t know, maybe in a legal document or something like that. They have this feeling of something more powerful or more important or something. It’s quirky that, isn’t it?

I’m looking at a Google Doc where I’ve written my show notes and, I don’t see any that. I can’t tell you that either of those fonts are a serif font or a non serif font. I find them both equally easy to read. It doesn’t trip me up at all. But typically, is there a problem for some people with a serif font or a non serif font? Is there one, to catch everybody would it be better to not deploy a serif font or is there just no difference in people’s ability to cope with either?

Each font is maybe very different. Most people at the first level, when they start talking about topography, they started to see this difference. But that’s not the main point. Maybe the main point in readability is the rhythm of letters. The rhythm where the white space and the black space, meaning when you have black text on white. They alternate each other.

Try to figure out this word, minimum. You’ll have a lot of rhythm. Minimum in, written in lower case letters. You see? So, the rhythm is very, very different. And maybe that’s important in typography, in reading. And is very important for people who struggle with reading, because you don’t interrupt the rhythm. The rhythm helps reading.

[00:22:03] Nathan Wrigley: It just sort of bounces along, doesn’t it? If you look at the word minimum, it genuinely has a, it’s almost like a little wave pattern going up and down, isn’t it? That’s fascinating. So what did you call it? Your ability to read it. There was a word you just said. Rhythm, rhythm. So words can have rhythm, and the more rhythm there is, the easier it is to read. So if a font provides rhythm, that’s a good thing.

[00:22:24] Giulia Laco: I think so. But it depends also on the purpose. Long reading. I think that’s important. Otherwise it’s different. It’s totally different. I mean concepts with display types because they have a different purpose, you know, text and function. The titles have different purpose. They have to catch the attention. Whereas the long, the body text has to be read, so needs a different kind of attention.

[00:22:53] Nathan Wrigley: Right. And are there any guidelines which kind of fonts catch the attention more, and which kind of fonts work better with the body content? You know, where you’re reading long paragraphs and so on? Does it matter or is there one kind of font that you would recommend in each case?

[00:23:08] Giulia Laco: Generally, when you buy a font, you’ll have a font that is meant for body text and some other for display type. So if you rely on what the designer, the type designer, has done, you are safe. Otherwise you have to. try. But also if you go on a repository like Google fonts for example, you have this distinction among display types and other kind of types. So it’s quite a common mistake at the beginning to take display type and use it as a body text. And that’s a typographic crime.

[00:23:47] Nathan Wrigley: I like it. Typographic crime. That’s great. We’re all of us using our devices more and more. It’s funny that you said that reading is becoming less and less, because it feels like we have text in front of us all the time now. So we’re constantly staring at our mobile phones, and our computers. But when I was a child, if I wasn’t holding book, I probably wasn’t reading.

I mean, maybe there was a poster somewhere or something, but I’m surprised that reading is, there’s less desire to read, because it feels like every day I’m reading more or less constantly, you know, I’m scanning Twitter or Facebook or whatever.

[00:24:26] Giulia Laco: It’s a new kind of reading, Because we had long form reading for books. Then we have glanceable reading for, I don’t know, street signs. Or maybe a manual in a website. And then we have this, they call it interlude reading. You read when you’ve time, you’re doing, you don’t have a lot of attention, you scroll. And then you have also that the way we read on the web is very different from what we read, elsewhere.

For example, we have this shape, F shaped reading. When we, in a website, eye tracking has shown it quite a lot. You start from the top left where the logo generally is. Then you go on the right, then you go on the left, but a bit bottom, and then a bit, you are just drawing an F more or less, when you read.

[00:25:17] Nathan Wrigley: So that’s what the eye typically does when it lands on a webpage.

[00:25:20] Giulia Laco: Yes.

[00:25:20] Nathan Wrigley: What was that? Top left, top right.

[00:25:23] Giulia Laco: Bottom.

[00:25:23] Nathan Wrigley: Bottom.

[00:25:24] Giulia Laco: A bit in the middle, right. And then bottom again.

[00:25:27] Nathan Wrigley: So it makes an, if you were to draw on top of that screen, it coincidentally looks a bit like a capital F.

[00:25:32] Giulia Laco: Yes, exactly.

[00:25:33] Nathan Wrigley: That’s fascinating.

[00:25:34] Giulia Laco: Capital F reading.

[00:25:36] Nathan Wrigley: Capital F reading. Presumably that’s on a desktop. On this, I’m not doing that am I? I’m holding up my phone. If I’m looking at a webpage, presumably it’s a different experience. It’s just left to right, left to right, left to right.

[00:25:49] Giulia Laco: Also because you are hiding some part of the text with your thumbs. Are you right-handed? Left-handed? It depends what you do. And it change a lot. For example, in the UX design, we generally change some patterns with smartphones because we put some menus at the bottom because the area near the thumb, for example.

So, if it changes where you put your fingers, your changes also where you put your eyes. Focusing in which part of the screen.

[00:26:20] Nathan Wrigley: Yeah, that’s interesting. My experience of the internet is that usually the menu on a mobile device comes at top right. There’s usually some icon.

[00:26:28] Giulia Laco: But that’s for convention.

[00:26:29] Nathan Wrigley: But what you’ve just described is much more sensible, having the menu the bottom because.

[00:26:33] Giulia Laco: I hope it will change soon.

[00:26:34] Nathan Wrigley: Because my thumb can just go right to it. It’s just there. Yeah, that’s fascinating. It does matter what device you’re on. But are you using the same? I know that you’ve said that you reposition things like the menu or what have you, but are you using the same font on a desktop as you would be on a mobile device? Is it broadly the same? You don’t need to worry about the view port of a mobile device in terms of the CSS for setting the font. It’s just the same desktop, mobile, tablet, same fonts.

[00:27:03] Giulia Laco: From the readability point of view, I would say yes. And it’s for branding. I guess it’s better to have different environments recognizable. Whereas you have to pay attention to licensing. If you buy a font, for example, you put it on an app, you might need a different license. If you’re using open type, open source phones, you are not going to have a problem. But if you buy, if you rent, web fonts, yeah, you might have some problem or you have to check if you can put that web front on an app. You might need a different license.

[00:27:39] Nathan Wrigley: Yeah, I hadn’t really thought about that. It’s always quite common in the circle of friends that I have, comic sans is a font, which most of my friends ridicule. They think it’s a childish font. Nobody would put it on a professional website. Are there some fonts like that, which you would just always avoid? Not because they look childish, but because they are largely unreadable.

[00:28:00] Giulia Laco: There might be some, for example, well comic sans has a very big history of love and hate, basically of hate actually. But remember the case and presentation of the Higgs Boson?

[00:28:16] Nathan Wrigley: Yes. Was that done in comic sans?

[00:28:18] Giulia Laco: Yes. There was a Twitter storm. Okay, you couldn’t use that informal font on a formal presentation, and that raised the topic actually. You have to use the font that is proper to the situation. It’s like clothing. The clothes you wear, it’s like the font you use. It depends on the situation.

But I can understand the feeling that people have when they choose comic sans. And maybe I can suggest something similar, but a bit more proper, or a bit more interesting in that context.

There’s one font. I am on Google fonts repository. That’s called Amantic Small Caps, and it’s a small caps, so it’s a more, it’s not lowercase. But it’s, I think has a similar mood and I would dare it’s quite a new comic sans in the mood. I mean, it has the same mood, in my opinion. I say in my opinion, it’s also because it’s in my culture, it’s very culture dependent. Because it’s based on what you saw, what you associate to those fonts for example.

[00:29:28] Nathan Wrigley: Yeah, it’s really interesting when I travel to the US. The US have a really different set of fonts which they use, especially on government documents, than we have in the UK. And wherever I look, so I don’t know, I buy some sun cream or something like that. The font choice is utterly different from how it would typically look in the UK. And it’s kind of curious, that it’s so obvious to me that that’s an American box. And yet it’s merely a font that tells me that. But I can see it all the time.

But what you’re saying though is you’ve got to use your intuition. There’s no rule for this is a good font, that’s a bad font. It’s really where are you putting it and your own personal preference. There are no fonts which are out of the question because they’re just literally unreadable by a subset of the people, no, you look like you’re about to say something.

[00:30:18] Giulia Laco: Well, there might be some fonts that are really illegible, but there are some really nice experiment by a very talented type designers, David Jonathan Ross. He tried to push the boundaries of readability, making good fonts, but making how long you can go to draw a very new kind of letter and still have it readable. So that’s interesting to see. But made by people who know what they do.

Whereas if you start, if you look at the, I don’t know, fonts that you can have on a lot of websites, just experiments by people who start. But if you, look at experiments by very good designers, oh, you know what they do.

[00:31:06] Nathan Wrigley: You make client websites still. Do you get into this conversation quite a lot with your clients? Is typography something that you bang the drum of?

[00:31:14] Giulia Laco: I try to listen as for everything else, to the client and understand what they need. And then I’ll try to suggest what I think is proper. It’s like also for the colour of a website for example. I ask and I give an advice maybe.

[00:31:30] Nathan Wrigley: Are there any kind of hard and faster rules for where you, really, it would be unwise to put typography. In our show notes, I was talking about things like is it a bad idea to put, I don’t know, fonts into images.

So you’re overlaying fonts on images. In other words, is it better always to have fonts on a plain background rather than on, let’s say you’ve got a mountain scene or something and you want to write something, you put it onto the image. Is it better to keep the text away from the images? That was just one thought.

[00:32:02] Giulia Laco: That’s definitely better. But you have to distinguish between titles and body copy. A title might be, how can I say? It would be okay anyway. It’s only a word. You might have some tricks, for example, reducing the contest of the underground image. As long as you stick with accessibility guidelines, you’re safe for that regard.

There are very good starting point for readability. I mean, I generally say that it’s better to start from accessibility and there are a lot of accessibility guidelines that help with the text. And then you go on and if you have some tools, like a very powerful web font, you can do more. And then you go with type setting and start type setting.

Well, for example, you have to stop the line length. That’s very, very important. You don’t have to let your user go through all the screen, a very huge screen to go to the other line, to the second line.

[00:33:04] Nathan Wrigley: Is there any guidance about how wide the text line should be? So maybe that’s a, I don’t know, you said using a number pixels is not always the best idea. But is there a character limit, or a word limit typically where the eye can cope with scanning from left to right and then beginning again. Because I’m staring at a Google Doc at the moment and it’s kind of interesting that the Google Doc looks like a piece of paper.

And they’ve obviously deliberately taken it in. The Google doc could consume the whole width of my monitor, but it doesn’t. They’ve confined it to what looks like a piece of paper, and I presume that’s a convention, just so that my eye doesn’t have to go far left, far right, far left, far right. I could keep my nose pointed at the document and just let my eye do the work, whereas if it went from left to right, I would be moving my neck all the time as well. So is there a guidance of how wide text should be?

[00:33:56] Giulia Laco: Typographers, for a long time, had recommended a line length of between 45 and 65 characters per line. It depends for Latin alphabets. The Web Accessibility Guidelines says, I think at the level Triple A. They say that they need 80 characters maximum per line for Latin, I think 40 for languages with ideograms. So they say something about that.

And it’s very interesting to see that there’s a correlation between this line length and the way we read. The way we read is basically with eye and brain because, it’s a really complex process. But when we read with the eye, we just focus on few letters at the time, maybe six, seven characters. Then we jump to another area of fixation. And so you can do some math. A very good typographer Bruno Maag made that math.

And he discovered that calculating the number of characters you see in each fixation has a relationship with what typographers said for years, for decades, for centuries actually. So they arrived at the same conclusions. So let’s say 55, 65 characters per line is a good measure.

[00:35:18] Nathan Wrigley: Yeah.

[00:35:18] Giulia Laco: On the other hand, all these factors are correlated. And especially font size, line height, and line length. Some typographers says that it’s like a triangle of these three elements have to be on balance. So if you change one, you have to change the others. Adapt the others.

[00:35:40] Nathan Wrigley: So we’ve just been talking about the left to rightness, the line length. Is there anything about the length of the paragraphs that you use as well? I mean, I’m just used to reading books and obviously they’re confined by the width. The line length is taken account of. But I’m conscious that everything’s broken up into paragraphs and those chunks of meaning have often got little gaps between them. I’m imagining in many cases, paragraphs could go on for pages, but it’s better to break it up and it helps the brain to associate that this is a body of meaning and here’s another body of meaning and so on.

[00:36:10] Giulia Laco: Yes. I think absolutely. The basic of our work as web designers actually. So it’s different from what we do on paper, because on screens we have to catch the attention. And so we need to make things very easy for the reader. That’s the purpose. Maybe it’s not always the case that that’s the purpose, but on web design generally, that’s the purpose.

So it’s better to split a paragraph in a few small chunks, let’s say so, and give different, styling and introduce hierarchy as well. So that helps a lot in reading.

[00:36:48] Nathan Wrigley: So headings and paragraphs and other headings and so on. You mentioned in the show notes that when you did your workshop, were going to give some helpful CSS to break up the text. Can you just tell us what that was? What helpful CSS did you have?

[00:37:02] Giulia Laco: Basically, I would say that’s very important not to use an absolute unit when you set the font size. Where font size is what is more relevant in readability? Because if it’s too small, you can’t read at all. If it’s too big, also so you can’t read it well. So font size is very important and after the responsive web design, we’ve had the responsive web typography. It didn’t come at the same time. Because with responsive web design, we started to make things different for different devices. But we didn’t touch the font size.

[00:37:40] Nathan Wrigley: Right, it was just the same. Yeah.

[00:37:42] Giulia Laco: But it was really important to change the font size. At the beginning I thought that it was important to make smaller font size on smartphones. Because you had a very smaller screen, but that was not the reason I realized later on.

And the reason is the distance of reading. So when you read something that is near, you don’t need a big font size. You generally keep an iPhone at 20, 30 centimeters of distance from your eye. Whereas if you read to a computer you are 70 centimeter, 80, 1 meter, I don’t know. If you read to a screen in a room, for example, yeah, it’s very, very different.

For example, yesterday I had this at the workshop. I had this CSS Codepen. I realized I had some minimum and maximum font size in my slider. It was perfect for desktop reading. As soon as I was in the room, I said, oh no, I have to change, and I changed it to a different values because of that.

[00:38:48] Nathan Wrigley: So, the presentation looked good on your computer, but as soon as it went on the big screen.

[00:38:52] Giulia Laco: Okay, the presentation was okay because I knew it in advance. I mean, it was a presentation, but it was in the playground, I realized, yes. And because I had all those values, I was guessing what was reasonable values. But I didn’t test it before on such a big room.

[00:39:10] Nathan Wrigley: So I’m guessing that at some point soon we’ll be able to make a link to WordPress TV. It occurs to me that the whole time we’ve been talking about typography, but we’ve probably been concentrating on English. Although it’s a common language, it’s by no means what everybody reads.

So we’re going from top to bottom, left to right. But other parts of the world, let’s say people that read Arabic or Hebrew or Korean or Japanese or Chinese, whatever it is. They’re going in completely different directions, left to right, bottom to top and so on.

Do they have similar concerns with their characters? Or is it just uniquely the Latin set of characters which has these problems?

[00:39:54] Giulia Laco: I’m sure they have. Also maybe different problems. I’ll distinguish between Arabic to the other languages you mentioned, like Japanese, Chinese, and Korean, for example. They have ideograms. With Arabic it’s quite a calligraphic origin of the way of writing. And they make a lot of use of ligatures. It means it changes the shape of letters according to their combination.

We have ligatures in Latin as well. For example, if you think of f and i, small lowercase letters f and y. Sometimes you have one glyph that put the dot of the i inside the f. And that’s coded inside the file, the font file.

So in Arabic they have a lot of ligatures. And lately I’ve discovered that they also use color for accent. And Google fonts has some new fonts with this characteristic. Color fonts. Do you know color fonts?

[00:40:54] Nathan Wrigley: No.

[00:40:54] Giulia Laco: They’re very, very new. They’re coming.

[00:40:57] Nathan Wrigley: How do you deploy color to. What? You’re going to have to explain that.

[00:41:00] Giulia Laco: Well, they have color coded inside the typeface. It’s a new format we can use. And, it’s linked to CSS. It’s not so much ready, but it’s coming. It’s a new technology after variable fonts.

[00:41:17] Nathan Wrigley: So certain aspects, certain portions of the letter receive different colors?

[00:41:22] Giulia Laco: Yes.

[00:41:23] Nathan Wrigley: And it provides, I have to just ask why? Why would you want to have a different portion of the letter in a different color?

[00:41:30] Giulia Laco: Apart from Arabic, why not?

[00:41:31] Nathan Wrigley: Oh, so it is, it’s just style. It’s not from the point of view of readability or legibility?

[00:41:37] Giulia Laco: No. New frontiers of typography.

[00:41:39] Nathan Wrigley: Oh, that is interesting.

[00:41:40] Giulia Laco: But that was one point, but for Arabic might be for readability purpose. That’s why I mentioned it.

[00:41:46] Nathan Wrigley: Honestly, this is such a fascinating subject. Unfortunately, we’re running out of time. Where would we go if we’ve been inspired by the talk that you’ve given today to me? Have you got any tips or places, websites to go to? If people are curious, where would you send them?

[00:42:03] Giulia Laco: Okay. There are plenty of places and topography has been receiving quite an attention lately on the web. I’m always talking about on the web. But you can start with books from the tradition of typography. There are, I don’t know, from the sacred book of yypography, Robert Bringhurst, The Elements of Typographic Style. That’s a really nice starting point. Well, it’s not only a starting point.

Erik Spiekermann’s, Stop Stealing Sheep and Find Out How Type Works. It’s very funny name. It has a history. I won’t spoiler it.

Or I really, really liked the book by Richard Rutter, that is more on the web. It’s called Web Typography. It’s a manual on that.

Or otherwise you can follow Jason Parmental that has been making a lot of experiments. It depends which part are you interested in.

[00:42:59] Nathan Wrigley: You’ve given three or four things there. There’s probably something to get teeth into. And what about you? Where would we find you if people have listened to this and quite fancy having a chat with you about all this. Where do you hang out online?

[00:43:09] Giulia Laco: Quite everyone. Maybe on LinkedIn, maybe you can reach me there so it’s better.

[00:43:14] Nathan Wrigley: I will find your LinkedIn profile and I will link to that in the show notes. So let’s wrap it up there. Giulia, thank you so much for chatting to me today. Honestly, a real eye-opener. I’ve enjoyed that a lot.

[00:43:24] Giulia Laco: Thank you. Me too.