We'll start by defining typography and looking at examples of type in real life.
- 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 Hope Armstrong, a teacher and product designer here at Treehouse. 0:09 Every day, you see typography in action. 0:14 It's on the menu of that restaurant you love eating at, 0:17 it's on road signs you drive by, and it's definitely all over that 0:20 favorite site of yours, which is, let's be honest, Treehouse, of course. 0:24 All that to say typography is everywhere, whether people realize it or not. 0:29 Something so ubiquitous is often taken for granted. 0:35 But it's really powerful, as designs are often mostly comprised of type. 0:38 There's so much to learn. 0:43 First, we need to understand what typography is. 0:45 On Matthew Butterick's site, Practical Typography, he defines the term simply 0:48 as follows, typography is the visual component of the written word. 0:53 This means typography comes into play when words are visually displayed on surfaces, 0:59 like screens, paper, posters, signs, and more. 1:04 Though the words or 1:09 content of something might remain the same, the typography can change. 1:10 Let's take a look. 1:15 Here's the text, I shot the serif. 1:17 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:22 We could change the typeface from Georgia to Futura and set it in uppercase letters. 1:27 We could also adjust the letter spacing or tracking between characters. 1:33 We could go on forever making different adjustments, but 1:38 I wanted to give you a quick sample of typography in action. 1:42 If you don't know how to do any of these things, don't worry, we'll cover how to 1:46 practically apply all of this and more later on in the course. 1:51 So far, we've seen that typography involves changing, arranging, or 1:56 ordering type. 2:01 But we wouldn't want to do this without a purpose or reason as to why. 2:02 A major purpose behind typography is utility. 2:08 This means presenting the text in a way that is useful, clear, and 2:12 legible to its reader. 2:15 The content of a webpage could be incredible, but if the typography is 2:18 lackluster, then it's gonna be difficult for people to read and navigate. 2:22 They'll either struggle through it or quit along the way. 2:28 Both situations are undesirable. 2:32 This is why typography as utility is extremely important to present text in 2:35 a way that's clear, orderly, and legible for readers and users of your site. 2:40 Another purpose behind typography is designing for an emotional connection. 2:46 Type can have a personality or mood, it gives off a certain vibe and conveys 2:51 something to the reader before they've even digested a single word on the page. 2:56 The flavor of your typography should match the voice of your content. 3:02 You wouldn't want something that looks like chocolate ice cream 3:06 to taste like tater tots. 3:10 Let's say you have an official, 3:13 serious business document that's set in a fun, quirky typeface. 3:15 Although the content might send the right message, 3:20 the design or typography would not at all. 3:23 As you practice typography, 3:26 you'll wanna make sure the design aspect of it enhances the message at hand. 3:28 It can keep readers engaged and also create delight in them. 3:33 Because so many different things can come into play, 3:37 good typography might seem a bit tricky at first to execute. 3:41 I like to think of it as striking a balance between utility and designing for 3:45 an emotional connection. 3:49 Throughout this course, we'll look at different ways to maintain that balance, 3:52 because typography is one of the most important elements of design. 3:56 Next, I wanna make a distinction between typography and lettering. 4:01 These are two fields that are popular today, but 4:06 commonly confused in the industry. 4:08 Both deal with letter forms, but in different ways. 4:11 Typography involves working with pre-made letter systems like typefaces and 4:15 fonts, to lay out an arranged content. 4:20 Whereas lettering involves crafting letter forms for a single use and 4:23 purpose instead of utilizing a pre-made letter system. 4:26 This definition is based on Joseph Alessio's article in the teacher's notes. 4:30 It's great for further reading. 4:35 Now that we understand the difference, our focus for this course will be on 4:38 typography, and you'll be able to use those terms correctly in your industry. 4:42 Lastly, let's look at what a typeface is and the elements that define and shape it. 4:48 The terms typeface and font are commonly used interchangeably today, but 4:54 they are distinctly different. 4:58 A typeface is the design of a collection of characters. 5:01 So the term should be used when talking about the look of those letters, numbers, 5:04 and symbols. 5:09 For example, I dig Futura, it's such a good-looking typeface. 5:10 A font is a single instance or embodiment of a specific weight, 5:16 width, or style of a typeface. 5:21 For example, the computer file for Helvetica bold italic would be a font, 5:23 whereas Helvetica would be the typeface. 5:29 Next time you're out and about, spot some typography you like and 5:32 take note of what distinguishes it and how it makes you feel. 5:36 In the next video, I'll explain how typography relates to the user experience. 5:41
You need to sign up for Treehouse in order to download course files.Sign up