Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Just My Type: Successful Branding and Typography34:28 with Jim Kidwell
Creating and maintaining a strong and lasting brand is all about the details. Every decision has a visceral affect on public perception. Web design is 90% typography, and successful branding efforts make typeface selection central to the process. Join typography expert Jim Kidwell for this whirlwind tour of how various brands have utilized typography throughout the years. Learn from the real-world examples from both current and historical typographic successes and failures. Whether you’re looking to rebrand soon, want to select some new fonts for your website, or just need to learn more about typography, you’re sure to come away from this talk with a new critical eye toward typeface selection and utilization.
Alright. 0:01 Creating and maintaining a strong, and lasting 0:02 Brand is something that everybody wants to do. 0:04 And, part of, a critical part of doing that is, 0:07 is your typogra, your typographic selections in the actual, design process. 0:09 Typographic selection creates and, communicates a number of different 0:15 things, that you might not have eventually, initially thought about. 0:18 So, it com, communicates emotion, time, And place. 0:22 And to kind of illustrate this, I kinda wanted 0:26 to take a short walk through history a little bit. 0:28 And, show you some examples from, the past. 0:30 Jump back quite a bit here, back into the 1800's and 1900's. 0:34 You can see that that typefaces are, very very different. 0:38 From the Dutch secessionist movement down here at the bottom. 0:42 It's very, indicative of the era as well as even just the, the 0:44 products avail, available like the cocaine tooth drops up at the top there. 0:48 >> [COUGH]. 0:52 >> But, I mean, you wouldn't think that 0:53 this would be something that's coming out today. 0:54 This is something that's definitely indicative of the period. 0:55 Moving forward in time a little bit, you can see a, 0:59 an evolution of the typefaces available, and the typefaces in use. 1:01 Some fatter serifs on things. 1:06 And this is obviously all in product design and development, as 1:11 well as even some things used by, the government, as well. 1:13 Stepping forward even further, into the thirties, 1:18 you can see some wonderful topography here. 1:22 And some of our movie, stills. 1:24 You can see that this is definitely, more of an evolved typeface development 1:29 Stepping into the 40s, we have obviously World War II, that had a big impact on 1:38 things, and also there were a lot of 1:43 things that were really great, happening in design. 1:44 People were trying a little bit new things I even like this, look. 1:46 She may be a bag of trouble, watch out. 1:49 >> [LAUGH]. 1:51 >> And even the, the gospel stuff [UNKNOWN] they use for Christ is 1:53 a little more playful than you may have not seen before, but 1:58 it's all aimed at you know, different audience [INAUDIBLE]. 2:03 Stepping into the '50s, [SOUND] for those of you were madmen fans. 2:08 I really like what they've done here. 2:14 I love the Oldsmobile 88, the bold use of the large, 88 typeface. 2:15 Definitely indicative of the era. 2:21 One of the things you'll notice over here, is the Trader Vick's menu over 2:24 here that was something definitely from the 2:28 period where people were kinda fascinated with. 2:30 This, what they were considering tribal culture. 2:33 Stepping into the 60s and 70s, we get even a little more different. 2:38 From Woodstock over here, you have like this hand cut look type look a the type. 2:42 As well as like some more bubbly stuff, 2:48 and the Burger King comes out at that Point. 2:49 Charlie's kinda playful in, in Logan's Run. 2:52 With the sci-fi look. 2:54 [BLANK_AUDIO] 2:56 End of the 80s some people remember the 80s I bet. 2:58 Yeah. 3:01 everything's, fat and stretched and all over the place. 3:02 I mean the Frankie Say Relax, if you saw that today, you'd be like yeah, wow 80s. 3:06 Even if you didn't have some dayglo neon colors that all of the. 3:09 College girls seem to think is indicative of the 80s these days. 3:13 also, you know, Street Xler definitely in the 3:18 middle here, a very playful kind of typeface. 3:19 I had to include info com over in the lower right, just 3:24 because I was a little video fan back into the 80s, as well. 3:26 There's a fun on from the 80s. 3:31 Pe, pe, some of you may remember the Xanadu movie, you know. 3:32 It was kinda goofy, and silly. 3:36 But, if you look at the actual typeface and logo design, in the 3:38 actual poster itself, you've got these really nice little hooks at the end. 3:41 They're not quite sarifs, but they're kind of 3:44 done in a very interesting and unique way. 3:46 But then. 3:50 Not too long ago. 3:51 Yes, believe it or not, they brought out Xanadu on Broadway, seriously. 3:52 I do not think it's around anymore, but I'd 3:56 like to think it was because of the typeface. 3:59 Look at what they did here, they chopped everything up and made it all boring. 4:00 That's not fun at all. 4:04 That's, kind of lost the original intent. 4:05 Whether you like Xanadu or not, I still like what they did here. 4:07 So typography and brand typography is very, very 4:13 critical and central to branding and I wanted to 4:16 make sure that everybody considers typography carefully when you're, 4:18 you're building a site and building a brand itself. 4:22 Typography is very important to be 4:25 consistent across all media and it's becoming 4:26 a lot more easy to do these days with website design and development because. 4:28 You have the ability to use type faces on the web 4:33 that you would never have been able to use before, so typography 4:36 must serve the branding, it must be indicatively part of it 4:39 but also be serving the purpose and intent you're intending to convey. 4:43 Let's step through a little bit of a case study here. 4:49 I wanna take through, take us through like, 4:51 how McDonalds has used topography in the past. 4:52 So this is just a little bit of a case study. 4:55 So, you look back in the day here. 4:56 You see, this is the first restaurant in 1948, original restaurant. 4:57 You see that they've got a very, very plain, communication. 5:01 They're like $0.15 burgers, boom. 5:05 Nothing really special about that type face but 5:07 it does exactly what they want it to do. 5:09 Stepping forward their, their design is changing a little bit. 5:13 You still have, hamburgers in bold type but it's also a very, simple sans serif 5:16 typeface that's set in all caps, that's communicating exactly what they want. 5:22 Moving forward into the 60s, Ronald McDonald sign just for 5:28 me you see that yes, it's changed a little bit. 5:31 You get a little more playful here, here 5:34 you have some, some italicized type down here, but 5:35 it's still the, the basic communication of, squared 5:37 off sans serif type faces but in all caps. 5:42 Going into the 70's we get a little more bubbly and 5:47 rounded, these are where these came from an ad campaign that 5:50 was targeted at African Americans but, it's indicative of the branding 5:54 of the, in the 70's, everything's kinda low grounded and fat. 5:59 Jumping into the 80s we get even more bubbly. 6:05 Bubble, bubble, bubble. 6:08 So yeah, these are just from bags here back in the 80s 6:10 and this is definitely, bolder slabs here if you're on a napkin. 6:13 Not too bad. 6:18 But ,that kind, that kind of like may be in early 80s I would guess. 6:18 Jumping into the '90s believe it or not, there was one 6:21 type face that was used by all the fast food companies. 6:26 So you had, McDonald's, Burger King, and Wendy's maybe the 6:29 same one all using the same type face in their branding. 6:34 Does this...iIs this good for branding? 6:38 No not really, this is not, giving people the indication that this is 6:40 my company, and this is my brand, and this exactly what we're aiming for. 6:44 So, it's kind of confusing. 6:48 This is Bodegas Sans. 6:50 So, why would they choose to do that? 6:51 That's not very smart branding. 6:53 And bringing McDonald's into the modern era, you look 6:57 at our websites here, we have a much more playful. 7:00 Recent typography but it's also not consistent across the entire 7:04 brand, they're doing they're doing sub branding about specific things. 7:08 So, this is aimed at their children, they have their I'm 7:11 loving it campaign, I really like the, the script typed face there. 7:15 Going into their McCafe, with their, with their 7:19 coffee offerings and so forth that that's subtly playful. 7:22 Use of type there. 7:26 And even delving into one product or another, you have 7:29 their McWrap, that has specific typography aimed at that product itself. 7:32 But not all is great in the world because this is the most, recent bag, 7:38 that I got from McDonald's just for this purpose and this is a hot mess. 7:41 Look at all that. 7:44 It is just all over the place. 7:45 They've got, little bit of this, little bit of that. 7:46 They just, like, threw everything at that. 7:48 It would have been, much more successful, I think, if 7:50 they'd chose one thing and kind of stuck with it. 7:52 But, of course, you can go the opposite direction. 7:56 So, what would happen if everything used one font? 7:58 There's this really fun project some of you may have seen, The Comic Sans Project. 8:01 You guys seen that? 8:05 Yeah, somebody has. 8:08 So let's just kind of, step through a few of these here, just for fun. 8:09 Just to see, how ridiculous it can possibly get. 8:12 The Coke side of life. 8:15 Refresh your world. 8:19 This one actually kind of worked for me. 8:22 I like it because it does kind of, indicate that 8:24 the seamstress kind of like, done, done all the stitching. 8:27 Nothin says class for NASA. 8:32 >> [LAUGH]. 8:36 >> Star Wars. 8:37 And yeah. 8:40 >> [LAUGH]. 8:41 >> There ya go. 8:41 Nothing's nothin says [LAUGH] class like Chanel. 8:41 >> [LAUGH]. 8:44 >> There you go, comic sans Chanel. 8:44 That's kind of embarrassing. 8:45 >> [LAUGH]. 8:47 It's very embarrassing isn't it. 8:47 it's, it's funny even today, you know, there are a lot of people out there that. 8:50 Don't really take type a selection into account. 8:53 George R. 8:56 R. 8:57 Martin being one of them. 8:57 This is his actual site, still the same, live today. 8:59 Looks like it was designed in 1993. 9:03 Not really good, not really, he didn't really take a lot of 9:05 time to select his typeface or his colors well, in my opinion either. 9:08 So, how about if we like. 9:13 Played around a little bit and kind of, 9:15 switched typography across brands and switched kind of logos. 9:16 This logo designer, Graham Smith, had a really fun project. 9:19 You can go to his site here and check out what he's done. 9:23 And so this is gonna be one of those things that I want audience participation. 9:28 I'd like to hear from you. 9:31 So, when I put something up I'd like you to 9:32 tell me what the original brand that they were intending. 9:34 [CROSSTALK] Facebook. 9:36 [CROSSTALK] Twitter. 9:40 Very good. 9:44 Nikon. 9:48 Canon, of course. 9:49 I'm making it easy for you. 9:49 Pepsi. 9:52 That one's ridiculous. 9:54 >> [LAUGH] Fedex. 9:55 I'm making it easy. 9:58 UPS. 10:05 >> [LAUGH]. 10:06 >> Harley Davidson. 10:08 This one might be a little harder but it's easier for people in the UK. 10:11 It's Moto Guzi. 10:14 It's another motorcycle brand. 10:15 That was the swap one from, Harley Davidson. 10:17 [LAUGH]. 10:19 Ford [LAUGH] Sitrin, this is another European brand. 10:22 Yahoo, granted Yahoo has changed their brand now, so, it's a little different. 10:33 >> [LAUGH]. 10:37 >> Google Burger King. 10:40 So, as I mentioned earlier from the dawn 10:47 of the internet, web design had been shackled. 10:49 It had been kinda of, crunched down and you had to 10:51 use some specific type-bases you had basically 13 or is this 10? 10:54 three, seven, eight, nine, nine type-bases that were considered web Safe. 10:59 And you're limited to your design with that. 11:03 And when it comes down to it only four 11:06 of these were really designed to work well on screen. 11:08 The others were designed primarily for print purposes. 11:11 And then, when it comes down to it, you knowonly 11:13 two of these really display body copy well on screen. 11:16 And, you know, I know you may have chosen. 11:20 Others back in the day. 11:22 But you where stuck. 11:23 It was basically like saying, hey, you know, you can have a 11:24 Model T in any color you want, as long as it's back. 11:26 So, basically what came along was, @font-face. 11:29 And @font-face was proposed back in the day by 11:34 Jacam Wi, and then integrated into the CSS back. 11:37 And then when it was done that, everybody 11:39 started picking it up in their own different ways. 11:41 And this allows you to actually utilize type faces. 11:43 Across all of your properties, whether that be print Web, anything else, 11:46 TV, all at the same time, all using the same type face. 11:51 You can actually kind of ,do this, you could do this back 11:55 in '94 believe it or not because EOT was available back then. 11:59 But now it's supported by all modern browsers, and also 12:02 mobile devices, so IOS and Android both support this as well. 12:05 And you get a lot of cool and interesting 12:10 things that you can do, this is an Vebo design. 12:11 This is their design agency, they've, they've 12:13 done some fun things with the topography. 12:15 This is like call customer type. 12:17 >> [COUGH]. 12:18 >> Everything's set on there, you can make it go in 12:19 and just modify things and just put new things up every day. 12:21 This website Heartscryindia actually, has a nice, fun, huge full site 12:25 background image that this type is set directly over the top. 12:32 They don't have to re-output the image in 12:35 photoshop every time they want to update the site. 12:37 Actually if you go refresh the site, you get a new India image in the background. 12:39 You can even use type and design elements now. 12:44 You can. 12:47 Actually all these things here, that's all done with live type. 12:47 It's not done with graphics and like that. 12:52 This site is actually super duper cool. 12:56 And actually uses live type through the entire thing. 12:58 It's one of those side scrollers. 13:00 I don't typically like the side scrollers. 13:01 But in this, in this kind of site, it does work. 13:03 When you scroll to the side, the little car, down 13:06 at the bottom moves over the, well to the right. 13:08 And he goes by all the little hills. 13:10 And you get all sorts of new information. 13:12 And everything is set in live type. 13:13 It's really neat. 13:14 It's really well done. 13:15 This is another fun site. 13:17 The Nerdery. 13:19 I, I like their, er, their combination of type faces. 13:20 Their big slab serif and their, their headlines here. 13:22 As well as their sans serif use of sub heads, and serif in body copy. 13:25 All done with live type. 13:31 This is my favorite example, of type face 13:33 design, and how it's consistent across all media. 13:36 If you're looking at the estate black, they 13:38 have, and it's kind of showing up here, maybe 13:41 kinda not, but the bottle over here on the 13:43 right-hand side, is all using the same type face. 13:45 Well it is a custom logo here. 13:48 The type face that's in use on their site 13:50 itself It's consistent with all of their physical products. 13:51 >> So, if you are looking at their bottles, 13:55 any materials they have at their winery and so forth. 13:57 It's all going to be in the same typeface. 14:00 Which is great, this is an amazing use of typography 14:02 and it's consistent, and it's something you can do today. 14:04 This is just a playful one that I kind of like. 14:09 I like what they've done with their, the, the number eight in their logo. 14:10 But also it communicates well across the rest of their site because the, 14:14 what student used here, pairs well with the, the live type down below. 14:18 This one is fun. 14:25 Believe it or not, the, not the, not the 14:26 creep fest logo but the script font down below here. 14:28 Up at the top, that's done in homemade apple, and the body copy is 14:32 caps, and it works out well because this is Live Type and it's all 14:37 gonna be modified very easily, and they can add things uh,add new things very 14:41 quickly and easily The design of this site was also done all with Live Type. 14:45 I really like this one. 14:51 This one's kind of fun. 14:52 It's all done in, like, a shipping container. 14:53 But they've done a really good job, of placing 14:56 Type in their, their site, and using it well. 15:00 If you wanna look at the site as a full screen. 15:03 It's really cool. 15:06 Here's a fun one, this is not all using lag 15:09 type unfortunately but I really admire the way he approached this. 15:12 This is all using the font FFdax and it's he used it 15:15 it many different ways on the scene, all using one specific typeface. 15:20 All variations of that and it works really well. 15:25 This one I kind of like, and don't like. 15:29 They're using Georgia for the body text 15:33 and condensed, condensed sans typeface for the headlines. 15:34 But unfortunately, the headlines are not Live-Type. 15:38 They, they set that in images. 15:40 You don't really need to do that any more. 15:42 You can actually do all this. 15:43 With live type and the iphone phase call. 15:46 Either to, by self posting the fonts yourself ,or you can 15:48 actually choose a web font service and use them from there. 15:52 [BLANK_AUDIO] 15:54 Professional-wise, as a professional sites this is an interesting 15:54 design and so forth and some of you who 16:02 may have gone to Gino's talk yesterday about color 16:04 Are probably seeing the problems that i have with this. 16:07 The problems that I have with this is that the type itself, and 16:10 the difference in between the background makes it very, very difficult to read. 16:14 Granted, this, this screen may be doing better because 16:17 it's absolutely massive, but if you're trying to have someone 16:19 read it on screen, the difference in color between 16:22 the foreground and the background becomes a very big deal. 16:24 So, contrast is huge. 16:27 Because, not everything is always readable. 16:29 If you look at the ones in the upper left here. 16:31 Every time I give this it always 16:33 looks different on every single presentation screen. 16:34 But, things disappear and things fade. 16:36 You don't wanna set something using the upper, upper left or lower right. 16:39 You wanna use something that's in maybe the lower left or 16:42 the upper right because you're gonna have a much higher contrast value. 16:44 So, pay attention to the contrast and how you're 16:47 actually, designing and developing your sites specifically with the topography. 16:49 I also kinda wanna talk a little bit about legibility. 16:54 Many of you have a love, affair with Helvetica. 16:58 Helvetica is like, an amazing typeface. 17:00 It's been around for a really long time. 17:03 But there are some serious legibility issues. 17:04 And this also applies to Arial because Arial, 17:06 is obviously a kind of derivation of, of Helvetica. 17:09 So one of the things that I wanna point out 17:14 is if we're looking at type face here the, gill 17:15 sans is in the upper left, Fresco Sans is in 17:18 the upper right, and then Helvetica is on the bottom. 17:20 You can see that they're, they're subtly different. 17:22 But what happens is that the, the opening of the c here. 17:24 Actually starts to close up with Helvetica. 17:30 And that has some pretty serious implications for readability 17:32 and how people can actually read more quickly, because, at 17:34 smaller type sizes, and if people are scanning quickly, 17:37 that c can quickly and easily turn into an o. 17:40 So choosing something with an open or, open counter here. 17:42 LIke the, the Fresco Sans. 17:45 It's gonna be a much more readable typeface on screen, 17:47 and this becomes even more critical when you dive into numerals. 17:50 And, numerals can be, incredibly hard to parse the differences. 17:54 If you're looking at, Helvetica at the bottom here. 17:58 The six, is almost closing out the eight. 18:01 And the, the nine are very, very similar cuz the six and the nine are very similar. 18:04 It can be very difficult to read, for people to read this quickly. 18:09 I heard a, a story once about a device manufacturer who made medical devices. 18:13 And those medical devices, you know, the ones that sit by your hospital 18:18 bed and beep and tell the doctors various things, need to display certain numbers. 18:21 So they can actually understand how you're doing. 18:26 Well, would you choose Helvetica, to put 18:29 it on a device manufacturer, on that device? 18:31 Probably not because it may be critical to understand if that's a six or a nine. 18:34 It can be very, very different for your 18:37 prognosis, so device manufacturers are very keen to understand. 18:40 How people are gonna read things, how they're gonna read them quickly? 18:45 So they would probably be more likely to choose a fresco 18:48 sans in apple white or maybe even, you know, something else. 18:50 not [UNKNOWN] or Helvetica and Arial has the same points. 18:54 Let your type face communicates Can actually be very problematic. 19:00 Some of you may know this website, Fresh Direct. 19:04 They do salads and foods and things like that. 19:07 Well, they had a campaign not too long ago 19:10 that actually, caused quite an uproar in the Asian community. 19:12 This was the Fresh Direct stir fry kits. 19:14 And the kind of chop suey top, typeface there is not 19:19 exactly something you need to really use to communicate Asian food. 19:23 We have, Asians integrate into society, all 19:27 levels of society in the United States. 19:31 You don't always have to do this. 19:32 You can choose something that's creative and 19:33 interesting and still, have it say Asian food. 19:35 Lets 19:37 get back into some fun stuff here. 19:39 This is actually something that's going on right now funny. 19:41 I've had this in my presentation for months and I really 19:45 like their use of type here and how bold it is. 19:47 This one here is actually kicker. 19:51 It's Live Type in the middle there. 19:52 And when you're using typefaces, you can 19:56 actually have some really fun, interesting things. 19:58 This was something I, I, I went to Europe not 20:01 too long ago and I had to book a train. 20:03 And I just found this one by happenstance. 20:04 This is. 20:07 A Fresco informal type base and if you look at 20:08 the, at the beginning letters here, the t's and the s's. 20:10 You see those little hooks? 20:14 That's actually, in the web font. 20:16 This is a customized version of Fresco informal that, Fred Smires over 20:18 at our type customized for this very site, and for this very purpose. 20:23 And it does a really great job of tying directly in with the branding. 20:27 So if you, if you look at Eurostar up here. 20:31 Their, their logo has this little swushy deal here. 20:32 And that kind of, does a great job, to communicate this. 20:35 And of course, these things can change. 20:38 You can change that in an, an instant. 20:41 I can go in there and type in a new special. 20:42 It goes up right, right away. 20:44 And the typeface is. 20:46 Display properly and show exactly what I want to have. 20:47 Of course, this would also work really well for Febreze. 20:50 They've got that nice little swooshy as well so, why not. 20:54 Here's a fun site that I wanted to show just you can see, kind of an example of 21:00 what you can do with typography and this is 21:04 maybe not as realistic as you might think here, but. 21:06 >> [COUGH]. 21:10 >> Are we back up? 21:10 There it goes. 21:12 That's okay. 21:13 So this one's kind of fun in that, they're using a type for navigation. 21:14 It's fun navigation. 21:20 Interesting and different. 21:21 But it kind of ,modifies and changes as you drag over it. 21:24 I also want to step through another couple of examples here. 21:31 We have SB Nation. 21:34 I'll just doubt, dive right into the website here. 21:36 This is one that came up in, a session that I do. 21:39 I do a number of, different workshops, and sessions, and training. 21:42 And people often give me examples. 21:46 They're like, can we go in and dive in to the site? 21:49 And this one. 21:50 Actually this is the live page right now, so 21:51 I don't know what's going on with that background. 21:53 But, its kind of crazy. 21:54 That guy with the mustache kinda creeps me out. 21:55 >> [LAUGH]. 21:57 >> But the, the, this site does a really 21:58 good job of using typography, in an effective way. 22:01 With effective visual hierarchy as well, so you got 22:06 that very fat slab serif type face here at the 22:08 top, for their logo but then you come in to 22:11 their menu systems and you got a condensed all caps. 22:14 And using all caps is something that is kind of I, I would say restricted 22:16 to these kind of purposes, so using all caps in your menu systems, works well. 22:22 And then you scroll down here and you see their slab 22:26 serif that kind of hints at their, their logo as well. 22:28 But then when you go into the site itself, 22:31 you get a visual hierarchy here where you sort of 22:34 have to give a something that maybe of the same 22:35 family and then diving down into the actual articles themselves. 22:37 It's smaller and a nice readable sans serif typeface. 22:44 I also wanted to bring up another one that doesn't use web fonts, but 22:49 I actually like the, the hierarchy of their site, and that's the NPR site. 22:51 NPR site I like it just used Georgia, I believe. 22:55 And trebuchet maybe. 22:59 But they're, it's a very easily understood site. 23:02 So you can, you can come in and you can see, okay, Georgians in the headlines, but 23:06 then in the body copy, itself, one of the things I want to point out is that. 23:09 They have a, A nicely sized type this year. 23:13 A lot of web sites you go to and people have like 11 and 12 point type. 23:16 It's ridiculous. 23:19 It's tiny, it's, it's really hard to see and read. 23:20 So, they bumped up the point size here, this is probably 23:23 16 point type, and they've also bumped up the line height. 23:26 So, if you bump up the line height, and you bump up the. 23:29 The point size. 23:31 You're gonna have a much more readable site. 23:32 Also, make sure that when you're, when you're dealing with 23:34 the character width, you go from 35 to 75 characters wide. 23:37 That's optimally readable. 23:41 So, if you get any longer than that, people have 23:42 a tendency to be able to read more and read faster. 23:45 But, they tend to lose the lines. 23:48 You know, so they might have to start a line over. 23:51 There's been a lot, a lot of research on it, 23:54 and this is still the best way to do it. 23:56 If you dive in to the NPR site, you can see that even 23:59 on their main page, they've done a very good job of a visual hierarchy. 24:01 Alright. 24:11 So I have a couple of different. 24:13 >> [COUGH]. 24:14 >> Examples here. 24:15 One that I wanted to show you, is, how typography has been used in film. 24:15 And how closely tied it is to branding. 24:21 [SOUND] So here, I don't know if he have the audio. 24:25 But this is, the opening trailers for a movie called. 24:27 Thank you For Smoking. 24:31 And,the one, the, the great thing that they've done is 24:33 they've actually used typography to kind of visually show you 24:37 that yes, these are, packs of cigarettes. 24:44 Anybody who's looked at a big whole rack of all of the. 24:49 All the cigarettes will know that these are, these are very common brands. 24:52 Or they were common brands. 24:56 Now, it's too bad I don't have audio. 25:08 Is the audio guy back there? 25:10 [MUSIC] 25:12 Cuz the next one is actually really, cool with audio. 25:13 So, this is a video that was done for John, Jonathan Coulton did for a song 25:17 called Shop-Vac and unfortunately, if we can't hear 25:24 the audio that might be a little difficult. 25:27 Lets see how this goes. 25:29 So, it's a song all about, like, the shop vac. 25:32 >> [LAUGH]. 25:35 >> So, this is, you know, kind of, you've probably seen some of these videos online. 25:36 This is all connect to typography. 25:40 But the thing that I wanted to point out is that, when you get to a certain 25:41 point in the song you can see that the 25:44 there certain brands that are really, really well represented. 25:46 So. 25:50 There'll be a couple real quick here. 25:53 What's this one? 25:55 Walmart. 25:56 Macy's. 26:00 >> [INAUDIBLE]. 26:02 >> And then of course this is all shop vac. 26:06 Tied directly into their branding. 26:11 [SOUND] And the audio is basically 26:13 it's loud with the shop-vac on, and of course, made on tv or as seen on TV. 26:22 Alright, so this is just to show you an example. 26:27 In this next one, I really wanted to have 26:33 audio again, but we'll see what we can do here. 26:36 This is kind of a, this is, Ellen Lupten and 26:42 her students did a video, that talks all about typography and. 26:45 I think that there might be enough text to actually, so you can read this, but this 26:51 kind of gives you a basic primer, about typography 26:55 and it's also done in kinetic type as well. 26:59 Alright, I'll play this one in its entirety. 27:06 [INAUDIBLE] 27:08 [BLANK_AUDIO] 27:26 So, they're basically talking about the different parts of the typefaces here, so. 27:34 >> [COUGH]. 27:43 >> Understanding how that affects your design. 27:44 And how, you wanna have type displayed in your site. 27:47 And how it reflects your brand. 27:51 [BLANK_AUDIO] 27:52 >> Alright. 27:59 This is, this is much more interesting with the actual audio, itself. 28:00 I apologize. 28:03 [LAUGH] 28:04 So one of the things that I like to do when 28:07 I travel, is I like to examine how type faces are 28:08 used within an actual community, and see how different brands have 28:12 actually used type faces well, or maybe sometimes not so well. 28:17 So, I was in Paris not too long ago and this sign, this actual store. 28:21 Has used a really really fun way, has a really fun way of dealing with it. 28:27 They have taken their Metropolitan, and they've kind of shortened it here. 28:31 And so, now they're only using this apostrophe. 28:35 So these are actually on the signs, on the street, in Paris. 28:37 And if you're walking down the street, you don't have to see the full sign to know. 28:40 That this is what this company is, so you can 28:44 go, OK, this is the drug store on the corner. 28:47 This is where I need to go. 28:49 Granted their online presence hasn't changed to match that yet, but it should. 28:51 Vegas of course, doesn't exactly have the best. 28:59 Typography after, what is that, it's, I 29:03 think it's supposed to be After Hours Clubwear. 29:05 But their signage is just so poor, they should have 29:08 just paid a little bit extra to have that done well. 29:10 Also, even like, in multimillion dollar theaters, there's this 29:13 Blue Man Group of course, people have probably seen this. 29:17 They, this, they've set up a display, this is like this huge entry way with all these 29:20 flashing lights and they have these monitors set up 29:24 in such a way so that you can see. 29:26 The, the different guy's faces and it announces what it is. 29:28 But yet, the problem that I have is like why, why did you do this, 29:31 why did you want to spread it across 29:34 multiple monitors so the kerning looks so bad. 29:35 I mean that's, that's the first thing, it just 29:38 screams to me, it's like ahh, I can't do that. 29:39 I was just in Chicago as well and if some of you have been to Chicago, know that a 29:43 lot of these buildings have these amazing, old brass signs 29:48 on them, just really cool stuff all over the place. 29:52 But, sometimes they're not used with the best success. 29:54 I came by this Fornelli Tower. 29:57 And I was like, well this is, yeah this is a nice sign over 29:58 here on the right side but, I don't know what in the heck happened. 30:01 Why, why did they decide to bolt on, another bit 30:03 below this and not try to even match the typeface? 30:06 It wouldn't have been that hard to do. 30:09 It just kind of ruins their brand there. 30:10 Either that or change the entire thing because. 30:12 If you're looking at this over here, this is clearly their, 30:14 their changing the branding and going with the sans serif type face. 30:17 but, why not change the actual big plaque as well? 30:20 And these are, these are really huge, really gorgeous plaques. 30:22 So, I do have a few pet peeves that I want to share, I'm sure everybody 30:26 has their own little pet peeves And I'll, I'll start this off with, with New York. 30:29 This is just down on 34th and 9th. 30:36 I walked down there this morning and took this picture. 30:38 And, some of you may see it down in the left hand corner already. 30:40 Yes, it's already broken and falling apart, but it's our old friend, papyrus. 30:43 And, papyrus is just used. 30:48 >> [LAUGH]. 30:50 >> Everywhere. 30:50 I hate Hate it, I hate it. 30:50 It was, one of those things that was used all the time 30:52 to mean, natural food store, or I'm a massage therapist, or whatever. 30:55 For the longest period of time you could sell lemon snap cookies with it. 31:01 You could sell sesame snaps with it. 31:04 You could. 31:06 So, Oregon historical posters, oh, those aren't even posters, those are calendars. 31:07 And believe it or not, Edible Arrangements 31:13 right now still uses papyrus in their logo. 31:15 To me it just screams like, you know, this is a multi million 31:17 dollar brand that's all over the United States and they still have this. 31:20 It just looks so unprofe, unprofessional to me. 31:24 And the, of course. 31:27 Somebody needs to really slap this guy. 31:28 >> [LAUGH]. 31:30 >> James Cameron, for this. 31:30 This is really annoying to me I mean really do you need to? 31:31 Does that really mean earthy? 31:35 No, I want something that is readable and easy to understand. 31:36 I don't necessarily need it, in my subtitles. 31:38 I did find one use though that I really liked. 31:42 This is papyrus or is it Toot and Common Ale and papyrus isn't used on the label. 31:44 I think this is actually appropriate. 31:50 There's another one that you may have seen before. 31:54 And you may not have actually, narrowed down on it quite yet. 31:56 But ,this one's very popular with musicians. 32:00 Does anybody know what this one is, yet? 32:02 Bleeding cowboys. 32:05 Gotta love bleeding cowboys. 32:07 It's popular in tattoos. 32:08 >> [LAUGH]. 32:10 >> Yeah, this last one, yeah just let that sink 32:11 in for a second, jeez I just really don't know. 32:15 But then of course, there's you can use it 32:20 for prayer, and even to sell durdles and ladenhosen. 32:22 That's in Munich. 32:28 >> [LAUGH]. 32:29 >> And then, there's of course, the situation. 32:31 Boy. 32:33 >> [LAUGH]. 32:33 >> But if you want to use it for 32:34 your own, barbecue cookout, that's probably an okay use. 32:35 And I want to leave you with just one other thing. 32:39 And if you haven't seen this before, you have to kind of go check out. 32:42 Go check out [UNKNOWN] Cars. 32:45 It's just so bad. 32:47 >> [LAUGH]. 32:48 >> In so many ways. 32:48 But it's so fun, I mean, their their type use 32:50 is awful, every other thing in their side is actually, 32:52 pretty awful but, this is done on purpose obviously to 32:56 draw attention to them and bring people back to their site. 32:59 So I'd like to encourage you to carefully consider your 33:02 type face selection, well done, your type is always in style. 33:04 It always creates a visceral reaction as well. 33:08 So, well consider that when you are selecting type faces for your project. 33:11 I do have a bit of additional reading and then my contact info is down below. 33:14 You can tweet me at Jim Kidwell, or email me directly. 33:18 I'm trusting you to not. 33:21 Um,you know me. 33:23 Crap. 33:24 But, if you want to read the bible about type use, read 33:25 Robert Bringhurst's book, Elements of Typographic 33:29 Style is the bible about setting type. 33:31 It, has more information than probably would ever want 33:33 to know about type design and type, development and placement. 33:35 Getting It Right With Type by Victoria Squire, is also a very good book. 33:39 She does a great job. 33:43 If you're also doing print design, she also says that 33:44 considerations about paper also, and she talks about that as well. 33:46 Branding With Type, I, I'm sorry, I'm not even gonna try. 33:50 But, branding with type is also a great book 33:54 that talks about the connection with branding and type. 33:56 And then we've also the company I work for 33:58 we've collected a number of type resources at webinc.com/typeresousrce. 34:02 >> [COUGH]. 34:05 >> And if you go to that page you will see all sorts of links and information 34:06 about setting type on the web and putting 34:10 things together and how you can do it best. 34:13 so, that is, that is the end. 34:16 Thank you for. 34:18 I don't, I don't know if we have time for questions. 34:19 [CROSSTALK] I don't have time for questions. 34:21 [NOISE]. 34:25 So thank you. 34:26 [SOUND] 34:27
You need to sign up for Treehouse in order to download course files.Sign up