1 00:00:00,000 --> 00:00:04,848 [MUSIC] 2 00:00:04,848 --> 00:00:07,976 Hey, I'm Maddox and I design type through Fort Foundry. 3 00:00:07,976 --> 00:00:12,280 You can check out all the type faces and goodsI make at fortfoundry.com. 4 00:00:12,280 --> 00:00:16,020 Welcome to an introduction to typography where we'll talk about the basics. 5 00:00:16,020 --> 00:00:18,790 This will give us a solid foundation to build upon as we 6 00:00:18,790 --> 00:00:22,610 get into the later stages of the web typography course. 7 00:00:22,610 --> 00:00:25,730 First, we'll need to understand what typography is. 8 00:00:25,730 --> 00:00:29,600 You might not realize this, but you've seen typography in action. 9 00:00:29,600 --> 00:00:31,480 It's all around your everyday life. 10 00:00:31,480 --> 00:00:34,600 It's on the menu of that restaurant you love eating at, it's on those road 11 00:00:34,600 --> 00:00:38,800 signs you drove by, and it's definitely all over that favorite site of yours. 12 00:00:38,800 --> 00:00:41,960 Which is lets be honest, tree house of course. 13 00:00:41,960 --> 00:00:46,270 All that to say typography is everywhere, whether people realize it or not. 14 00:00:46,270 --> 00:00:47,790 So let's define it. 15 00:00:47,790 --> 00:00:50,300 On Matthew Butterick's site practical typography, 16 00:00:50,300 --> 00:00:52,780 he defines the term simply as follows. 17 00:00:52,780 --> 00:00:56,490 Typography is the visual component of the written word. 18 00:00:56,490 --> 00:01:00,370 This means typography comes in to play when words are visually displayed on 19 00:01:00,370 --> 00:01:06,070 services like screens, paper, posters, signs, and more. 20 00:01:06,070 --> 00:01:06,730 Though the words or 21 00:01:06,730 --> 00:01:11,190 content of something might remain the same, the typography can change. 22 00:01:11,190 --> 00:01:12,300 Let's take a look. 23 00:01:12,300 --> 00:01:15,480 Here we have the text, I shot the serif. 24 00:01:15,480 --> 00:01:19,300 Now if that phrase was only spoken, typography wouldn't be involved. 25 00:01:19,300 --> 00:01:23,940 But because it's visually displayed, we can shape how it looks through typography. 26 00:01:23,940 --> 00:01:27,720 For example, we could increase the size of the text and align it in the center. 27 00:01:27,720 --> 00:01:32,420 We could change the typeface from Georgia to Futura, and set it in all caps, or 28 00:01:32,420 --> 00:01:33,305 uppercase letters. 29 00:01:33,305 --> 00:01:37,620 We could also adjust the letter spacing, or tracking, between characters. 30 00:01:37,620 --> 00:01:39,750 We could go on forever making different adjustments. 31 00:01:39,750 --> 00:01:43,460 But I just wanted to give you a quick sample of typography in action. 32 00:01:43,460 --> 00:01:46,200 If you don't know how to do any of those things, don't worry. 33 00:01:46,200 --> 00:01:50,890 We'll cover how to apply all this and more to the web later in the course. 34 00:01:50,890 --> 00:01:54,640 So far, we've seen that typography involves changing, arranging, or 35 00:01:54,640 --> 00:01:55,900 ordering type. 36 00:01:55,900 --> 00:01:59,020 But we wouldn't want to do this without a purpose or reason as to why. 37 00:02:00,510 --> 00:02:03,530 A major purpose behind typography is utility. 38 00:02:03,530 --> 00:02:06,900 This means presenting the text in a way that is useful, clear, and 39 00:02:06,900 --> 00:02:08,590 legible to it's reader. 40 00:02:08,590 --> 00:02:12,170 The content of a web page could be incredible, but if the typography is 41 00:02:12,170 --> 00:02:16,680 lack luster, then it's going to be difficult for people to read and navigate. 42 00:02:16,680 --> 00:02:19,200 They'll either struggle through it or quit along the way. 43 00:02:19,200 --> 00:02:21,560 Both situations are undesirable. 44 00:02:21,560 --> 00:02:26,030 This is why typography as utility, is a extremely important to present the text in 45 00:02:26,030 --> 00:02:29,960 a way that's clear, orderly, and legible for readers and users of your site. 46 00:02:31,260 --> 00:02:34,300 Another purpose behind typography is design. 47 00:02:34,300 --> 00:02:35,990 Type can have a personality or mood. 48 00:02:35,990 --> 00:02:38,960 It gives off a certain vibe, and conveys something to 49 00:02:38,960 --> 00:02:42,760 the reader before they've even digested a single word on the page. 50 00:02:42,760 --> 00:02:46,450 The flavor of your typography should match the voice of your content. 51 00:02:46,450 --> 00:02:49,060 You don't want something that looks like chocolate ice cream, 52 00:02:49,060 --> 00:02:50,040 to taste like meatloaf. 53 00:02:51,120 --> 00:02:54,990 Let's say you have an official serious business document that's set in a fun, 54 00:02:54,990 --> 00:02:56,460 quirky typeface. 55 00:02:56,460 --> 00:02:59,390 Although the content might set the right message, the design or 56 00:02:59,390 --> 00:03:01,270 typography would not at all. 57 00:03:01,270 --> 00:03:02,790 As you practice typography, 58 00:03:02,790 --> 00:03:07,380 you want to make sure the design aspect of it enhances the message at hand. 59 00:03:07,380 --> 00:03:10,370 It can keep readers engaged, and also create great delight in them. 60 00:03:11,970 --> 00:03:14,470 Because so many different things can come into play, 61 00:03:14,470 --> 00:03:17,360 good typography might seem a bit tricky at first to execute. 62 00:03:17,360 --> 00:03:21,730 I like to think of it as striking a balance between utility and design. 63 00:03:21,730 --> 00:03:25,210 Throughout this course we'll look at different ways to maintain that balance. 64 00:03:25,210 --> 00:03:28,480 Because typography is one of the most important elements of web design. 65 00:03:29,580 --> 00:03:33,400 Lastly I want to make a distinction between typography and lettering. 66 00:03:33,400 --> 00:03:35,640 These are two fields that are popular today, but 67 00:03:35,640 --> 00:03:37,660 commonly confused in the industry. 68 00:03:37,660 --> 00:03:40,200 Both deal with letterforms, but in different ways. 69 00:03:41,620 --> 00:03:45,390 Typography involves working with premade letter systems like typefaces and 70 00:03:45,390 --> 00:03:47,850 fonts to lay out and arrange content. 71 00:03:47,850 --> 00:03:51,520 Whereas lettering involved crafting letterforms for a single use and 72 00:03:51,520 --> 00:03:56,930 purpose, instead of utilizing a premade letter system as is with typography. 73 00:03:56,930 --> 00:04:00,990 This definition is based on Joseph Alessio's article in the teacher's notes. 74 00:04:00,990 --> 00:04:01,910 It's great for further reading. 75 00:04:03,060 --> 00:04:06,170 Now that we understand the difference, our focus for this course will be 76 00:04:06,170 --> 00:04:10,090 on typography, and you'll be able to use these terms correctly in your industry. 77 00:04:11,200 --> 00:04:14,540 Next time you're out and about, see if you can spot some typography you like, and 78 00:04:14,540 --> 00:04:16,410 take note of what distinguishes it. 79 00:04:16,410 --> 00:04:17,250 In the upcoming video, 80 00:04:17,250 --> 00:04:20,830 we will learn some terms that will help us talk about typography and type faces.