Just Enough Typography by Joni Trythall

Speaker 1: Come on, no.

Speaker 2: You're probably nervous already. Um so hello, Joni. Nice to meet all of you. I'm incredibly nervous. You're not supposed to say that. I really don't care. Luckily I see a lot of familiar faces, which is great. Um when I was rehearsing this in my head, I was like talking to like four imaginary people, which I see now that was like not realistic at all. Um So let's let's just get started. We're gonna learn a bunch today in this really quick time together. This talk is about knowing just enough typography to produce a really delightful reading experience on the web. So we're not gonna talk about the anatomy of type, even though I have an audio

Speaker 2: some poster about that. Or like all the terminology associated with topography in general. This is for people who want to finish their side projects on their own Or fill in the gap when a designer is out sick. Or I think my abstract says something about them going crazy or something. I don't know. It's probably more likely, but Um, okay. So I just like to be super honest. This is how I'm going to spend your time today. This is a high-level look at what we're going to be talking about. Um Let's go. What is it though? Um topography is what language looks like. So it's the art and technique Of displaying text in a way that is delightful and easy to read.

Speaker 2: It's not strictly visual or aesthetic. It's utilitarian. And it's for for anyone who uses text to communicate. So thanks for choosing this talk. It it matters a lot. Um the National Weather Service recently stopped yelling at us, raised hands emoji. Um they were using all caps to communicate like forecasts. And just general messages. So it was kind of funny because it's really hard to read. You have this like emergency and it's like it takes forever to like really understand what's happening. Because all caps creates like a very blocky experience and it's hard to distinguish the letters. Um and also

Speaker 2: sometimes it's like it might rain today a little at like three And then it's like, that's all it's saying, and your heart rate's going, and you're like, ah , the world is ending. It's just it just might rain. Um so so that was really great thing that happened this year Um NASA learned a lot of things. There were some accidents that happened and they did some investigating and they found that their the design of their documentation and their maps was to blame So they did some research and they published a 40-ish page document, delightful reading, on lessons learned there. And it includes things, um, they were using a font size that was over fifty percent smaller than than recommended.

Speaker 2: So people couldn't read it and it didn't prob it didn't like encourage reading when they did try to read it. It saves lives. So this is really important to talk to Vietnam. Road signs are less terrible now. For the longest time, they were they used a typeface called Highway Gothic. And it was very hard to read in the rain and when it was dark and when your light hit it it would just sort of glare and blur together. So really when you needed it the most it it failed you Um so they got some designers to create a new type base and it's called ClearView and it proved to be much better. Um reaction times were better, people could read it and there were there were less accidents and less

Speaker 2: computer Also, studies showed that you know when they focused on making the controls in the car easier to read, less drivers were distracted. But now there's like phones or whatever, so who knows now. Um so this is just what I was going on about earlier. This is what it looked like before. It's like it's so anxiety provoking, right? And now this is this is the new new thing just saying in my vein. Let's bring an umbrella. And these are the the street signs I was talking about, a before and after of the different typefaces. Okay, it evokes emotion. So the very an awesome example of this is the book with no pictures. And I'm sure

Speaker 2: you figured this out already, but it has no illustrations at all. Um and but it's a really it's a really energizing book and I bought a copy to for all of you to look at because I'm just Such a huge fan. But it's it has a really silly feel to it and it's completely accomplished from topography. So influencing how users feel is very powerful. When we're working on the web, we really it's a very impersonal medium. And we really want to bring our brand across correctly and set the voice and tone So it's it's a great way to express personality and stand out. It's a huge competitor advantage to be able to make someone feel the right way.

Speaker 2: Topography is such a a great way to sort of pull that off The safest assumptions we can make is that nobody has time to use our products or website So when you use topography, it's a really great way to evoke emotion and grab people's attention and make sure that they're getting the important information they need as quickly as possible. It also strengthens memories. So when someone's using your site and you make them feel a positive way, they're gonna remember it and they're gonna remember the content better. So this is especially important when you're sort of straying from establish established mental models in in any way.

