Typography Fundamentals

Lesson 5 of 13

Type Hierarchy

 

Typography Fundamentals

Lesson 5 of 13

Type Hierarchy

 

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.

Class Description

AFTER THIS CLASS YOU’LL BE ABLE TO:

  • Select the best typefaces for your design
  • Work efficiently with OpenType
  • Think and approach projects like a type designer
  • Identify and remedy common type crimes

ABOUT ILENE’S CLASS:

Typography is an essential element of design: it should communicate your message effectively, and with purpose. Yet, even professional graphic designers can lack the “eye” and deeper understanding of type aesthetics.

In Typography Fundamentals, author, educator, and expert Ilene Strizver teaches you how to take full advantage of the power of type. You’ll learn not only the fundamentals of typographic design, but also how to “see” type through new eyes - all to make more sophisticated type choices that will open doors and set your work apart.

With your enrollment in Ilene’s class, you’ll also receive access to a webinar hosted by renowned designer Gerard Huerta.

Check out Ilene’s related course, Advanced Typography: Fine Tuning & Finessing.

WHO THIS CLASS IS FOR:

This class is designed for creative professionals of all levels working with type, whether you are brand new, or just want to build on your existing knowledge and fill in the gaps. In-house design teams, web developers, motion graphic designers, recent graduates, freelancers and illustrators working with type: don’t miss your chance to learn from one of the most respected educators in the field.

ABOUT YOUR INSTRUCTOR:

Ilene Strizver, founder of The Type Studio is a noted typographic educator, consultant, designer and writer. She specializes in all aspect of visual communication, from the aesthetic to the technical. Ilene has written and lectured extensively on type and typographic design to both students and professionals in the field. Ilene formerly was the Director of Typeface Development for International Typeface Corporation (ITC) where she developed more than 300 text and display typefaces with such respected and world-renowned type designers as Sumner Stone, Erik Spiekermann, Jill Bell, Jim Parkinson, Tim Donaldson, and the late Phill Grimshaw. She “cut her typographic teeth” by working on Upper and Lowercase (U&lc) and other type projects with such legendary icons as Ed Benguiat, Aaron Burns and Herb Lubalin. Her clients include Monotype Imaging Corporation, International Typeface Corporation (ITC), Adobe, Linotype, Time Inc., Whole Foods, Harlequin Books, Somerset Entertainment, Integrated Marketing, Parents Magazine, MeadWestvaco, Nationwide Insurance, Life is good, and Johnson & Johnson. Ilene authors the popular column TypeTalk for creativepro.com, as well as fy(t)i For Your Typographic Information and the Fontology series for fonts.com. Her book, Type Rules! The designer’s guide to professional typography, 4th edition has received numerous accolades from the type and design community. She publishes the popular FREE enewsletter, All Things Typographic, and conducts her widely acclaimed Gourmet Typography workshops internationally. Ilene is an adjunct instructor at School of Visual Arts in NYC. Connect with Ilene online: thetypestudio.com | Book: Type Rules! The Designer’s Guide to Professional Typography | Facebook | Twitter

