 This is a slide deck that I used long, long ago. So today what I'm going to say is how to pair typefaces. Remember this? Yeah. So all the first things that we have to do when we start on a new project is to find typefaces. And I know most of us front-end developers we don't really care because we've got designers dealing with typefaces for us. But if we do our own projects, we still have to make sure we get the right typefaces in order for the design to look nice. But that's one of the battles to be fought. So that's what I'm going to talk about. I'm Zell. And this is me. So the overview for today is just we're going to look at typeface classifications. And from the typeface classifications, we'll know how to pick typefaces that will pair well with each other so we can just use them. I'll first go into the major typeface categories. So we have a general rough idea of the different kinds of typefaces out there. Then I'll go into typeface subcategories, which is where it really gets confusing. And then I'll end off with a 3 by 3 grid that you can use to pair typefaces, which is the simplest way of doing things. It's the famous 9 by 9 grid. Yeah, it's the famous 9 by 9 grid that I, wow. So there are six major typeface categories. Sans serif, serif, slap serif, monospace, script, or decanhoi cursive, and display. So these are the major categories that people just somehow group things into. The first three categories is quite easy to look at. It's easy to tell by just looking at the endings of the letters. So if there are no endings over there, it's like there's no serif. So it's a sans serif, sans meaning don't have. You're going to do like a Singaporean version of everything. I'm in Singapore, man. I love to see you in Thai, like everything translated to Singaporean. I need to rehearse for that. I've never attended any of my talks. So you're going to say it's as good? I turned on the American accent. Yeah, she turned on the American accent. It wasn't fun after all. But anyway, if there is blocky endings at the end, it's called slap serif. I just think of slaps as blocks, so slap serif. And then if there are endings at the end but they don't look blocky all day, then it's just called serif. So those are the three of the main categories out there. The next few ones are monospace. Don't tell me you don't know monospace. So I'm going to say script or cursive. It's just cursive writing that looks kind of good. And yeah, display is big tags usually. And decoratives are decorative features that you'll see. Not really important when it comes to picking or pairing typefaces, because we usually don't play around with the rest of the things. What we're really concerned about is the first three. There's first three types. So for the subcategories, I'm just going to dive into that first three. Sensorif, serif, and slap serif. If you start digging into subcategories, you start to see names like humanists, neo-humanists, old-style, grotesque, neo-grotesque, transitional, geometric, modern, and blah, blah, blah, blah, blah. So just by looking at a list of these names, it's hard to identify the typeface. Second, it's hard to know which typeface falls in the which category. And then third, it's hard to know which categories pair well with each other. So what I came up with after digging through a few typefaces and reading a few things here and there is this thing. It's a 3 by 3 grid, which for some reason said is a 9 by 9 grid. So anyway, to fill out this grid, we just have to look at three things. Oh, the number three. The letter forms, the stroke, and the third one is just a layman thing that I came up with. So I probably have to explain a bit more. I call it the tilt. So first of all, let's take a look at the letter forms. So letter forms meaning the only question we're going to ask here is, do the letters look like shapes? Does it look square-ish? Does it look like a circle? For example, Proxima Nova is circle-ish. So we call it a geometric typeface. And geometric typefaces only applies to sense or slap-serif. Sense and slap-serif are actually pretty similar. The only difference is that there are these blocky endings at the end. But the classifications for sense-serif and slap-serif are exactly the same as you can see later. Then after filling in the geometric typefaces, we look at the stroke. The stroke is how much we want to look at the stroke contrast. So from this picture over here, you can see that the thinnest part of the stroke and the thickest part of the stroke are there. There is a difference in stroke width. And when we look at serifs, we can look at the stroke to tell us to tell the difference between old-style typefaces, transitional typefaces, and modern typefaces. So if we go by very low contrast, that's the old-style one. And that is also called humanist typefaces. Then in the middle is transitional, so it's not here, not there. And then all the way to the end is a very high stroke contrast. Those are the modern typefaces. Then we can just fill it in. Old-style, humanist, and modern. Modern being at the bottom and geometric is because if you think about geometric shapes, they are more structured. They are less personal, so more impersonal. They feel more cool and more modern kind of thing, likewise for modern, so they pair well with each other. Now after looking at the stroke and the letter forms, we take a look at the tilt. But the tilt is not really exactly part of the typography wording in the sense. Sorry? No, this is not even. This is the stress, or the axis. The tilt is this one, which I kind of coined. So let me just explain this part first. So the tiniest part of the stroke is called the axis. And from that point, we look at how the letters tilt in a way, because the more tilted, it's kind of like more human writing. The more modern it is, the letter forms are more straight and more structured. And when we write, we don't really hold a pen up straight like that, so when we write, it's kind of like tilted to one side. So I tried looking at the sensory type faces, because that is where it's hard to differentiate between what is a humanist sensory and what is a grotesque, meaning like a transitional sensory. So what I did was, I thought that the letter H and N and M were pretty obvious in saying how the stem tilts on this part over here. I expect, especially this part, the angles and compared to that one, the more tilted or the steeper the angle it is, it's more humanist. So the other one is less tilted, so it's a grotesque. And there are some variations in terms. So grotesque is also called grotesque with a K. So there are things like that that, well, we don't really need to worry about. So another example is active grotesque. So basically, if you see the word grotesque in there, it's definitely a grotesque. They label it for you already. And using that same thing, I saw that there's not really a lot of tilt in a way for that typeface. And that's when you finally feel in all the things. Humanist typefaces pair out with humanist typefaces and humanist typefaces. Old style typefaces are basically called humanist typefaces. Transitional grotesque and then for modern geometry. Why we can pair it like this is because, well, if we use the three by three grid, there are some common typeface pairing advice. So the first thing is you say, pair sans serif with slap or serif typefaces. This is when you start using the contrast between typefaces. Because if you have an ending and versus if you don't have the ending, it's quite contrasting. If you pair two slap serifs together, it looks weird. That's when it starts to go haywire. Or if you pair two sans serifs together, it looks too similar also. But the funny thing is, at the same time we need contrast, we also need some sort of similarity between the letter forms or the X height or something. So they still feel that they are together. And one of the things that you, one of the tips by people is that you can pair typefaces from the same designer because designers often have a specific preference for strokes and kind of shapes and things like that. So the letters that they design will somehow have the same thing. So this is one of the tips by most typographers to pair typefaces. And for the last one, we say to pair typefaces from the same year or the same age. And basically, if you take a look at the same year or the same age, it's this grid. For old style, you pair with old style typefaces. For modern ones, you pair with modern ones. And that's the end. Next time, this is an example. Now we want to see.