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 do you the designer must capture your viewer's attention quickly and keep it and 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 going toe have certain things in bold face and say, this is a headline, this is a sub that 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 first, second, third, etc cetera. This is critical. I have seen beautifully designed...

pieces by experience 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? What do you see first? If you can't do it, have somebody else come into the room in 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 a 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 at 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 you're sending it all caps or upper lower case 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 right 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 that even though I think they're using dumb quotes and we'll talk about that later um you see you're being not manipulated but 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 playing around 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 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 he still predetermined and important. Okay, um, complicated piece marty blake is a master of combining typefaces and hierarchy and she created this 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 ah this is something I worked on quite a while ago that required a tremendous amount of attention to hierarchy to typographic hierarchy because there were so many elements here not just ah and as you know not just the title but as you see I used wait style caps small caps it's hard to see on the bottom I used of scholars sands which had a seraphim the sands version's 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 years 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 to 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 eye wants to get to that ratter so you go from the top to the bottom so it's sort of a really really smart design element okay, so um really important aspect that we're going to go through that everybody uh has challenges with and that's how to mix or combined typefaces ok, 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 combine 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 other's 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 ludes so you're not going to put a western font and an art deco art nouveau font on the same piece okay? They're definitely going to clash some good combinations and this this is your your guide guide kind of starts combining attacks typeface with display in a text and a display you usage 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 combined 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 start a story with more safer combinations. So it's combining serif with sands is a trident to approach. Ah, they tend to have strong enough designed 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 typeface could also be the same time face the same type family. Okay, so combining light with heavy is a good technique. Just make sure there's a strong enough weight conscious. 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, 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 of a typeface uses personality or individuality. It should only be combined with a very neutral typeface, and you will see many examples in the world, and then I'm going to show you that combine 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 center, 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 a 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 sign ege look at menus, look at books, look at magazine covers, look att logo's posters and websites and then you'll be on the 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 as 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 smart phones take pictures is you know or tear pages I mean if you go to the dentist's office you know you should check with him first but I can't 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 said why don't I take or I take a photograph of the page and taken I've never been told no okay so there are no short cuts to learning how to mix typefaces it takes time and patience a script and a slab different sizes different colors I'm going to 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 words sick you know I tell you it's hard for me to not talk and look at these things I have to just keep I just had to keep my word and just keep going some of these air from the web so the resolution might not be as good you know sometimes I see things on tv commercials and I just freeze it I take a picture 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 always not only the owner would revolt but also change 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 the skinny on the bottom a tall skinny so it's with you know a wider typeface on the top metallic and and a skinny type face on the bottom it's also kind of a typographic pond but it's also yuning using a wide version and a condensed version even overlapping but you got the neutral sands nice greeting with three typefaces a sarah for sands on a slab but cover mostly typographic because it's talking about original meetings and the constitution um so 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 something like this is interesting because sometimes it takes one defining character to make its font choice work so it really in this one the g in light oh 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 were a dizzy works it's what? Work 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 where the year 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 pinky and 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 moore's a more masculine slabs are very popular again combined with sands same story here I mean, I didn't intentionally look for it these these all caps sands it's just that when I see good combinations that's often what happens? Okay, so here's a uh this is either rescript or a hand written it's either a script fonder hand written doesn't matter good it works really well with the other type even in neon still requires understanding how to combine typefaces. Some of these images are from heh floren company's web sites such as this and a couple of the others where they're actually using their fonts and showing how to combine them so here you've got three now you're going to a little complicated. You see where scripts khun b used here, your simpler type face is the sort of the heading and then ah, sort of more decorative faces the text following it type inter plays with the image it's about the circus so if I looked at it long enough you probably realized that the the orange and white could either look like a spotlight might look like a curtain so there's a lot of very clever ways to design with type without image. This was just assigned inch I saw in the city I thought it had a good and these aerial sands but they all look good to end a script and this isn't even this is just the board, you know, a cafe bored and I thought they brilliantly combined styles of um the chalk this was actually a student in a class for student assignment, but he got it. He figured it out. This is actually a small business card so it's not that big but he's using three different typefaces but the abc is more decorate is more decorative than information another piece by marty blake who you saw that little invitation again lots of different typefaces here but she knows brilliantly howto arrange them for good typographic hierarchy marketing pieces on the web ventured stuff you can have fun with that and combined lots of typefaces little bit different but works well the hierarchy is x oh, in here without that little yellow line on the top it would be boring sort of like the radish in the other poster lots of typefaces here works lots of typefaces here in this old table of contents of upper and lower case most of the typefaces or jew who would think a table of contents could look like this sometimes you just have to think out of the box. Okay one last thing about mixing typeface is 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 sight type super family usually has a seraphim the 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 are some examples competent? Well, the left has a text letter fact exquisite those four different versions legacy wonderful typeface has a sands sarah if a square and it also has condensed stone saref has stone has sarah sand's, informal and humanist. Humana sans is a little different. They're a little more decorative on then. There's. James montalbano is trial on I mean, he's, you've got everything you need here. 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 typeface for this this, uh, this poster this is fabulous. And this is all the same family. It's 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 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 too don't 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 not just me. That could think type look sexy, hopefully you 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 they're 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 data thing. And once you start looking at these things, you I will start to attuned to what's happening with type, and you want to be edgy. A lot of times, you don't want to do a piece that looks like it was done twenty years ago.