Lessons

  1. Bonus Video with Purchase: 'Custom Letterforms - Gerard Huerta'

    Join designer Gerard Huerta in a deep dive into his vast portfolio spanning decades of clients including Johnson & Johnson, Architectural Digest, IBM, Men’s Journal, Wired Magazine, Google Wallet, and Swiss Army. Gerard walks us through his graphic design process of logos, brand identities, magazine covers, movie posters, album covers, and concept projects, demonstrating typography at its purest: Gerard draws his own lettering rather than manipulate existing typefaces.

  2. Beginning of Typography

    How have graphic designers’ roles changed with the advent of digital technology? How can typographic design skills benefit you? Ilene introduces you to the power of typography and the skills you will learn in this course - whether you are a student, professional, making a career change, or strengthening your portfolio.

  3. Selecting the Right Type for the Job

    Type has the power to make or break a job - so how do you approach selecting the best typeface? What questions should you ask yourself and of a client? Whether you are working with the body text of an annual report, a book cover, or a travel brochure, Ilene breaks down the process of font exploration and key factors to consider when selecting the right type.

  4. Text vs. Display

    When considering typefaces for a business card or storefront, font-size is not the only factor. Typefaces are meticulously designed with specific uses in mind; all have personalities, and font exploration goes far beyond sans serif vs. serif. Ilene dives into the differences between text and display fonts, the differences between a typeface and a font, and when to consider hand-lettering rather than digital fonts.

  5. Type Hierarchy

    A wall of text can overwhelm your audience. How do you create type hierarchy to organize information in your design? You can rely on a font-family as a guide, but you shouldn’t be limited to presets - Ilene shares invaluable guidelines and tips on how to train your eye to see good combinations. She also shares resources on how to stay up-to-date with typeface design and new typefaces.

  6. OpenType Demystified

    OpenType - the brainchild and font developed by Adobe and Microsoft - why should you be familiar with it? Ilene demonstrates OpenType’s advantages and takes you into InDesign to see how to access extended character sets, different numeral styles, ligatures, and stylistic sets.

  7. Taking the Plunge with Type

    Ilene brings you deeper into the world of possibilities OpenType offers, demonstrating the power of glyph substitution. You will see the “intelligence” of OpenType fonts in action, automatically adjusting letter-spacing and x-height depending on the context within a word.

  8. Think Like a Type Designer

    Print out your typeface templates from the course materials for the next three lessons, as Ilene leads you in a fascinating activity and analysis of letter forms. You’ll participate in an activity as type designers do, breaking down the individual letter and intuiting what optically looks “right”.

  9. Breaking Down Typeface: Bodoni

    What are the characteristics and challenges of individual lowercase letters? Ilene continues to train you to develop your eye for typographic design in this study of the high contrast Bodoni typeface, encouraging you to go against your instincts and trust what optically looks right, rather than mechanical correctness.

  10. Breaking Down Typeface: Bodega Serif

    How does asymmetry solve typeface design challenges? In this last exercise, Ilene wraps up a geometric study of individual character needs, and how to design with them in mind. Fine-tune your typographic eye in lesson, and learn the secret to testing new typefaces.

  11. Are You a Type Criminal?

    Buckle up. In the last three lessons, Ilene teaches you the eleven most common type crimes, the history behind them, and how to fix them. Whether you are manuscript writing, proofreading, or designing, this is essential knowledge. In this lesson, you’ll learn how to quickly correct word spacing and the difference between “smart” and “dumb” quotes.

  12. Typography Misdemeanors - Part 1

    What’s the difference between a hyphen, en dash, and em dash? What’s wrong with all-caps? What are the challenges of swashes on capital letters? When is it appropriate to justify your type? Ilene resolves these questions and shows you how to correct more type “crimes”.

  13. Typography Misdemeanors - Part 2

    Ilene cautions against the last type crimes regarding improper type sizes, letter-spaced lowercase, and inappropriate styling.

Reviews

a Creativelive Student
 

Ilene's courses on Typography are jam-packed with excellent information that will elevate the quality of your work in print. She knows what's current, but also what's important in long-time standards, and why. Just an incredible amount of information! you will enjoy watching, but you will want to purchase because of the sheer amount of useful content.

a Creativelive Student
 

This course is packed full of the answers to questions I've had at the back of my mind for a long time. Ilene teaches with great clarity, her material is well organised, and she teaches at a good pace - with a bit of humor to lighten it up. I found it really useful.

shiran
 

This course taught me very well about Typography. I knew almost nothing before taking it (I barely understood then the difference between Serif and Sans-Serif...). And now, I feel that I really understand a lot. It is a very good starter to learn when, how and why to use type. Plus, Ilene is a great teacher with a big sense of humor and a lot of experience in Typography. A must have for everyone who want to understand something about types and fonts.