What is Typography?4:21 with Mattox Shuler
Up first, we’ll cover what is typography, where it can be found, who practices it, and more.
What Is Typography?, Matthew Butterick
Why Does Typography Matter?, Matthew Butterick
Elements of Typographic Style, Robert Bringhurst
Understanding the Difference Between Type and Lettering, Joseph Alessio
[MUSIC] 0:00 Hey, I'm Maddox and I design type through Fort Foundry. 0:04 You can check out all the type faces and goodsI make at fortfoundry.com. 0:07 Welcome to an introduction to typography where we'll talk about the basics. 0:12 This will give us a solid foundation to build upon as we 0:16 get into the later stages of the web typography course. 0:18 First, we'll need to understand what typography is. 0:22 You might not realize this, but you've seen typography in action. 0:25 It's all around your everyday life. 0:29 It's on the menu of that restaurant you love eating at, it's on those road 0:31 signs you drove by, and it's definitely all over that favorite site of yours. 0:34 Which is lets be honest, tree house of course. 0:38 All that to say typography is everywhere, whether people realize it or not. 0:41 So let's define it. 0:46 On Matthew Butterick's site practical typography, 0:47 he defines the term simply as follows. 0:50 Typography is the visual component of the written word. 0:52 This means typography comes in to play when words are visually displayed on 0:56 services like screens, paper, posters, signs, and more. 1:00 Though the words or 1:06 content of something might remain the same, the typography can change. 1:06 Let's take a look. 1:11 Here we have the text, I shot the serif. 1:12 Now if that phrase was only spoken, typography wouldn't be involved. 1:15 But because it's visually displayed, we can shape how it looks through typography. 1:19 For example, we could increase the size of the text and align it in the center. 1:23 We could change the typeface from Georgia to Futura, and set it in all caps, or 1:27 uppercase letters. 1:32 We could also adjust the letter spacing, or tracking, between characters. 1:33 We could go on forever making different adjustments. 1:37 But I just wanted to give you a quick sample of typography in action. 1:39 If you don't know how to do any of those things, don't worry. 1:43 We'll cover how to apply all this and more to the web later in the course. 1:46 So far, we've seen that typography involves changing, arranging, or 1:50 ordering type. 1:54 But we wouldn't want to do this without a purpose or reason as to why. 1:55 A major purpose behind typography is utility. 2:00 This means presenting the text in a way that is useful, clear, and 2:03 legible to it's reader. 2:06 The content of a web page could be incredible, but if the typography is 2:08 lack luster, then it's going to be difficult for people to read and navigate. 2:12 They'll either struggle through it or quit along the way. 2:16 Both situations are undesirable. 2:19 This is why typography as utility, is a extremely important to present the text in 2:21 a way that's clear, orderly, and legible for readers and users of your site. 2:26 Another purpose behind typography is design. 2:31 Type can have a personality or mood. 2:34 It gives off a certain vibe, and conveys something to 2:35 the reader before they've even digested a single word on the page. 2:38 The flavor of your typography should match the voice of your content. 2:42 You don't want something that looks like chocolate ice cream, 2:46 to taste like meatloaf. 2:49 Let's say you have an official serious business document that's set in a fun, 2:51 quirky typeface. 2:54 Although the content might set the right message, the design or 2:56 typography would not at all. 2:59 As you practice typography, 3:01 you want to make sure the design aspect of it enhances the message at hand. 3:02 It can keep readers engaged, and also create great delight in them. 3:07 Because so many different things can come into play, 3:11 good typography might seem a bit tricky at first to execute. 3:14 I like to think of it as striking a balance between utility and design. 3:17 Throughout this course we'll look at different ways to maintain that balance. 3:21 Because typography is one of the most important elements of web design. 3:25 Lastly I want to make a distinction between typography and lettering. 3:29 These are two fields that are popular today, but 3:33 commonly confused in the industry. 3:35 Both deal with letterforms, but in different ways. 3:37 Typography involves working with premade letter systems like typefaces and 3:41 fonts to lay out and arrange content. 3:45 Whereas lettering involved crafting letterforms for a single use and 3:47 purpose, instead of utilizing a premade letter system as is with typography. 3:51 This definition is based on Joseph Alessio's article in the teacher's notes. 3:56 It's great for further reading. 4:00 Now that we understand the difference, our focus for this course will be 4:03 on typography, and you'll be able to use these terms correctly in your industry. 4:06 Next time you're out and about, see if you can spot some typography you like, and 4:11 take note of what distinguishes it. 4:14 In the upcoming video, 4:16 we will learn some terms that will help us talk about typography and type faces. 4:17
You need to sign up for Treehouse in order to download course files.Sign up