Original subtitles

0 All right. 1

The next topic I want to talk about is typography. 2

Now, I know a lot of students always say to me 3

"But why do I need to learn about typography? 4

I just open up Word, click the dropdown, 5

find Times New Roman, 6

my favorite font. 7

And then just put that on everything. It's done right?" 8

Well let's think about this. 9

Well let's say it's Valentine's Day and you decide that you want to write a letter to your beloved Valentine 10

and you change the font to something cursive like this. 11

"You'll always be mine." 12

I don't know if she or he will be 13

but you have a good chance. 14

Now let's say that you chose the wrong font. 15

That's a bit of a problem. 16

Not only do I not think your Valentine is going to take very kindly to this, 17

you might also have the police on your back which is a bit of a problem. 18

So fonts really do matter and it's important to consider not only their mood but also how to combine 19

different fonts. 20

And it's a really really easy way to make your designs look very professional and really slick. Out of 21

all of the fonts in the world 22

there's pretty much two large families that you should really know about. 23

One is the Serif family where they have these little feet at the end of their central beams. 24

And the reason why they have these old feet is because the Serif typeface were inspired by the marble 25

carvings of days of yore. 26

So if you next go out and you take a look at the buildings around you especially if you're in a historical 27

area, take a look at places where they've carved into stone or marble and you'll notice that they also 28

have these little feet at the end of the central beams. 29

So why is that? 30

I don't know how many of you carved marble in your spare time but if you did you would know that once 31

you chisel has gone into the Rock and you need to exit your engraving it's actually not possible to 32

create 90 degree angles when you're carving into rock. 33

So this is where the Serif typeface gets their inspiration from. 34

And this is also the reason why when you're choosing a Serif typeface you're making your design look 35

more serious, more authoritative and also a little bit older as well. 36

So it's really good if you're designing something like a letterhead for a legal company or a magazine 37

for architectural design. 38

But when we take a look at the big family of Serif typefaces 39

they're actually further subdivided into smaller sub families like Old style, Transitional, Modern and 40

Slab-Serif. 41

Now the really interesting thing is you can actually tell how old a typeface would look by looking at 42

the difference between the thickest and the thinnest parts of each letter. 43

So compare the Old Style 'o' versus the Transitional 44

'o' versus the modern 45

'o'. And look at how that difference between the thickest part of the letter and the thinnest part gets 46

more and more exaggerated as you get towards a more modern font. 47

So if you want something that looks authoritative but modern then maybe you want to go for a modern 48

Serif typeface like Didot. But if you want it to come across as a little bit older, a little bit more aged 49

maybe you have a winery, maybe you want to go for an Old Style Serif instead. 50

Now just as different colors have different moods and emotions, different fonts also have different moods 51

and they also convey a different message to a user depending on which one you choose. 52

So the Serif family generally come across as traditional, stable, respectable, authoritative. 53

These are the words that get thrown around by designers when they're thinking about the Serif typeface. 54

So for example, the next time you go to a magazine rack pick up the Vogue magazine. 55

Take a look at their title and see how it's a modern Serif typeface. 56

It's got hugely exaggerated difference between the thick and thin parts of the lettering and it looks 57

authoritative and it knows what it is talking about. 58

Now on the other hand, if we think about the San-Serifs, they're kind of a different family because instead 59

of having the Serifs or the little feet at the end the central beams, they have perfect right angles. 60

And it's this right angle that makes the San-Serif family look so much more friendly, more approachable, 61

more novel and more contemporary. 62

So for example, you will tend to get words like sensible, simple, straightforward. And this is why a lot 63

of startups love using the San-Serif typeface in their websites. 64

For example, a Humanist typeface which is a subfamily of the San-Serifs. It's something that is known 65

as a highly readable typeface. And in fact, even within the Serifs and the San-Serifs, you will tend to 66

see designers going for the San-Serifs if they want to write body text which needs to be more legible 67

and more readable. 68

Now within this sub family, there's even differences in terms of legibility and readability. 69

So how easy are the words to read and how pleasant is it to read the letters. 70

There was a really interesting study done by MIT a few years back where they took two groups of users, 71

one they put them into a car which had a dashboard made of a Humanist typeface and the other car had 72

a dashboard which had a Grotesque San-Serif typeface. And what they did is they tracked the pupils of 73

the people who were driving the cars and they tested how long each driver needed to look down at the 74

dashboard before they got enough information from the speedometer or the odometer and before they could 75

come back and look at the road again. And really surprisingly they found that just by changing the font 76

from a Grotesque San-Serif to a Humanist San-Serif, they could save the drivers somewhere around 77

30 to 40 percent of the time that's required to understand the information. 78

So imagine that car is on a freeway that's driving at 60 miles, 100 miles an hour. 79

That difference in the amount of time the user needs to look down at the dashboard could be the difference 80

between life and death. 81

And as designers, we rarely get to make that kind of difference in the world right? 82

So knowing that the Humanist typeface, all of the fonts that belong in that category like Gill Sans, 83

Tahoma, Verdana, these are highly readable and highly legible fonts which you can use in the body types 84

for example of your sales pitch. 85

Now, even though we're not saving lives with our sales pitches, 86

if you manage to get the user to read through more of your sales copy then they're probably going to 87

be more convinced and more likely to buy your product 88

right? 89

So readability and legibility when you're choosing fonts is incredibly important. And the things that 90

you're looking for in the letters when you're looking for legibility are open shapes and a lot of space 91

between each of the letters and also the forms look unambiguous so they look different 92

for example here the 'g' and the 9 actually look different on the second line. And finally, varying proportions. 93

So having an 'O' that's very wide and a '0' that's a bit more narrow so you can actually tell the difference 94

between the two. 95

Now while we've talked about using fonts it's often that you see people go a bit overboard where they 96

choose 10 fonts in the same design. And that makes your design look very cluttered and very unprofessional. 97

I recommend actually sticking to just two fonts in one design. 98

So if you're making a poster keeping that to two fonts. If you're making a section of your website keeping 99

then again to two fonts. It just looks a lot cleaner and a lot tighter. 100

And when you're combining these two different fonts you want to try to go for similar moods. So find 101

fonts that have a similar mood to each other and also a similar time era. 102

You don't want something that looks ultramodern with something that looks like it's from the days of 103

yore combined together. It looks a little bit weird. 104

Now the things you want to contrast are the serifness. 105

So for example you on the heading to be a Serif and the body to be a San-Serif or the opposite way 106

round. It just creates more interest in your design. 107

And similarly, you can also create interest by just changing up the weights between the heading and the 108

body. So making the heading really really bold or even using a black typeface and making the body text 109

using something like thin or regular or light. These different weights can create contrast in your design. 110

Now if you don't remember anything from this talk on typefaces, I just want you to look at these six 111

fonts and try to wipe them from your memory because it is very very difficult to make these designs 112

look good unless I guess if you're running a lemonade stand. 113

But if you want to look professional, if you want to look designs, try to use one of the other fonts that 114

we've talked about and try to ignore these ones which are difficult to read and have moods that are 115

difficult to fit in in a professional setting. 116

The next time you're designing a website think about what typefaces you're going to choose. 117

Think about what you're trying to convey with those typefaces and then pick a font from the San-Serif 118

or the Serif family and maybe try to combine them 119

so you have a heading that's a San-Serif and a body that's a Serif and try to create contrast in your 120

designs. 121

So keep this in mind and hopefully they'll make your designs a lot more interesting and a lot more professional.