Transcripts
1. Class Preview: lots are essential. They play a big part in design things classical of those types, weight hierarchy had the use, fonts and advertising by the end of this class has a great understanding about having use fonts on almost any aspect of design. I'll even show you where I find my favorite bonds. Let's learn together.
2. Font Types: it's time to learn about fonts on Dive into the complicated yet simple world of fonts. So let's go ahead and get started. I am actually in Adobe Illustrator, but you can absolutely do this and Photoshopped as well. Um, kind of the same kind of structures and both, but I'm going to start out an illustrator just because a little bit easier to use when it comes to showing fonts. So there's a couple of basic things about Fonsi should know right off the bat is Sand, Sarah and Sarah for what is a Sarah. Let's type in Sarah this. It's not a Sarah font, so I'm going to change this to something that is, Everybody knows times New Roman. We all had to do our term papers and times New Roman at 12 points. Eso Let's go ahead and click on times. Roman, this is a Sarah off. So I'm gonna go ahead and zoom in this little object right here that's hanging down. That's a Sarah. I'm gonna go ahead and put a red box around it and all show show you what else is a serif? Ah, this little guy right here that's hanging down these little accents. It actually helps people to read when it zoomed out. Far this little Sarah's can help us know that our is in our a little bit better than one. That's without Sarah offs, which is called a San Sarah font. Ah, Greek or Latin for the word sands is without so without the syrup is Sands Sarah. So that's where the sand Sarah termed, comes from. Um, so let's pick out some other ones. There's a serif right here. They're at the bottom of all of these characters. They're all Sarah's. That's what makes this distinct. So let's find a sand Sarah font. Go ahead and type in Sands Serif. What is the most popular Sand Saref in the world? While I'm gonna go ahead and tell you and you probably argument, be familiar, it's Helvetica. Ah, the New York subway system uses Helvetica for all of their fonts and the library and the government and a whole ton of people in Europe. They love Helvetica, so this is kind of your standard Sand Saref and its Sand Saref because it does not have these little guys at the end of the letters. It's without the Sarah so when I refer to these terms throughout the rest of this class. Ah, when I say Sarah figure to know exactly what it is, there is no Sarah. They're just just a nice clean font. And then there's another type of font called the script font. So let's go ahead and type that out script. And what is a popular script fought? Well, there's not one that's particularly more popular than the other. There's a lot of hand written ones that are really popular these days, but let's go ahead and choose kind of the generic one. Let's see muds type in this sun arrow light. That is your script font. It's gonna be a cursive, and the letters are gonna continue to flow there, see how they're just continually flow into each other, and they do not stop. So that's your standard script font. There's a really popular style these days with kind of a hand written script font, which will learn all about Ah, this is kind of hand written, but it's not a technically script because it's not joined together, was fined one that is that kind of hand written style. I have probably thousands of fonts installed over all these years of designing, uh, let's see. How about this beginning yoga that's not quite connected. So let's keep going. Find that hand written style. Here's one broadcast matter. There we go. There's your script. You can con asi it connected on some of the lettering, and that's kind of a popular kind of rustic. Looks like it's been rushed by a brush so headline or ah, headline goes here. You had a really cool headline already. Put that over a photo, Make it red, make it pop, and he already got something going on. This is kind of your basic categories of font. You have the hand written script, the classy script, the Sarah Font. And now we know what a sand Sarah Font is because we know it's Arabs are. So now that we got started, ah woke ahead and get started with the next class
3. Font Weight and Sizing : All right, welcome back. I am actually in Photoshopped right now. I'm going to go back and forth between the two programs so you guys can see that when you learn how the do fonts and photo shop you will learn how to work with Johnson illustrator because they have the same exact options and set up in both programs. So here we go. We're in photo shop. I got to go and click on your flock and let's get started with a font. Um, so we're gonna do kind of a fake company and they were gonna make a fake company ad and headline throughout this class to kind of show you how to use sponte and sizes and learn more about how how fond is structured s so I'm gonna go ahead and do ahead of our actual company name. It's going to called shoe styles this constant silly. I made up. So let's go ahead type and shoe styles, and I'm actually holding down the ship to make it all caps. I'm gonna highlight it. Obviously we needed show up, so let's just make sure that's black. When you're doing a logo, you always have kind of your main logo, Mark or Ah, your company name. But then sometimes you have a byline or a tag line that's gonna be smaller. So let's make the shoe style bigger. So we're gonna hold down shift. This is our main company name, and we're gonna use font sizes to really help us dictate to the user the viewer. What's more important? So I can either ah, goto layer duplicate layer. Or I could just go back and create my sub line. So ah, shoe US shoes For any type of person, this is kind of a made up thing. You put a period at the ends. It's kind of a slogan, and so you can see I'm already using font sizes to dictate to the user. What's more important, this is more important. This is the actual logo name she styles, and then shoes for any type of person is below eso. A lot of times you could do more than just do sizes. You can actually change the font weight and so far out weights. This is what font weights is. Let's go ahead, double click. This wait is very important to the structure of a of text so the heavier it is, the thicker and boulder it's going to be in the lighter it is the thinner, the little strokes of all the different, um, font lettering is so let's go ahead and pick a font that has lots of nice waits. Not every font has a whole list of weights. Some fonts only have light metallic. Some just have bold and normal. So I usually like to work with fonts that have quite a wide variety of weights. And one of those fonts is called Railway. The type of incorrectly R a L e way. Look at all these different ones we have. So I'm gonna go and click on our main railway. Thought we can always change the weight later after we select it. So I'm gonna go ahead, double click on this, and I'm gonna go up to the here to this panel. And right now it's on bold. But there's also thin so you could see how that has a really nice look to it. Actually, really. Modern, sleek, thin weight is very in black is also in for really bold headlines. So we could put a red background on this and make this thought yellow. It could really pop out with that nice, bold lettering. It's almost like you're yelling at someone like Listen to me. No, this is my headline. Eso you can really use weight And a lot of times I don't like to use a similar bold weight on two different fonts going on. So here's what I'm gonna do. I'm gonna make sure these fonts match and I'm gonna do different weights. Toe have a nice contrast between the two items. So let's go ahead and double click on this. Let's make this railway as well. But I'm going to do railway thin. Um, actually, I'm gonna do railway light because then actually might be so thin if you were going to a zoom out, you might not even be able to read the fought very well. So let's actually make that just a touch boulder. You never want to go to too thin. Let's do light, See how that works. So you see how there's a really nice contrast, really nice balance between its nice, thick black weight and this light weight on black is actually bolder than bold. So you have the bold level and then black is actually superb. Old don't know why they just don't call it Super Bowl. But that's kind of how they haven't set up. So you can kind of see how we quickly used font sizes and also saw font waits to kind of create a hierarchy. And so then body copy, which is anything that would be in the copy of an ad or the advertisement is always gonna be even smaller than the sub line. So let's go ahead and do it quick. Body copy. So body copy will go right here in this area on the Y. This is on white, actually. Make this black course, Uh, what I'm gonna do, I'm actually gonna make this instead of all caps. Miss Eva having on a have this on all caps. I'm actually in the character panel on your unsolicited all caps, and I'm gonna do some quick brain judgments, and I'm just gonna do command C, which is copy and command v a couple of times to kind of get our test copy here. And I am just pressing Enter. This is just really quick to kind of show you the hierarchy of fought wait and sizes so this will be your body copy, and you always want to make sure your body copy or description of whatever you're selling is much smaller than yourself, your logo or your sub. You know, whatever your headline or byline is, so we can always make this a little bit smaller. And since it's smaller, we can increase the weight size to make sure it's readable. Let's do a nice and medium weight and look at that hierarchy we have. Everything's could be your headline or your logo. Name your byline, your sub line your phrase and then you have your body copy. And then down here, which is pretty, pretty much be between this size and this size, you're gonna have a called action. That's a website. Let's actually do that right now. Let's do www dot shoe styles dot com and notice how I capitalize the different words in the website. I feel like that's a whole lot easier for the user than to have it all lower case, and as we know, it doesn't really matter on the Web, whether we type in lower case Esther upper case, but to the user into the viewer, it helps break it up a little bit. So since that is a very important thing called the action, let's make it black weight. And so look at that high our feet. And then, of course, we could make this stand out by putting it behind a red box or different color. And so we kind of have nice hierarchy. So there we go.
4. Font Spacing and Hierarchy: okay, we're back. And so we learned about hierarchy of weight and using size to really create this nice balance. So now we're going to do a separation between letters and separation between elements to create an even more polished look. So I'm gonna go over first was called Kern ing on. This is a great way to make are really high end fashion logo is adding kern ing, which basically just means you're adding space between each one of these characters. So let's go ahead and type in a go ahead and open up a new document. I'm just here in photo shop. Let's make sure we have a white background gonna lock this layer, create a new layer. Okay, go ahead and type in a fake company. So fashion now not very creative in terms of my copyrighting, but this is just for an example. So let's go ahead and we're gonna add Kern ing or spacing between these characters to kind of give more of a dramatic look. So right here is where you can adjust The spacing I am in the character paragraph are the character menu. If you cannot find it always if you can't find anything Goto window, and they will be able to find it right here in the character panel. So character and also paragraph or two windows that I always have opened When I'm doing font editing and I already have thes both open right here. So in the character panel, I'm gonna go ahead and create. Uh, this is what happens if I reduce the spacing. You could see how it's pretty scrunched up, which can have its own desirable effect if that's what you're going for. But we're gonna do the opposite effect and we're gonna do 200 and you can always type in a manual number. You can make this 801,000 spacing. Let's do 800 just to come to show you I did 800 spacing between the pot and I'm actually gonna hold down shift. I'm to make this smaller hold down shift so I can kind of show you. So I kind of see how that as its own kind of high fashion high end look, you can really do a lot of high end brands with unit using white space in between the characters. Um, so there's that. Let me play around with the weight. This is on black. But what? What does this look like with light? That looks really nice. I like that. I'm actually gonna duplicate the duplicate this layer, and it's gonna go ahead and have the same things. All I did was went toe layer, duplicate layer. I have the same thing now I'm actually gonna do bold and I'm gonna play around to see which ones I like better. That's a talent which has its own look. Let's do black regular. You could see I could do fashion now the best place to sh Let's bless pit place to shop online. And we're gonna reduce the spacing of this sub line. Let's reduce it to zero. Make it law. It's a lot smaller. We don't want it to compete. And actually, I'm gonna not create such a dramatic spacing. Let's actually make this 400. It's cut it in half. I'm making a little bigger, and I would actually adds more spacing to this one, but not as much, because I want to have a hierarchy. I don't want everything to have the same amount of everything. Have things have a little bit different style. I could actually make this unclip all caps. I actually think I typed in all caps. Let's type that again. The best place to shop online. I don't think too needs to be capitalized. What is kind of creating some quick graphic season bonds And OK, so both of these are set to non metallic. But what if we went ahead? Continued to differentiate these two lines so they don't compete, compete with each other? Let's make this a Talic. We're actually you to do a light italic. So you noticed. Now, that really breaks these two items up a little bit. Um, and I'm gonna go ahead and drag this up and what I like to do when Okay, I feel like that's great, But I want to play with a little book war, but I want to keep this so I'm gonna actually get a layer actually selected both of these. I'm gonna go toe layer duplicate layer. I'm gonna drag it down, and I can play with it a little bit more with other fonts and compare the two to see which one I like better. So let me try died dot That's actually a Sarah fun. Let's see what that does die, not issues. In a lot of high fashion stops, let's do died out regular So you can already see that being kind of a cosmetic brand or, you know, in any like that. So, uh, since this is now a Sarah, let's make this our, uh yeah, Sarah, we're gonna make this one also a Sarah. Let's stick with the same font family that usually works very well, So let's do die dot italic so you can kind of see definitely some different. We're using the Sarah Ifs and the Sand Sarah apps and reason. Different fonts and weights, and you can really see how they have different personalities. Let's actually create less spacing once but still have spacing. Let's do 200. Make this a little larger from were Impact and let's see if we could make this up older. Wait there. We do have a bold excellent Let's go ahead. Oops. Okay, so I think we kind of played around with two options. It's kind of up to you what you feel like works best, but that's just a great way to kind of play around with not only weight but await hierarchy a Tallix spacing are koerting between the letters to kind of create kind of a more of a polished, edited and finished look.
5. Using Font In Design: Okay, Now that we've learned a lot about flaunts, let's go ahead and create our first ad and headline to see how we can use fonts to make a headline that really pops out at you. So I went ahead and downloaded this little kind of generic photo, and we're gonna make a little bit of like a social media post. So I'm gonna go ahead. I'm just cropping this a little bit at the bottom. Now we're gonna put her headline a top We can always put graphics coming out of the chute gets stand out more. But we're really gonna use font as their main draw. Let's go ahead and get our font tool. Let's type a headline Ah, wish I can crowd source this and get your ideas of what a good headline would be Um, but listens, type and shoes are for life and I'm going to do Shoes are for life. There's a lot of ways we can work with this headline. So I just held down, shipped and dragged bigger, and it scales perfectly and I really want to do a sand. Sarah thought I think that's going to be a little more modern So let's go ahead and double click on this. Let's go to our trusty railway. We're going to do railway. I think I want to go is bold and black as I can, so I'm gonna use the black weight. And not all fonts have a black weight. Real way just happens to have all weights available. So shoes are for life. And let's go ahead and have a called action. I'm just gonna duplicate this layer so I could already have it set to railway. And I'm gonna do www dot shoes dot com. This is all just just for fun. We're not gonna win any creative copyrighting awards, So let's go ahead and reduce the spacing or current in between the letters for the website . Uh, so let's go ahead and make that zero. And I'm just in the character panel, Okay? W and notice how the www really competes with the rest of it because that those W's take up so much spacing off this total item here. So how can we reduce that a little bit? Let's use font waits to create a little bit of a hierarchy. Eso Let's actually make this light. We're making re selecting this area, making it light. Let's make dot com light as well. And so you can kind of see how the main headline are The the main website actually shows that more than this extra stuff that really doesn't matter as much anymore. So let's go ahead. Actually dragged the shoe up, we're gonna put the called action underneath. Let's make sure we have a white background remaining. I'm gonna lock these layers, so I'm gonna have happy with the placement of those. So how can we make this stand out even more? I think this is too big. I think it's competing too much with the headline press Enter Slide that right under the shoe because it look at the shoe and then they look at the the website afterwards. A lot of people don't use Www, so you may not even need that, but it actually creates a nice balance. You have something to left something to the right. I'm actually a highlight this and reduce the size of this just a tad so that shoes is actually even bigger. There we go. That could actually increase the weight ever so slightly because that light is just not showing up when it's smaller, but that's no problem. Regular. Okay, so shoes air for life. So let's add a period so that we feel like we're making a statement. And let's actually do the opposite of adding spacing. What if we actually decrease the spacing? Maybe not quite as much. What does this look like? So now I'm able to make this bigger and stretched across, and they get even more powerful just like that. So what can we do to make this pop even more? We can add a little bit of color to this. Ah, so let's add a new layer. I'm gonna dio kind of a orange yellow color here. I'm just gonna draw, and I just have your tool appear your selection tool. Okay. And I'm just gonna go from 1/4 to the other. I was gonna create pretty much cut it in half diagonally. Take your feel tool. I'm creating a new layer. I'm adding this orange color and I'm dragging it down so that the font is above this little box. Now live this triangle. Let me see if I can change the blending mode here and I'm gonna take I'm gonna unlock this shoe layer and dragon above. It's going to a couple of quick things here, and I'm going to get the selection tool for this magnetic lasso tool. And I'm just gonna very quickly cut this out. It's not going to be the most brilliant cutting out job I've ever done. What? We're just cutting a little bit of that out. Okay, so now that I haven't selected Oops, Uh oh, no. Go now. Good press, delete un select and have a little bit more here. I'm just gonna continue to delete hold down, and I'm gonna get the polygon lasso tool. Select some of this white stuff we don't need. Go ahead and delete that. Here we go. So, yeah, not a smooth as I'd like it to be. And I could sit here for another 10 minutes and really cut it out smoothly. But we'll do that in another time. Good for another video. Maybe add creation video. But so let's go ahead and put our tagline. I wonder if we left justify this. So there's left, justify, right, justify and center justify So they all have their own ways of being useful. So let's actually go up here. We're gonna click on left just by And of course, there's also right Justify which is gonna align everything along the right side but still aligned everything along the left side. So now when I double click and put it on another line, it's all aligned down the left side. But there's a lot of spacing between these lines now. Why is that? Well, you need to change the spacing between the lines, and the best way to do that is to go to your character panel. This is where you change the current ing or the spacing between the lettering right above is where you change the spacing between the lines. So let's go ahead and make it. Since that's 108 let's do 130 just to see what that looks like. I wanted a little closer, so let's do 1 20 Okay, I didn't create right here. So it is seeing if a left justify it's gonna work with this. Particular adds, we kind of have a color on the left. We can have a headline here. It actually do our tagline over here. So your eye goes from the left than to the product and then to the right. So that has nice flow. Uh, let's go ahead. I'm being very picky here. Delete some of this because it's a little bit gray, not white. I really want to White. So I'm just being picking year. So obviously we need to add texture or something else to really make this pop. So I'm really feeling like, Hey, let's go back. Let's go back to a single line Shoes are for And you know what we can do? We can use size to make a better hierarchy for this headline. So I'm actually gonna go cut this life out, and I'm gonna create life on its own line. Independent thought here so I can actually make this much bigger. We're gonna take shoes are four on a double click that are gonna make this a light bought. I'm gonna put some space in between it Light font looks really good with some spacing. Maybe not quite that much shoes are for life, so you can kind of see how this adds starting to feel a little bit more filled in. There's hierarchy and differences between the elements which kind of makes it feel like it's one unit. It's kind of flowing well together. Let's make that a little bit bigger. Let's actually put the spacing. It's all about experimenting, so we're gonna just continue to make the spacing on that a little bit smaller. Let's actually make that see what extra light on Love Railway? Because it's got every weight imaginable and we no longer need that period that's really getting in the way. Now let's move this a little bit right here. Actually, make our shoe bigger. Shoes are for life. It's like, Well, downshift. Let's go play around with this to see where I like it. So I wonder if, if we make this a different color, will that pop out more or less? What's sick? And I dropped Tool. I'm just gonna play around with some different things here. Let's make a white and let's add a drop shadow. So I'm gonna double click on the layer. I'm adding a drop shadow to it, Gonna increase the size in the distance. Okay, I think that's gonna work. We could always play around with different things. Maybe we do. Shoes are for and have life out here or have it here staggered just really depends on kind of what you're going for, but actually reversed. Put this around. Oh, I like that that works so much better than it was before. Just experimenting there a little bit. I flipped the shoe horizontally, and now this all kind of flows and tucks into each other. It's really nice. And what I would even do is maybe even have some of the font hidden by the product, which all have to do is change the layers here. And since I cut out that white background and off the shoe, I'm able to do that. See that? And now that it's all over a color background, I really don't need this drop shadow anymore. Let's make this even bigger. It's really make this, Ah, high impact kind of what it's double click. It's like this 333 That's pretty big shoes are for life, and I want to make sure it's not so big that you can't read the ego. Always gotta make sure every letter is readable. Get rid of that little bit of a background showing through, and let's actually view this at 50% so it done looks pixelated. You won't see what we have here. This is a quick way to use fought hierarchy sizes, waits, Kern ing spacing between Pont's to really create something special very quickly. Let's double click on this, and it's just now I'm just noodling around with everything. I'm gonna make that actually medium. Let's make that 44 about 77 about 70 fives at the winning number. Let's actually make that bold. And I think we haven't. Of course, you would add some texture or something else to kind of make the shoe pop out. It's a very boring shoe. We could actually maybe add another contrast in color outside of white and then make this that color lots of things we could do. But this is just a way to kind of play around with headlines and bots.
6. Where to find fonts? Bonus Video: All right. Welcome back to a bonus video. I'm gonna show you where I find all my different fonts for downloading, especially some of my wacky crazy fonts that he used for headlines. I'm at a website called Duffen dot com d e a f o n t dot com and you can find quite a wide variety of fonts on here. So you kind of find some of the trendy script headline flaunts I was talking about in the first video. Ah, those air couple examples of funds in pretty bold, thick Pontes You can come on, come on here and find a wide variety. It's kind of clicking around, but see, now that we know are our farm types, we could be able to look and see which one we want the best. Of course, we see our script. There's also Sand Sarah and Sarah on here, So if we know we want a Sarah font, we can go and click on Basic and find a couple of nights. Sara fonts. Ah, this one's used in a lot of movie headlines. It's been kind of see, there's also sand Sarah checkouts and really nice ones that you can use and these air free to download. You just need to check to see if we need to contribute any kind of copyrighting to the author or if it's free to use on anything. So just make sure you check that out on any any form. Download online. And if you wanna download ah ah, premium font or go ahead and purchase upon, you could go to my fonts dot com. There's also several others that you can go to, but this is this one I've used in the past, and you can actually look up any font. So if I type in railway, which is what we used earlier, uh, I guess they don't have it. Let's see, Let's see what a best seller is. There's some really beautiful fonts, just absolutely beautiful. So since about, click on this norms and I believe they're usually like $30 for the set. This one's actually 18 Fonsi for hundreds of this, a little pricey, but if you were gonna be using it for maybe a rebranding project for your company, definitely want to be able to purchase something, make sure you have all the copyrights in place, but the great thing about purchasing Bonds is you're gonna get the thin font, but you're also gonna get all the way to the boldest Available is you're going to get quite a wide variety of what foreign waits toe work with wishes this fantastic to have all those options. But there's also several free fonts out there. Just just Google free fonts for download. The only thing is to make sure you have the copyrighting to be able to use that bond if you were gonna use it on a T shirt to sell Oh, are something else when you reproduce the plot. Um, and that's just kind of my bonus video on some wacky fonts. I'm actually gonna go and show you a couple ones. I'm all the stew. Wacky, fought, just kind of showing you some some of my craziest, wacky ones. I found this one's really cool. I showed you this one earlier. It's broadcast matter, and I have so many different crazy ones that you could find us once that you could use for headlines. So I'll just type in Headline goes here and this is actually Cocoa Goose letter press. I've used this one on a couple of Ah, uh, actually, for a men's branding thing I did for that focuses entirely on men. I've used a couple of his, ah, rustic fonts. We'll see what else we have here. This one's nice. Kelowna rounded. They kind of see how you can use fonts to really create a personality with what you're trying to create, what you're trying to say. Ah, this is lemon yellow. This has kind of a fun, useful appearance to it or Sol Ivan. Let's see which you can always do. You don't have to do all caps, some fonts. That's all they have is all caps, and you just have to deal with it. Um, but some have options. So eager naturalist. That's not my favorite. Let's do a couple more for fun. It's kind of your Star Trek kind of thing going on here. That's to just a few more. I have thousands of these guys. Ah, lot of these. I found them to find. A lot of them are purchased that clients have sent me because they purchase them on. I use them as a part of their branding and creating advertisements. Milk, tea. That's kind of cute. So just goes on and on. So go and check out dupont. Um, it's a great way to kind of check out. Try out your bond skills with everything you've learned from this class to great headlines using Sarah San Serif weight and hierarchy. Thank you for joining my class.
Lindsay Marsh, Over 500,000 Design Students & Counting!
