1 00:00:00,240 --> 00:00:03,770 In this part of the stage, we're going to be looking at different classifications or 2 00:00:03,770 --> 00:00:05,430 types of Typefaces. 3 00:00:05,430 --> 00:00:07,860 You might be wondering, why is this important? 4 00:00:07,860 --> 00:00:10,460 Can't I just find something I like and use it? 5 00:00:10,460 --> 00:00:12,180 I'm glad you asked. 6 00:00:12,180 --> 00:00:15,440 Knowing your different type genres and what makes them tick will help you 7 00:00:15,440 --> 00:00:20,060 choose a proper Typeface for the projects at hand and make you a better designer. 8 00:00:20,060 --> 00:00:23,310 For instance, if you're working with clients who want the mood of 9 00:00:23,310 --> 00:00:27,170 a site to convey eloquence, you need to know what classes or 10 00:00:27,170 --> 00:00:30,620 styles of Typefaces lean towards that bent. 11 00:00:30,620 --> 00:00:33,660 Or, if you're designing a site that's heavily influenced by 12 00:00:33,660 --> 00:00:37,440 a certain time period, you should utilize a Typeface that would have been 13 00:00:37,440 --> 00:00:39,090 appropriate to the genres at that time. 14 00:00:40,610 --> 00:00:44,490 As I mentioned earlier, Typefaces have a mood or a personality. 15 00:00:44,490 --> 00:00:48,230 The way the letter forms look conveys a message to the reader. 16 00:00:48,230 --> 00:00:52,070 Knowing these genres will help us see how our type is talking, and 17 00:00:52,070 --> 00:00:53,680 what makes them distinct. 18 00:00:53,680 --> 00:00:55,580 So without further ado, let's dive in. 19 00:00:57,080 --> 00:00:59,968 Type has been classified in different ways over the years. 20 00:00:59,968 --> 00:01:02,850 But for simplicity sake, and because our focus for 21 00:01:02,850 --> 00:01:07,120 this course will be on web typography, we'll look at three major genres. 22 00:01:07,120 --> 00:01:12,580 Serif, Sans Serif, and Scripts, along with their sub-genres. 23 00:01:12,580 --> 00:01:15,050 Up first, we'll look at Serif Typefaces. 24 00:01:15,050 --> 00:01:18,630 Like we learned from our terminology, Typefaces can have serifs on their 25 00:01:18,630 --> 00:01:22,720 letter forms and this would place them within serif genre. 26 00:01:22,720 --> 00:01:25,930 Simple enough, but within this genre we have a number of 27 00:01:25,930 --> 00:01:29,550 nuances that will set apart different serifs into sub-genres. 28 00:01:29,550 --> 00:01:33,150 The sub-genres we'll be covering are Humanist, Old Style, 29 00:01:33,150 --> 00:01:35,430 Transitional, Didone, and Slab. 30 00:01:35,430 --> 00:01:38,650 After the invention of the printing press in 1450, 31 00:01:38,650 --> 00:01:42,550 logically, the creation of Typefaces shortly followed. 32 00:01:42,550 --> 00:01:48,680 Humanist typefaces arose in the 1460's and 1470's with strong calligraphic influence. 33 00:01:48,680 --> 00:01:51,550 Printers were creating Typefaces based on the strokes of 34 00:01:51,550 --> 00:01:53,430 a pen when drawing letter forms. 35 00:01:53,430 --> 00:01:57,160 They tend to have diagonal stress, lower stroke contrast, and 36 00:01:57,160 --> 00:01:59,340 relatively small x-height. 37 00:01:59,340 --> 00:02:01,930 Their serifs are not as refined. 38 00:02:01,930 --> 00:02:04,450 Humanist Typefaces are not as common today, but 39 00:02:04,450 --> 00:02:07,900 some examples of these are Janson, Kennerley and Centaur. 40 00:02:09,040 --> 00:02:12,920 Old Style came about next in the later part of the 15th century. 41 00:02:12,920 --> 00:02:15,740 The letter forms were getting more refined as type and 42 00:02:15,740 --> 00:02:18,060 less influenced from calligraphy. 43 00:02:18,060 --> 00:02:20,280 We see less diagonal stress happening and 44 00:02:20,280 --> 00:02:23,560 the serifs have also changed to be more wedge-like. 45 00:02:23,560 --> 00:02:25,650 These lasted two centuries strong. 46 00:02:25,650 --> 00:02:29,770 Some examples include Goudy Old Style, Palatino, Perpetua and Plantin. 47 00:02:30,950 --> 00:02:36,100 This brings us to the 18th century where we see transitional Typefaces on the rise. 48 00:02:36,100 --> 00:02:39,220 The trend of decreasing calligraphic flow continues. 49 00:02:39,220 --> 00:02:41,850 And here we have vertical stress, thinner and 50 00:02:41,850 --> 00:02:47,190 flatter serifs along with exaggerated contrast between thicks and thins. 51 00:02:47,190 --> 00:02:51,850 Some examples include Baskerville, Bookman, and Clearface (ITC). 52 00:02:51,850 --> 00:02:56,000 Next, we have the Didones arriving in the late 18th century. 53 00:02:56,000 --> 00:02:58,500 The influence of the pen is really nowhere to be found. 54 00:02:58,500 --> 00:03:02,950 The serifs have become even thinner without any sign of bracketing. 55 00:03:02,950 --> 00:03:06,560 Contrast is taken to the extreme with thick verticals and 56 00:03:06,560 --> 00:03:08,560 ultra thin horizontals. 57 00:03:08,560 --> 00:03:12,810 You might regard these Typefaces as reminiscent of high fashion culture. 58 00:03:12,810 --> 00:03:17,500 They work great at large sizes, with ample amount of white space around them. 59 00:03:17,500 --> 00:03:20,490 But as body copy at small sizes, their serifs and 60 00:03:20,490 --> 00:03:22,950 horizontals can quickly get lost. 61 00:03:22,950 --> 00:03:25,670 Some examples include Bodoni and Didot. 62 00:03:25,670 --> 00:03:29,190 Now, we'll head into the opposite direction with Slab Serifs who have 63 00:03:29,190 --> 00:03:33,040 extremely thick, slab-like serifs and low contrast. 64 00:03:33,040 --> 00:03:35,350 These came about in the early 19th Century. 65 00:03:35,350 --> 00:03:37,150 And were heavily influenced for 66 00:03:37,150 --> 00:03:41,820 headlines in advertising because of their bold, look at me appearance. 67 00:03:41,820 --> 00:03:44,360 Most of these are utilized at large sizes, but 68 00:03:44,360 --> 00:03:47,730 a few have been known to also work well at small sizes. 69 00:03:47,730 --> 00:03:52,180 Some examples of these include, Rockwell, Clarendon, Egyptienne, and Centinnel. 70 00:03:53,320 --> 00:03:57,232 Next, let's move into the new genre of San Serifs. 71 00:03:57,232 --> 00:04:00,280 These Typefaces do not have serifs on their letter forms or 72 00:04:00,280 --> 00:04:03,010 literally are without serifs. 73 00:04:03,010 --> 00:04:07,090 We'll look at the Grotesque, Neo-Grotesque, Humanist, and Geometrics. 74 00:04:08,340 --> 00:04:12,522 In the late 19th century, we see the rise of Grotesque San Serifs. 75 00:04:13,620 --> 00:04:17,170 Though we see san serifs as completely normal today. 76 00:04:17,170 --> 00:04:21,150 Don't forget there wasn't much of a reference for them when they came about. 77 00:04:21,150 --> 00:04:22,665 The design of an earlier one, 78 00:04:22,665 --> 00:04:28,010 Akzidenz-Grotesk, has actually been theorized to be derived from Didot 79 00:04:28,010 --> 00:04:33,120 because the Typefaces have similar metrics when the serifs from Didot are removed. 80 00:04:33,120 --> 00:04:37,260 As we'll see in other genres, sans serifs are typically low contrast. 81 00:04:37,260 --> 00:04:41,050 Some examples of Grotesque also include Franklin Gothic. 82 00:04:41,050 --> 00:04:43,011 The Neo-Grotesque then arises, 83 00:04:43,011 --> 00:04:46,770 refining some of the peculiarities in early grotesques. 84 00:04:46,770 --> 00:04:51,250 These are some of the more common sans serifs and Helvetica fits right in there. 85 00:04:51,250 --> 00:04:53,770 Although there's a desire for simplicity here, 86 00:04:53,770 --> 00:04:57,930 there aren't always great candidates for body copy because the simplicity and 87 00:04:57,930 --> 00:05:02,890 similarity in letter forms can also effect legibility at small sizes. 88 00:05:02,890 --> 00:05:05,390 Other examples include Univers. 89 00:05:05,390 --> 00:05:09,890 Next, we have Humanist Sans, not to be confused with Humanist Serifs. 90 00:05:09,890 --> 00:05:13,290 And these get back to some calligraphic roots with greater variations in 91 00:05:13,290 --> 00:05:14,200 line widths. 92 00:05:14,200 --> 00:05:17,160 These are often the most legible of the sans serif's bunch. 93 00:05:17,160 --> 00:05:20,400 Hence, their popular use as website body copy. 94 00:05:20,400 --> 00:05:23,640 Examples include Tahoma, Gill Sans and Frutiger. 95 00:05:24,750 --> 00:05:29,720 Lastly, in our sans serifs, we have our Geometrics, which are quite popular today. 96 00:05:29,720 --> 00:05:30,850 As the name implies, 97 00:05:30,850 --> 00:05:35,320 their letter forms are based on geometric shapes like circles and squares. 98 00:05:35,320 --> 00:05:38,650 Examples include Futura, Bank Gothic and Gotham. 99 00:05:39,770 --> 00:05:42,540 Now we'll move into our final genre of scripts, 100 00:05:42,540 --> 00:05:45,060 which are Typefaces based on handwriting. 101 00:05:45,060 --> 00:05:49,540 We'll subset this genre into Formal Scripts and Casual Scripts. 102 00:05:49,540 --> 00:05:54,000 Formal Scripts are based on letter forms from writing masters in the 17th and 103 00:05:54,000 --> 00:05:55,070 18th century. 104 00:05:55,070 --> 00:05:59,160 They have some contrast between thick and thin as they are inspired by 105 00:05:59,160 --> 00:06:02,980 the way a quill or nimbo pen would handle the letter forms. 106 00:06:02,980 --> 00:06:06,620 They tend to be more elegant and work well for events like weddings today. 107 00:06:07,690 --> 00:06:12,310 Casual Scripts are a bit more free and well, casual. 108 00:06:12,310 --> 00:06:14,290 They tend to be more light hearted or 109 00:06:14,290 --> 00:06:17,760 easy going that their seriously eloquent counterparts. 110 00:06:17,760 --> 00:06:20,780 The contrast can range from low to high, depending on the typeface. 111 00:06:20,780 --> 00:06:26,528 They are often inspired by the way a brush or a marker would handle the letter forms. 112 00:06:26,528 --> 00:06:27,230 All right. 113 00:06:27,230 --> 00:06:28,140 That was a lot to cover. 114 00:06:28,140 --> 00:06:31,220 I hope it helps you get to know type a little better, so 115 00:06:31,220 --> 00:06:33,610 we can make smarter choices down the road. 116 00:06:33,610 --> 00:06:36,600 Also, think about if there's a certain class that you naturally 117 00:06:36,600 --> 00:06:38,060 gravitate towards. 118 00:06:38,060 --> 00:06:41,360 In the next video, we'll look at designing for print versus the web.