WEBVTT 0 00:00.650 --> 00:01.000 All right. 1 00:01.020 --> 00:05.190 The next topic I want to talk about is typography. 2 00:05.190 --> 00:07.670 Now, I know a lot of students always say to me, 3 00:07.710 --> 00:10.460 "But why do I need to learn about typography? 4 00:10.470 --> 00:14.020 I just open up Word, click the dropdown, 5 00:14.070 --> 00:15.450 find Times New Roman, 6 00:15.450 --> 00:16.850 my favorite font, 7 00:17.070 --> 00:20.770 and then just put that on everything. It's done, right?" 8 00:21.480 --> 00:24.350 Well let's think about this. 9 00:24.400 --> 00:30.030 Now, let's say it's Valentine's Day and you decide that you want to write a letter to your beloved Valentine 10 00:30.420 --> 00:34.150 and you change the font to something cursive like this. 11 00:34.290 --> 00:35.490 "You'll always be mine." 12 00:35.490 --> 00:37.530 I don't know if she or he will be 13 00:37.610 --> 00:40.070 but you have a good chance. 14 00:40.210 --> 00:43.350 Now let's say that you chose the wrong font. 15 00:43.380 --> 00:45.730 That's a bit of a problem. 16 00:45.780 --> 00:51.040 Not only do I not think your Valentine is going to take very kindly to this, 17 00:51.120 --> 00:55.230 you might also have the police on your back which is a bit of a problem. 18 00:55.650 --> 01:03.780 So fonts really do matter and it's important to consider not only their mood but also how to combine 19 01:03.780 --> 01:04.910 different fonts, 20 01:04.990 --> 01:12.180 and it's a really, really easy way to make your designs look very professional and really slick. Out of 21 01:12.210 --> 01:14.520 all of the fonts in the world, 22 01:14.530 --> 01:19.020 there's pretty much two large families that you should really know about. 23 01:19.020 --> 01:26.700 One is the Serif family where they have these little feet at the end of their central beams. 24 01:26.700 --> 01:34.380 And the reason why they have these old feet is because the serif typeface were inspired by the marble 25 01:34.380 --> 01:37.350 carvings of days of yore. 26 01:37.350 --> 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 27 01:44.190 --> 01:51.810 area, take a look at places where they've carved into stone or marble and you'll notice that they also 28 01:51.810 --> 01:55.560 have these little feet at the end of the central beams. 29 01:55.560 --> 01:57.100 So why is that? 30 01:57.120 --> 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 31 02:03.540 --> 02:12.210 you chisel has gone into the Rock and you need to exit your engraving it's actually not possible to 32 02:12.210 --> 02:15.540 create 90 degree angles when you're carving into rock. 33 02:16.260 --> 02:21.310 So this is where the serif typeface gets their inspiration from. 34 02:21.420 --> 02:27.780 And this is also the reason why when you're choosing a serif typeface you're making your design look 35 02:27.780 --> 02:34.320 more serious, more authoritative and also a little bit older as well. 36 02:34.320 --> 02:41.550 So it's really good if you're designing something like a letterhead for a legal company or a magazine 37 02:41.550 --> 02:43.590 for architectural design. 38 02:43.830 --> 02:48.520 But when we take a look at the big family of serif typefaces 39 02:48.600 --> 02:55.710 they're actually further subdivided into smaller sub-families like Old style, Transitional, Modern and 40 02:55.710 --> 02:57.310 Slab-Serif. 41 02:57.330 --> 03:05.820 Now the really interesting thing is you can actually tell how old a typeface would look by looking at 42 03:05.910 --> 03:11.370 the difference between the thickest and the thinnest parts of each letter. 43 03:11.370 --> 03:15.050 So compare the Old Style 'o' versus the Transitional 44 03:15.060 --> 03:16.720 'o' versus the modern 45 03:16.780 --> 03:23.070 'o'. And look at how that difference between the thickest part of the letter and the thinnest part gets 46 03:23.070 --> 03:28.650 more and more exaggerated as you get towards a more modern font. 47 03:28.830 --> 03:34.920 So if you want something that looks authoritative but modern then maybe you want to go for a modern 48 03:35.010 --> 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 49 03:44.610 --> 03:49.890 maybe you have a winery, maybe you want to go for an Old Style serif instead. 50 03:49.890 --> 03:57.270 Now just as different colors have different moods and emotions, different fonts also have different moods 51 03:57.630 --> 04:02.850 and they also convey a different message to a user depending on which one you choose. 52 04:02.850 --> 04:09.800 So the serif family generally come across as traditional, stable, respectable, authoritative, 53 04:09.810 --> 04:15.490 these are the words that get thrown around by designers when they're thinking about the serif typeface. 54 04:15.510 --> 04:20.370 So for example, the next time you go to a magazine rack pick up the Vogue magazine. 55 04:20.430 --> 04:26.480 Take a look at their title and see how it's a modern serif typeface. 56 04:26.520 --> 04:33.000 It's got hugely exaggerated difference between the thick and thin parts of the lettering and it looks 57 04:33.090 --> 04:36.950 authoritative and it knows what it is talking about. 58 04:37.170 --> 04:43.230 Now on the other hand, if we think about the Sans-Serifs, they're kind of a different family, because instead 59 04:43.230 --> 04:49.290 of having the serifs or the little feet at the end the central beams, they have perfect right angles. 60 04:49.290 --> 04:56.100 And it's this right angle that makes the sans-serif family look so much more friendly, more approachable, 61 04:56.490 --> 04:59.120 more novel and more contemporary. 62 04:59.610 --> 05:06.120 So for example, you will tend to get words like sensible, simple, straightforward. And this is why a lot 63 05:06.120 --> 05:11.390 of startups love using the sans-serif typeface in their websites. 64 05:11.490 --> 05:18.330 For example, a Humanist typeface which is a sub-family of the sans-serif. It's something that is known 65 05:18.390 --> 05:25.740 as a highly readable typeface. And in fact, even within the serifs and the sans-serifs, you will tend to 66 05:25.740 --> 05:32.340 see designers going for the sans-serifs if they want to write body text which needs to be more legible 67 05:32.370 --> 05:34.920 and more readable. 68 05:34.920 --> 05:42.300 Now within this sub family, there's even differences in terms of legibility and readability. 69 05:42.420 --> 05:49.910 So how easy are the words to read and how pleasant is it to read the letters. 70 05:49.920 --> 05:56.760 There was a really interesting study done by MIT a few years back where they took two groups of users, 71 05:57.300 --> 06:05.190 one they put them into a car which had a dashboard made of a Humanist typeface and the other car had 72 06:05.190 --> 06:13.920 a dashboard which had a Grotesque sans-serif typeface. And what they did is they tracked the pupils of 73 06:13.920 --> 06:21.120 the people who were driving the cars and they tested how long each driver needed to look down at the 74 06:21.120 --> 06:27.840 dashboard before they got enough information from the speedometer or the odometer and before they could 75 06:27.930 --> 06:35.160 come back and look at the road again. And really surprisingly they found that just by changing the font 76 06:36.000 --> 06:42.330 from a Grotesque sans-serif to a Humanist sans-serif, they could save the drivers somewhere around 77 06:42.330 --> 06:48.370 30 to 40 percent of the time that's required to understand the information. 78 06:48.420 --> 06:54.690 So imagine that car is on a freeway that's driving at 60 miles, 100 miles an hour. 79 06:54.750 --> 07:00.750 That difference in the amount of time the user needs to look down at the dashboard could be the difference 80 07:00.750 --> 07:02.670 between life and death. 81 07:02.700 --> 07:07.580 And as designers, we rarely get to make that kind of difference in the world, right? 82 07:07.650 --> 07:13.600 So knowing that the Humanist typeface, all of the fonts that belong in that category like Gill Sans, 83 07:13.680 --> 07:21.620 Tahoma, Verdana, these are highly readable and highly legible fonts which you can use in the body types 84 07:21.630 --> 07:23.220 for example of your sales pitch. 85 07:23.760 --> 07:27.740 Now, even though we're not saving lives with our sales pitches, 86 07:27.900 --> 07:32.610 if you manage to get the user to read through more of your sales copy then they're probably going to 87 07:32.610 --> 07:36.120 be more convinced and more likely to buy your product 88 07:36.120 --> 07:36.420 right? 89 07:36.960 --> 07:42.990 So readability and legibility when you're choosing fonts is incredibly important. And the things that 90 07:42.990 --> 07:49.260 you're looking for in the letters when you're looking for legibility are open shapes and a lot of space 91 07:49.290 --> 07:54.690 between each of the letters and also the forms look unambiguous so they look different 92 07:54.690 --> 08:00.940 for example here the 'g' and the 9 actually look different on the second line. And finally, varying proportions. 93 08:00.960 --> 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 94 08:06.540 --> 08:08.340 between the two. 95 08:08.430 --> 08:15.990 Now while we've talked about using fonts, it's often that you see people go a bit overboard where they 96 08:15.990 --> 08:22.920 choose 10 fonts in the same design and that makes your design look very cluttered and very unprofessional. 97 08:22.980 --> 08:26.910 I recommend actually sticking to just two fonts in one design. 98 08:26.910 --> 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 99 08:32.580 --> 08:36.560 then again to two fonts. It just looks a lot cleaner and a lot tighter. 100 08:37.110 --> 08:44.190 And when you're combining these two different fonts you want to try to go for similar moods. So find 101 08:44.190 --> 08:48.990 fonts that have a similar mood to each other and also a similar time era. 102 08:48.990 --> 08:53.610 You don't want something that looks ultramodern with something that looks like it's from the days of 103 08:53.610 --> 08:56.780 yore combined together, it looks a little bit weird. 104 08:56.890 --> 08:59.730 Now the things you want to contrast are the Serif-ness. 105 08:59.730 --> 09:05.190 So for example you on the heading to be a serif and the body to be a sans-serif or the opposite way 106 09:05.190 --> 09:08.030 round. It just creates more interest in your design. 107 09:08.640 --> 09:14.010 And similarly, you can also create interest by just changing up the weights between the heading and the 108 09:14.010 --> 09:21.150 body. So making the heading really really bold or even using a black typeface and making the body text 109 09:21.240 --> 09:27.660 using something like thin or regular or light. These different weights can create contrast in your design. 110 09:29.270 --> 09:34.850 Now if you don't remember anything from this talk on typefaces, I just want you to look at these six 111 09:34.850 --> 09:42.050 fonts and try to wipe them from your memory because it is very very difficult to make these designs 112 09:42.050 --> 09:46.830 look good, unless I guess, if you're running a lemonade stand. 113 09:47.090 --> 09:52.940 But if you want to look professional, if you want to look "designed", try to use one of the other fonts that 114 09:52.940 --> 09:58.190 we've talked about and try to ignore these ones which are difficult to read and have moods that are 115 09:58.190 --> 10:00.830 difficult to fit in in a professional setting. 116 10:00.830 --> 10:05.780 The next time you're designing a website think about what typefaces you're going to choose. 117 10:05.780 --> 10:11.750 Think about what you're trying to convey with those typefaces and then pick a font from the sans-serif 118 10:11.840 --> 10:14.660 or the serif family and maybe try to combine them, 119 10:14.660 --> 10:20.000 so you have a heading that's a sans-serif and a body that's a serif and try to create contrast in your 120 10:20.000 --> 10:21.310 designs. 121 10:21.350 --> 10:28.310 So keep this in mind and hopefully they'll make your designs a lot more interesting and a lot more professional.