Lessons

Lesson Info

Type Hierarchy

typographic hierarchy. Let's talk a little bit about this because this is quite important. Before choosing fonts determined the typographic hierarchy of the text. So what does that mean? Well, you, the designer, control what the viewer reads and in what sequence you dio you, the designer must capture your viewers attention quickly and keep it on. That's the key. And that's really the key with the Web, because the Web it's so easy for people Just just click away, okay? They have statistics on that. So this relates to print and tremendously to the web. Okay, so how do you do that? You prioritize levels of information by levels of importance, which means when you start off your copy, either the client's gonna have certain things in bold face and say, This is a headline. This is a subhead. They might not. And if they don't, you need to find out. Okay, you have to determine what you want your viewer to read 1st, 2nd, 3rd, etcetera. This is critical. I have seen beautifully designed pieces b...

y experienced designers. Where the hierarchy is is bad because they haven't thought of it that way. They just put peace elements down without sort of putting it on the wall and going, Okay, walk out of the room. Walk in. What do you see first? If you can't do it, have somebody else come into the room when your office and look at and tell you if they can read the appropriate things in the appropriate level. Okay, select and create a typographic focal point. The exception to this is if the focal point of the piece happens to be an illustration or photograph or something like that, then that might be the focal point of the piece. And like I showed you in some other examples, you have to pull back a little bit in your type treatment and let that speak. First. You have to design to support with this information in mind. So your tools are the type choices, weights and versions type size, case meaning or you're sending it all caps or upper lower case. Uh, the alignment, the line spacing and the color. Remember, group information cleanly and clearly keep groups of information unified and make the most important information highly visible. Now, whether that information is type or image, you have to decide here is some examples that I think of really good hierarchy. So this is a poster you clearly see jazz bike ride first. The little the other elements of information are grouped cleanly and clearly, and it integrates well with the image. Here's another one you read the even though I think they're using dumb quotes and we'll talk about that later. Um, you see, you're being not manipulated board. You're the designer is controlling where you look first, which is what you should be doing. You see allowed exile tour, you see the date, you see things your eye moves down. The poster doesn't always have to move up down. This is something that is also well done, and the main important title is urban Playground, and it's not at the top, so it doesn't always have to be at the top. Placement it all, but there's a lot of it's very noticeable, and the other elements are in the upper right and smaller and groups cleanly and clearly. Also, this is a little, little more things going on here, but there's still, even though there's business in the middle, there's a lot of sort of blue space calming space on the outside. So your eye goes to the middle. Not a lot of information, but the hierarchy still predetermined and important. Okay, Uh, complicated piece. Marty Blake is a master of combining typefaces in hierarchy. And she created this, um, invitation. And although there's lots of bits of information, she brilliantly created a typographic hierarchy. So the most important things you notice first, and then you either go up or down on the on the invitation. Uh, this is something I worked on quite a while ago. Um, that required tremendous amount of attention to hierarchy to typographic hierarchy. Because there were so many elements here. Not just on, as you know, not just the title, but as you see, I used wait style caps. Um, small caps. It's hard to see on the bottom. I used, uh, Scholar Sands, which had a serif in the Sands versions. So I was able to use them because I probably had here. I would say seven or eight levels of hierarchy I had to create in one piece, um, wonderful piece by Alexander Eiseley, all using. He's using one typeface here. He's using a stone sands. Okay. And even though there's a lot It's mostly type perfect hierarchy and he's using, you know, you read the important things in the order. It's supposed Thio, so he's not only using the typeface and wait, he's using color. He's using case. He's using placement. And I have to say on this piece, if that radish weren't there, it would be dry and boring. So sometimes the inclusion of some little thing somewhere in the piece. It also draws your eye down. It doesn't stop your I wants to get to that radish. So you go from the top to the bottom. So it's sort of a really, really smart design element. Okay, so really important aspect that we're going to go through that everybody has challenges with, and that's how to mix or combine typefaces. Okay, I will say, Um, all I can hope to do is give you some basic guidelines and show you some good examples because this isn't something you learn and you memorize and you get okay. Learning to successfully combined typefaces is a skill and an aesthetic that takes time, patience and a lot of experimentation to master. It requires training your eye to see which designs blend well and enhance each other as opposed to clashing and creating conflict. What you want to do is you want to go for contrast, not discord, not conflict. So contrast is the key. Select one typeface to take the lead role, so to speak, as I mentioned earlier and the others a supporting role. So you don't want things to fight with each other visually. When in doubt, go neutral for one. Don't mix moods. So you're not gonna put a western font and an art Deco or Art nouveau font on the same piece? Okay, they're definitely going to clash some good combinations. And this this is your where you got your guy kind of starts. Um, combining a text typeface with display in a text and a display. You usage? Um, it's a good place to start is there are naturally contrast ing differences between text and display typefaces. As I discussed earlier, this is what everyone's taught. The first thing you're taught Combine a Sarah for the sands. Okay, I'm not saying it always has to be, but as you're starting to do this, you want to sort of start with more safer combinations. So combining serif with Sands is a tried and true approach. Uh, they tend to have strong enough design differences to create good contrast and effective pairing. If you pick the right ones light with heavy meanings, a lightweight with a heavier weight could be a different type. Face could also be the same type. Face the same type family. Okay, so combining light with heavy is a good technique. Just make sure there's a strong enough weight contrast. You don't want something just to be a little bit heavier, because then it becomes a visual annoyance. More than a contrast wide with narrow. This approach can work. It doesn't seem like it could work. But if you do it carefully and thoughtfully, um, it can work. Okay, just depends on the approach Decorative with neutral sands. So anything highly decorative you probably wanted just not. You want to keep the other one nice and simple. So if a typeface oozes personality or individuality, it should only be combined with a very neutral typeface, and you will see many examples in the world and that I'm going to show you that combined a decorative typeface with an all caps sands. Okay, the reason they go with all caps because you don't have the distraction of the centers and D centers, so it becomes a neutral ground. Remember successfully combining fonts here? I'm saying fonts and typefaces, which I explained earlier, is not just about selecting the right fonts, but also about how the type is styled. Whether it's the size case color position. It's about how you lay it out, how you arrange it. Ah, good way to train your eyes to seek out type combinations all around you. So your type education should just be starting today. It should be continuing everywhere you go from this point on. So everywhere you go, look at signage. Look a menus. Look at books, look at magazine covers, look at logos, posters and websites, and then you'll become a crazy type person like me. But you know what the beauty of it is when you see something good, it makes your heart sing. When you see something bad, it's really bad. So you know who wants to live like this? I mean, I'd rather live on a roller coaster of visual typography. Examine these combinations carefully and identify is best is you can what makes them successful so if you're sitting on the subway or bus or somewhere and you have nothing to do, you see? Say I like that. Okay, Why don't I like that? All right, let me start looking. So stop reading and start looking at the typefaces and seeing what what you like about them. Collect examples of good font combinations and use them as references and for inspiration. You've got your your smartphones. Just take pictures is you know, or tear pages. I mean, if you go to the dentist office, you know, you should check with them first, but I can tell you they have magazines that I don't have it home, and I don't care what the magazines are, but I look at them, and if I see really cool things or really bad things that I might want to use in class, I asked permission. And I say, Why don't I take or I take a photograph of the page and I've taken I've never been told. No. Okay, so there are no shortcuts to learning how to mix typefaces. It takes time and patience. I'm gonna start mostly with two typefaces pairing two and then as we go on, there'll be some more complicated pieces. Yes, that's actually a typeface. The words sick. You know, I tell you, it's hard for me to not talk. Look at these things. I have to just keep. I just have to keep my word and just keep going some of these air from the Web, so the resolution might not be as good. Um, you know, sometimes I see things on TV commercials and I just freeze it. I take a picture. I think that's from Angie's list. Simple works. Two displays. See that. See the sands. All caps sit neutral sands all caps on the bottom from TV Sands Neutral Sands. All caps cover not complicated pairing, but yet using a typographic illustration. Very clever. So the O is not only the O in the word revolt, but it's also changed, falling out of his pocket a little more complicated, but still works for different reasons. The author's name, which clearly everyone knows, and then the title, interact together, speak to each other. So here's you know, here's a skinny on the bottom, a tall skinny, so it's with, you know, a wider typeface on the top, metallic and and a skinny typeface on the bottom. Also kind of a typographic pond, but it's also using using a wide version and a condensed version, even overlapping. But you got the neutral sands. Nice, uh, greeting with three typefaces, a Sarah for Sands and a slab book cover. Mostly typographic because it's talking about original meetings and the Constitution. Eso You've got an old style historic typeface for original meanings. And then you've got that neutral sands all caps on the bottom or in the middle. Mhm. Something like this is interesting, because sometimes it takes one defining character to make it fun choice work. So it really in this one, um, the G in light is perfect for this because it leader looks like a fish moving. It looks like water. It looks like a tadpole eso. Sometimes when you're checking a typeface, you want to set it in the actual words you're setting to see if those characters work because it's not. If the whole ese work a dizzy works, it's what works specifically for that title. This is dated, but you know what? And regardless of what you think, the two typefaces were made to look one more masculine, one more feminine. Whether you're a feminist or you hate all that stuff, it's marketing. Okay, so it works whether you subscribe to the fact that women should be in pink, you know, represented by that color and whatever, but also the shapes of the typeface. Okay, so you have more geometric, more angular, which is a typical sort of representation of more a more masculine. Um, one thing that often works very well is when you use a what we call a type super family. Because it's a safe way to combine typefaces. Type super family usually has a sarafina Sands. Sometimes it has a slab and occasionally other versions. And they're safe ways to combine typefaces because they have the same skeletal structure, okay, with usually with matching cap and ex heights, making them pair well together and creating contrast without discord. So these were some examples competent Well, on the left has a text letter fact exquisite. Those four different versions. Legacy wonderful typeface has a sans serif a square, and it also has condensed Ah, Stone Saref has stone has Saref Sands informal humanist Humanist sands is a little different. They're a little more decorative uh, then there's James. Montalbano is try a lot. I mean, he's you've got everything you need here. It's It's crazy. You've got a regular, expanded condensed compressed. So these airways to combine typefaces again. I'm showing you this poster because he's using stone. Um, typeface for this this'll poster. This is fabulous. And this is all the same family. It's a it's a super family. Okay, that works really well, it's it's edgy. Contemporary. Okay, so what you need to know before we move on in order to, um, stay up to date on typefaces. Okay, Which is important is stay on top of the major font foundries and resellers, both large ones and independence. So a good way to do that is just to jump to the bottom point and subscribe to their e newsletters. If you can find out how to do that, because then you get these monthly emails that are fabulous there they show the new typefaces they show what's on sale. I mean, they really make typefaces look sexy. And they not just me that could think, type look sexy. Hopefully, you know, in its own way. Come on. You know, um, and check founding is another thing. A lot of websites have very cool information, and they will tell you what their best sellers are. Okay, I'm not saying you should jump on the bandwagon for best sellers, but what I'm saying is it's good to know what's trending, what's happening so you don't get stuck using dated things. And once you start looking at these things, you I will start to attuned to what's happening with type, and you wanna be edgy. A lot of times you don't want to do a piece that looks like it was done 20 years ago.