Lesson Info
12. Design Principles: Typography
Lessons
Class Introduction
09:43 2Why Design Matters
09:34 3Design vs. Aesthetic
09:46 4Impact of Design
11:01 5The Design Process: Understand Your Audience
10:07 6The Design Process: Understand Your Content
12:22 7Design Principle: Alignment, Grids, and Spacing
14:30 8Design Principles: Contrast
06:13Design Principles: Repetition
08:25 10Design Principle: Hierarchy & Proximity
13:44 11Principle Scale and Balance
03:54 12Design Principles: Typography
08:32 13Design Principles: White Space
05:22 14Design Principles: Color
08:48 15Design Principles: Graphics, Icons, and Photos
05:56 16Design Principles: Layouts and Focal Points
04:08 17Design Principles: Color-Blind Accessibility in Design
02:32 18Example: Resume Design
26:18 19Example: Social Media Post Design
14:20 20Example: Presentation Design
23:55 21Example: Charts and Spreadsheets Design
16:02 22Example: Email Signature Design
14:18Lesson Info
Design Principles: Typography
So now we want to look at some of the elements of visual design that can really help us achieve these principles of balance, color, et cetera. So we're going to move through these pretty quickly but we've got typography, whitespace, color, images & icons, and layouts. Let's jump right in with typography. So, typography I like to say is like a voice. It's like a personality. It can communicate so much on it's own and it can really trigger emotions for people. So let's just think in your mind or shout out what you think of when you think of these fonts. And I might jump in with some of my own. So, what do you get from this. It's kind of crazy, it's a little bit busy. Party. Party, fun. I think of The Lion King. The Lion King! That's interesting. What about this one? It's basic. Clear. It's clear. Boring. It's boring. Let's get started. It's like, if you had to say that ... That would be fun if I had to say these all in the tone. It's like, let's get started. This is k...
ind of cartoon-y, it's childish. Kindergarten. Kindergarten. It's like if you're in a little classroom with Ms. Jessie or whoever your kindergarten teacher was. Basic. Again, boring. This one, not as boring. It changed, I don't know if you noticed that. But some of the angles are different. Maybe this is a little more modern. So, fonts have a personality. But the thing is just because your computer comes with however many hundred fonts, doesn't mean you should use those fonts. The other day I was scrolling on Twitter and I saw a little either tweet or meme or something and a designer had tweeted and said, "by the time you are 35 years old, "as a designer or something, you should have amassed "fonts and only used five of them." And really, it's true. You shouldn't be using all these fonts. But I remember when I was starting out it was so cool to collect fonts and share fonts with my designer friends and I just wouldn't use them. I'm sure I used some of them earlier in my career but I would never use them any more. So just because they are available does not mean you should use them. So let's see the impact of fonts in action and typography in action. What does this business card say to you? This is a business card for a certified public accountant. If you saw this, any words jump out to you? Military. Military. I think jail. Jail. So if we were thinking of hiring Robert as our accountant and we saw this business card, those words, those thoughts, are coming into our mind. And that may be the impression ... Maybe we think Robert's like a cross-fit workout guy, I don't know, and he decided to use that font. But it's eliciting something. Whereas if we saw this business card for Robert, what is this saying to us? Establishment. Establishment. Professional. Mature, maybe. Classy. Classy. Not jail, which we don't want to put in the head of our potential customers for an accountant. But, I'm not exaggerating when I use examples like this because so many times people have sent me business cards and I just think to myself, who helped you make this? Or, why did you choose that font? Did you not think that that font is communicating something? So, hopefully out of this course you're realizing that everything is communicating something. It's not just the words on the page. It's not just the content. It's the manifestation of it through the fonts. Because we could hire Robert the criminal accountant, or we could hire Robert the professional, you know, schmoozy, cool accountant guy. I think I'd go with the right guy. But maybe if you like, I don't know, jail and crossfit, not that those are related, but, like, bold powerful things. So, fonts have a big impact here. It's more than what font you choose though, it's how you use the fonts, or how you lay them out. So I want to give you a couple of examples of how you can adjust your font, text, et cetera to make it more readable and scannable. And I know I sound like a broken record in every meeting I have with clients, probably even in this class, but I'm always thinking, how do I make this more readable and more scannable? And that means when you're looking at something, easily be able to get the gist of it without reading everything. Because today most people are not reading every word, especially if it's online. So I'm always striving to make things readable and scannable. So rule number one. Line height makes text a lot more readable. Over on the left, it's all the same amount of text, same exact words. But if you compare those two, the one of the left it's really tight line height. I think that's about a 1.0. If we look over on the right, that is probably a 1.2 or 1.5. Much, much easier to scan and read. Rule number two. Make paragraphs into chunks, a nice technical term. I'm always telling people, "we need to chunk that out more, "let's chunk it." And we know what that means in my little designer world and now you know if you want to make things readable and scannable, you have to chunk it out. So again, same exact text. And maybe grammar and creative writing people would disagree with this because maybe this is all about the same topic and it's weird to think that you would have a new paragraph after just two sentences, but this is how people are reading. And if we're writing a book, that's a different story. But chances are, you're doing something like an email or a tweet or a Facebook post or something in Keynote. So you want to chunk things out and don't worry that you're breaking up a paragraph because no one is grading this. So, rule number three. Break your text up with headers to make it more scannable. And what I like to do is make the assumption that ... You want someone, at a minimum, if only they read your headlines they have an inkling of what you were trying to communicate to them. So, make sure that you use headlines in order to, kind of, summarize or set up what each of these sections is about. Rule number four. Centering text. I don't know why people love to center text. It seems cute, I don't know where this came from. And it's fine to center text sometimes. But centering a lot of text is not good. Because the way that your eye reads, we read left to right, left to right. And there is this perfect line over here so your eye ... Think of a typewriter. It's this back and forth, back and forth. Over here, there is not that even line on the left because it's centered and it's harder to scan. When you center it, it's a lot easier to read. And you might not be seeing it yet, but you'll notice next time you're on a website or brochure, it's a lot easier to read when it's justified. Especially if it's large, large blocks on text. Also, lists. This is another one. So look at the difference. The one on the left, it's not terrible. But as soon as you align it, it's so much easier to understand and glance at. Imagine if it's a list of 20, it would feel so much better if it were all aligned and not centered. So don't fall for centering things.
Class Materials
Bonus Materials with Purchase
Free Bonus Material
Ratings and Reviews
Natalie Santana
I wish more people knew, appreciated, and respected the content Sarah covers in this course. Design is such a critical piece of the functionality of the tools we use every day but its often disregarded as "fluff" or just "aesthetic". Sarah does an outstanding job of establishing the importance and methodology of design for beginners. I would recommend this course to literally everyone.
Britt
Definitely recommend! This course is aimed towards people who don't make a living as a designer but are exposed to it in everyday life—even if they're unaware. Your resume? Design. Your social media posts? Design. Your spreadsheets? Yep, design. Sarah does an awesome job giving an overview about what design is and actionable things you can do to improve. The "live design" portion is awesome and it's where she re-designs/improves documents, mostly on the fly. She goes through her thought process so viewers can learn to think like a visual designer. I would definitely enroll in another class, especially if she chose to focus more in-depth on a few design principles for the entire class.
Jorge Martinez
Awesome Class! highly recommend.