Speaker 2: If you evoke emotion, they're gonna remember that better. Oh, and this is um the author is actually BJ Novak, and this is him reading his amazing book. And this is just I just like threw these in there randomly. Um this is a stop sign. I just love this because it's like I would not stop it this it's like a it's like a light suggestion like like you don't have to um so I just think that's a really powerful way of showing uh like how we can communicate through the typefaces that we choose. Um readability and legibility. So now that I've convinced you all that typography is like the most essential thing, uh we're gonna talk a bit about what good typography

Speaker 2: even means and and how to get there. And some of these concepts are super straightforward and some of them are a little uh a little more invisible behind the scenes stuff So the most important thing, if I could only choose one thing to talk about for 20 minutes, would be the the size and the line height of of your text. It's it's really frustrating to come across like a site that's like incredibly beautiful and has the tiniest tiniest text like you have no idea what it's saying you have to magnify it Um that's really frustrating. So understanding what size is appropriate for the web is very important. Luckily some people much smarter than myself established some like op optimal font sizes. It's between 14 and 15 and 24 and 25

Speaker 2: pixels. It's really hard to get designers to to agree on anything. So I couldn't get like a straight answer, but that is the the general range. And then of course the line height is between 120% and 145 %. And ideally you're using um Values like line height 1. 5, which is one and it's one and a half times the font size that you selected. So percentages are completely fine, but not best practice exactly So when you increase the font size, you have to increase the line height as well to ensure optimal legibility. And of course on mobile you can make it a little smaller because we hold them much closer to our faces than than desktop. So sometimes when I forget my glasses, that's

Speaker 2: that's not really the case. So you one thing to keep in mind is all these various font sizes have to be within a container that also changes itself So this is a little thing I adapted. I put ish in there, that's um my little addition, because I don't really follow this exactly. Um so you just feel it out. If if your text takes up the entire screen, it's just too it's too long. It's too hard to follow and scan Okay. I left this intentionally blank because I'm talking about white space and I thought it was clever. Um but I see now that that was a mistake. White space is the empty space around elements. So margins and paddings and line height, also called negative space

Speaker 2: sometimes. So I read this quote once and I'm really bad at remembering who says stuff, which is really rude. But the power of white space comes from the limitations of human attention. and memory. So when you use whitespace well, it helps guide the user through the page and they know what to absorb immediately and what's like less important. And also I when you when sometimes when you see a site that you love and you can't exactly say why, it's usually because it's like on-point white space utilization Weight space and proximity. So the law of proximity states that items near each other are going to appear related. So

Speaker 2: white space is a great way to confirm or deny relationships between text and images. Um vertical rhythm. I talked about this a bit already, but um Basically, this is done through setting a baseline. So you set a line height and and then you're going to use multiples of that value throughout the site for visual consistency. Designers like to talk about consistency a lot, right? And so this is one way you can make them really happy to show them your vertical rhythm Hierarchy on the web

Speaker 2: refers to the visual organization of things by importance. through size, proximity, and color. Proper hierarchy helps us understand What's important and helps you scan because we don't really read, do we? We just scan. We don't have time for that. We're very busy. And repetition and consistency allows for safe assumptions. So if all the paragraphs on a site are gray and I'm scanning I'm not reading. And all of a sudden I see a block of orange text. Well that's different. That's that's not a paragraph. So that's gonna catch my attention. That's gonna make me pay attention But it was safe to assume that that wasn't a regular paragraph. It's also very calming.

Speaker 2: And that just sort of goes back to what I was saying when a site just feels right. Someone's obviously paid attention to to the spacing and and hierarchy of that site I find contrast to be especially interesting right now. I've noticed a lot of sites that are using poor contrast and intentionally. Um I don't know why. It hurts. Um you'll know it when you see it. It looks like the letters are are shaking. Um if you have migraines you you've you know done this your computer a few times But sometimes it's it's not so obvious. So it's always safe to use a contrast checker. Contrast checker. com, I believe, is a thing. If it's not,

Speaker 2: I'm gonna grab that. And I was actually working on an example of four contrast, and I gave myself a headache and I was like, why would I do that? So that 's that is so Awful. So I just didn't, but then I had this space there. I just filled it right. Okay , emphasis. Use bold or italic. Don't use both. Don't use underlines or exclamation points um they lose their effect, right? When it's like every sentence is an exclamation point. Um it's it's counterproductive. So when you're using a sans serif, use just bold because if you use italic, it's not going to come across that clearly

