Typography Basics

[00:00:01]
>> Sarah Drasner: Typography, awesome. Typography is one of my favorite sections, because it's just like actually got more rules that you can follow and make good things. [LAUGH] Karl is like, I don't know, sometimes it works and sometimes you'll break it. [LAUGH] Typography is a little bit stronger. And also typography is one of those things where people are into typography.

[00:00:26]
There are many conferences about typography. And if you go and find typography people on Twitter, they have like 100 million followers, people are super into typography. So, I'll show you some resources for people to follow and stuff but their's tons of them. Why is typography important. I don't know if you guys heard about this scandal, but remember when they said that moonlighting was, there was like a best picture award, and they got the wrong card.

[00:01:00]
And the card that they got they said La La Land instead of Moonlighting. Well, the reason why they didn't know was because that card was actually written like this. So if you're given this card, you might be confused because you'd say, Emma Stone's on here. But it does say La La Land, it just is big, so you might look at it and say La La Land which they did do.

[00:01:22]
At first they're like, this can't be right, never mind, La La Land. Whereas if it was written like this instead, if they changed the typography and the balance of the typography, it would have been super clear, I've got the best actress card, not the best picture card, right?

[00:01:38]
Because the Oscars is real big, who cares, you know you're at the Oscars. [LAUGH] No offense, Oscars, but Best Actress is a little bit more prominent. It's very clear that we're talking about Emma Stone and that the picture that she was in was La La Land instead. So these kinds of typographical balances are really important for meaning.

[00:02:01]
It's important for hierarchy. It's important for conveying things, especially because a lot of people are coming to websites to understand things, so that's a really big thing. This is very basic, probably a lot of you know this, but the difference between Serif and Sans-serif is, this is a Sans-serif font, it doesn't have all of these little curlicues.

[00:02:23]
And then the Serif fonts have these kind of edges at the end of them. So that's the difference between Sans and Serif.
>> Sarah Drasner: Slab Serif is kind of like Serif where it has these little edges, but instead of them being these smooth lines and curves, you have them looking a little more like slabs, like a little bit more chunky for each one of those pieces that are coming off of there.

[00:02:49]
>> Sarah Drasner: So we've got Serif fonts, Sans-serif font. These are called script fonts. Handwritten is pretty self-explanatory. Display is a little confusing cuz it can be Sans and can be Serif. But it tends to be a font that would be pretty illegible if it was made small, but really good looking when it's used on display.

[00:03:13]
Like when it's used as an h1, it tends to really liven up the place. [LAUGH] But if you used it for body copy, it would probably have too much going on. Novelty fonts are like Halloween fonts. Any font with a heart instead of a dot for an i.

[00:03:30]
[LAUGH] That kind of thing, that would be a novelty font.