1 00:00:00,650 --> 00:00:01,000 All right. 2 00:00:01,020 --> 00:00:05,190 The next topic I want to talk about is typography. 3 00:00:05,190 --> 00:00:07,670 Now, I know a lot of students always say to me 4 00:00:07,710 --> 00:00:10,460 "But why do I need to learn about typography? 5 00:00:10,470 --> 00:00:14,020 I just open up Word, click the dropdown, 6 00:00:14,070 --> 00:00:15,450 find Times New Roman, 7 00:00:15,450 --> 00:00:16,850 my favorite font. 8 00:00:17,070 --> 00:00:20,770 And then just put that on everything. It's done right?" 9 00:00:21,480 --> 00:00:24,350 Well let's think about this. 10 00:00:24,400 --> 00:00:30,030 Well let's say it's Valentine's Day and you decide that you want to write a letter to your beloved Valentine 11 00:00:30,420 --> 00:00:34,150 and you change the font to something cursive like this. 12 00:00:34,290 --> 00:00:35,490 "You'll always be mine." 13 00:00:35,490 --> 00:00:37,530 I don't know if she or he will be 14 00:00:37,610 --> 00:00:40,070 but you have a good chance. 15 00:00:40,210 --> 00:00:43,350 Now let's say that you chose the wrong font. 16 00:00:43,380 --> 00:00:45,730 That's a bit of a problem. 17 00:00:45,780 --> 00:00:51,040 Not only do I not think your Valentine is going to take very kindly to this, 18 00:00:51,120 --> 00:00:55,230 you might also have the police on your back which is a bit of a problem. 19 00:00:55,650 --> 00:01:03,780 So fonts really do matter and it's important to consider not only their mood but also how to combine 20 00:01:03,780 --> 00:01:04,910 different fonts. 21 00:01:04,989 --> 00:01:12,180 And it's a really really easy way to make your designs look very professional and really slick. Out of 22 00:01:12,210 --> 00:01:14,520 all of the fonts in the world 23 00:01:14,530 --> 00:01:19,020 there's pretty much two large families that you should really know about. 24 00:01:19,020 --> 00:01:26,700 One is the Serif family where they have these little feet at the end of their central beams. 25 00:01:26,700 --> 00:01:34,380 And the reason why they have these old feet is because the Serif typeface were inspired by the marble 26 00:01:34,380 --> 00:01:37,350 carvings of days of yore. 27 00:01:37,350 --> 00:01:44,190 So if you next go out and you take a look at the buildings around you especially if you're in a historical 28 00:01:44,190 --> 00:01:51,810 area, take a look at places where they've carved into stone or marble and you'll notice that they also 29 00:01:51,810 --> 00:01:55,560 have these little feet at the end of the central beams. 30 00:01:55,560 --> 00:01:57,100 So why is that? 31 00:01:57,120 --> 00:02:03,540 I don't know how many of you carved marble in your spare time but if you did you would know that once 32 00:02:03,540 --> 00:02:12,210 you chisel has gone into the Rock and you need to exit your engraving it's actually not possible to 33 00:02:12,210 --> 00:02:15,540 create 90 degree angles when you're carving into rock. 34 00:02:16,260 --> 00:02:21,310 So this is where the Serif typeface gets their inspiration from. 35 00:02:21,420 --> 00:02:27,780 And this is also the reason why when you're choosing a Serif typeface you're making your design look 36 00:02:27,780 --> 00:02:34,320 more serious, more authoritative and also a little bit older as well. 37 00:02:34,320 --> 00:02:41,550 So it's really good if you're designing something like a letterhead for a legal company or a magazine 38 00:02:41,550 --> 00:02:43,590 for architectural design. 39 00:02:43,830 --> 00:02:48,520 But when we take a look at the big family of Serif typefaces 40 00:02:48,600 --> 00:02:55,710 they're actually further subdivided into smaller sub families like Old style, Transitional, Modern and 41 00:02:55,710 --> 00:02:57,310 Slab-Serif. 42 00:02:57,330 --> 00:03:05,820 Now the really interesting thing is you can actually tell how old a typeface would look by looking at 43 00:03:05,910 --> 00:03:11,370 the difference between the thickest and the thinnest parts of each letter. 44 00:03:11,370 --> 00:03:15,050 So compare the Old Style 'o' versus the Transitional 45 00:03:15,060 --> 00:03:16,720 'o' versus the modern 46 00:03:16,780 --> 00:03:23,070 'o'. And look at how that difference between the thickest part of the letter and the thinnest part gets 47 00:03:23,070 --> 00:03:28,650 more and more exaggerated as you get towards a more modern font. 48 00:03:28,830 --> 00:03:34,920 So if you want something that looks authoritative but modern then maybe you want to go for a modern 49 00:03:35,010 --> 00:03:43,980 Serif typeface like Didot. But if you want it to come across as a little bit older, a little bit more aged 50 00:03:44,610 --> 00:03:49,890 maybe you have a winery, maybe you want to go for an Old Style Serif instead. 51 00:03:49,890 --> 00:03:57,270 Now just as different colors have different moods and emotions, different fonts also have different moods 52 00:03:57,630 --> 00:04:02,850 and they also convey a different message to a user depending on which one you choose. 53 00:04:02,850 --> 00:04:09,800 So the Serif family generally come across as traditional, stable, respectable, authoritative. 54 00:04:09,810 --> 00:04:15,490 These are the words that get thrown around by designers when they're thinking about the Serif typeface. 55 00:04:15,510 --> 00:04:20,370 So for example, the next time you go to a magazine rack pick up the Vogue magazine. 56 00:04:20,430 --> 00:04:26,480 Take a look at their title and see how it's a modern Serif typeface. 57 00:04:26,520 --> 00:04:33,000 It's got hugely exaggerated difference between the thick and thin parts of the lettering and it looks 58 00:04:33,090 --> 00:04:36,950 authoritative and it knows what it is talking about. 59 00:04:37,170 --> 00:04:43,230 Now on the other hand, if we think about the San-Serifs, they're kind of a different family because instead 60 00:04:43,230 --> 00:04:49,290 of having the Serifs or the little feet at the end the central beams, they have perfect right angles. 61 00:04:49,290 --> 00:04:56,100 And it's this right angle that makes the San-Serif family look so much more friendly, more approachable, 62 00:04:56,490 --> 00:04:59,120 more novel and more contemporary. 63 00:04:59,610 --> 00:05:06,120 So for example, you will tend to get words like sensible, simple, straightforward. And this is why a lot 64 00:05:06,120 --> 00:05:11,390 of startups love using the San-Serif typeface in their websites. 65 00:05:11,490 --> 00:05:18,330 For example, a Humanist typeface which is a subfamily of the San-Serifs. It's something that is known 66 00:05:18,390 --> 00:05:25,740 as a highly readable typeface. And in fact, even within the Serifs and the San-Serifs, you will tend to 67 00:05:25,740 --> 00:05:32,340 see designers going for the San-Serifs if they want to write body text which needs to be more legible 68 00:05:32,370 --> 00:05:34,920 and more readable. 69 00:05:34,920 --> 00:05:42,300 Now within this sub family, there's even differences in terms of legibility and readability. 70 00:05:42,420 --> 00:05:49,910 So how easy are the words to read and how pleasant is it to read the letters. 71 00:05:49,920 --> 00:05:56,760 There was a really interesting study done by MIT a few years back where they took two groups of users, 72 00:05:57,300 --> 00:06:05,190 one they put them into a car which had a dashboard made of a Humanist typeface and the other car had 73 00:06:05,190 --> 00:06:13,920 a dashboard which had a Grotesque San-Serif typeface. And what they did is they tracked the pupils of 74 00:06:13,920 --> 00:06:21,120 the people who were driving the cars and they tested how long each driver needed to look down at the 75 00:06:21,120 --> 00:06:27,840 dashboard before they got enough information from the speedometer or the odometer and before they could 76 00:06:27,930 --> 00:06:35,160 come back and look at the road again. And really surprisingly they found that just by changing the font 77 00:06:36,000 --> 00:06:42,330 from a Grotesque San-Serif to a Humanist San-Serif, they could save the drivers somewhere around 78 00:06:42,330 --> 00:06:48,370 30 to 40 percent of the time that's required to understand the information. 79 00:06:48,420 --> 00:06:54,690 So imagine that car is on a freeway that's driving at 60 miles, 100 miles an hour. 80 00:06:54,750 --> 00:07:00,750 That difference in the amount of time the user needs to look down at the dashboard could be the difference 81 00:07:00,750 --> 00:07:02,670 between life and death. 82 00:07:02,700 --> 00:07:07,580 And as designers, we rarely get to make that kind of difference in the world right? 83 00:07:07,650 --> 00:07:13,600 So knowing that the Humanist typeface, all of the fonts that belong in that category like Gill Sans, 84 00:07:13,680 --> 00:07:21,620 Tahoma, Verdana, these are highly readable and highly legible fonts which you can use in the body types 85 00:07:21,630 --> 00:07:23,220 for example of your sales pitch. 86 00:07:23,760 --> 00:07:27,740 Now, even though we're not saving lives with our sales pitches, 87 00:07:27,900 --> 00:07:32,610 if you manage to get the user to read through more of your sales copy then they're probably going to 88 00:07:32,610 --> 00:07:36,120 be more convinced and more likely to buy your product 89 00:07:36,120 --> 00:07:36,420 right? 90 00:07:36,960 --> 00:07:42,990 So readability and legibility when you're choosing fonts is incredibly important. And the things that 91 00:07:42,990 --> 00:07:49,260 you're looking for in the letters when you're looking for legibility are open shapes and a lot of space 92 00:07:49,290 --> 00:07:54,690 between each of the letters and also the forms look unambiguous so they look different 93 00:07:54,690 --> 00:08:00,940 for example here the 'g' and the 9 actually look different on the second line. And finally, varying proportions. 94 00:08:00,960 --> 00:08:06,540 So having an 'O' that's very wide and a '0' that's a bit more narrow so you can actually tell the difference 95 00:08:06,540 --> 00:08:08,340 between the two. 96 00:08:08,430 --> 00:08:15,990 Now while we've talked about using fonts it's often that you see people go a bit overboard where they 97 00:08:15,990 --> 00:08:22,920 choose 10 fonts in the same design. And that makes your design look very cluttered and very unprofessional. 98 00:08:22,980 --> 00:08:26,910 I recommend actually sticking to just two fonts in one design. 99 00:08:26,910 --> 00:08:32,580 So if you're making a poster keeping that to two fonts. If you're making a section of your website keeping 100 00:08:32,580 --> 00:08:36,559 then again to two fonts. It just looks a lot cleaner and a lot tighter. 101 00:08:37,110 --> 00:08:44,190 And when you're combining these two different fonts you want to try to go for similar moods. So find 102 00:08:44,190 --> 00:08:48,990 fonts that have a similar mood to each other and also a similar time era. 103 00:08:48,990 --> 00:08:53,610 You don't want something that looks ultramodern with something that looks like it's from the days of 104 00:08:53,610 --> 00:08:56,780 yore combined together. It looks a little bit weird. 105 00:08:56,890 --> 00:08:59,730 Now the things you want to contrast are the serifness. 106 00:08:59,730 --> 00:09:05,190 So for example you on the heading to be a Serif and the body to be a San-Serif or the opposite way 107 00:09:05,190 --> 00:09:08,030 round. It just creates more interest in your design. 108 00:09:08,640 --> 00:09:14,010 And similarly, you can also create interest by just changing up the weights between the heading and the 109 00:09:14,010 --> 00:09:21,150 body. So making the heading really really bold or even using a black typeface and making the body text 110 00:09:21,240 --> 00:09:27,660 using something like thin or regular or light. These different weights can create contrast in your design. 111 00:09:29,270 --> 00:09:34,850 Now if you don't remember anything from this talk on typefaces, I just want you to look at these six 112 00:09:34,850 --> 00:09:42,050 fonts and try to wipe them from your memory because it is very very difficult to make these designs 113 00:09:42,050 --> 00:09:46,830 look good unless I guess if you're running a lemonade stand. 114 00:09:47,090 --> 00:09:52,940 But if you want to look professional, if you want to look designs, try to use one of the other fonts that 115 00:09:52,940 --> 00:09:58,190 we've talked about and try to ignore these ones which are difficult to read and have moods that are 116 00:09:58,190 --> 00:10:00,830 difficult to fit in in a professional setting. 117 00:10:00,830 --> 00:10:05,780 The next time you're designing a website think about what typefaces you're going to choose. 118 00:10:05,780 --> 00:10:11,750 Think about what you're trying to convey with those typefaces and then pick a font from the San-Serif 119 00:10:11,840 --> 00:10:14,660 or the Serif family and maybe try to combine them 120 00:10:14,660 --> 00:10:20,000 so you have a heading that's a San-Serif and a body that's a Serif and try to create contrast in your 121 00:10:20,000 --> 00:10:21,310 designs. 122 00:10:21,350 --> 00:10:28,310 So keep this in mind and hopefully they'll make your designs a lot more interesting and a lot more professional.