Speaker 2: When you're using a serif, you can use italic for light emphasis and bold for heavier emphasis. And also just be careful not to overuse. What's really the theme here? Um if you overuse it, it loses its effect. Oh, and one last point. Let me take this off. I think this is Twitter or something. Um and it's vibrating in blood pressure. When you have something in bold and there's a punctuation at the end, don't um don't let that punctuation inherit the formatting of the emphasized text. Hyphens and dashes.

Speaker 2: Okay, so hyphens are the the shortest little line of the three and there's just like a a keyboard button for it. Um super easy. Um hyphens are often not used correctly. Um they're actually used to just combine multipart words. So part time. There's a hyphen in it. in the middle. In n -dash, you need to use the the keyboard shortcut for that or there's an HTML um code. In n -dash is the shorter of the the two dashes And it's used in date ranges, like from 2000 to 2006 , and then to combine to to signal a relationship between words. So love, hate, relationship.

Speaker 2: um would have an N-dash in there. An M-dash is the longest and most um underused, I would say, of them all. And this one is to break parts of the sentences to to create stress on a particular thought. You would use an M-dash to sort of separate that. That's often achieved with an ellipsis, like the three periods, instead of an m-dash, which is the proper way to do that. So let's just talk about ellipses now. Um they're used to indicate omission with within quotes and not sort of stress specific specific thoughts. It has its own little keyboard shortcuts. So it's actually not three periods in a row.

Speaker 2: I'm totally guilty of doing that myself, but it's not correct because it won't have the right amount of spacing between the dots. And then space before or after the ellipses, you just sort of feel that out. Like how does that feel to you if you put a space? Or if you don't have one, is it too cramped? That's up to you So curly quotes. I'm focusing on curly curly smart quotes and not the straight quotes that are just the the keyboard button. Because 98% of the time when you're working with text you want the curly quotes. That's the actual correct one. When we're talking about like code syntax, of course, that is not the case. But we are not talking about that right now

Speaker 2: So you'll want the the curly quotes and and they do have um special shortcut and special HTML characters And just one quick note is when you have like a block of text that is in quotation marks You want it to hang the punctuation so it's not flush with the text. Because when it's not hung, it creates it just sort of breaks that up and it's harder it's harder to read. Selecting typefaces. You'll want to focus on your anchor face, so whatever you're using for the body copy, because that's what you have the most of.

Speaker 2: That's what you'd focus on when resources are limited and they they always are. The very first thing you want to do is read your content because you want the topography to match the feel of your content and and match the brand's voice and tone. So you so you gotta read it. Um When pairing typefaces, most designers will actually tell you to avoid doing this and just select a typeface that has a lot of different styles. Um I think it's really not very practical. Uh we use Google Fonts a lot. Like I totally used it for this presentation. And When you look at which

Speaker 2: typefaces have that many different styles, like you need at least like seven or eight. There there's maybe a handful left. And then when you I think it was 20 last time I checked, because I did check. Um and so when you immediately eliminate the ones that are just a little bit silly and they just don't go with your brand, you're left with a handful and then of course There are countless other sites that are choosing between the same handful of typefaces. So there's some things to keep in mind when you're when you're pairing typefaces. When you if you're if you have a a serif anchor font then you're gonna wanna choose a sans sera for your display. Avoid overlapping moods. So Again, uh they make certain typefaces make you feel something.

Speaker 2: Um, and they have certain characteristics and you don't want to have too much overlap. If you're gonna have two separate typefaces, they have to be very different from each other And of course a weight contrast is always visually pleasing and that's just gonna be a heavier typeface. So the thickness of it Um so there's no like hard rules, but I would say if there was one, it's that you don't want more than two. Um And the last thing I want to say here is you're not on your own. There's so many resources to help you choose um which typeface to use and s specifically with with Google Fonts. These are the two that I used in the presentation

Speaker 2: and they like Okay, so I created um a website reference for this talk So I have my top ten topography dot tips. I spared no expense with that. I was like, I need that. So it's my top ten tips along with the associated resources. for those. And then there's also a neat part at the end that's like just neat general links like that NASA document that you guys are all gonna read like right now That's there. So thank you so much