Lessons

Lesson Info

Design Tips: Fonts

So the first thing that I want to talk about is his funds or typefaces um I'll bring up a prepared can va here and I'm going to zoom in a little bit okay number one rule with typefaces because the decision to be legible or not the rule used to be number one rule of typefaces is always be eligible but were designers we like you know I'm a designer like pushing the boundaries of things on it a cz a general principle yes type should always be legible unless of course you're doing something artistic in which case everything goes out the window for our purposes today we're going to focus on ledge ability um the number two rule is if you can't see it you can't read it so if something is in a color that is not consistent with something behind it or or it's it's the same then clearly you're not going to read it it's a it's a sort of color theory one o one um the other idea behind funds is making them different we often use more than one fun in our design and can va you can pick from a number o...

f different funds and if you have a camera for work account you khun upload your own funds so they aligned with your brand here in this example we're looking at a contrast ing funds so big bold, chunky and as a sub funt something a little bit slimmer a little extended in its letter forms on below it we are switching between sentence case entitled case what's interesting is that there are no rules around this other than they're knows the rules around which funds um you want to start with so if you have a fund and its ledge a bull and you'd like it start with it but then after that we're going to be making what I call micro decision it's about the next so fun that you choose and the one after that do they work well together? Does this fund work well with this one? A great definition of working well is called complex complimenting whether when a fund compliments something else it's like wearing a different color on the bottom than you do on the top and the complement each other so having something big and bold as your headline fund, you'll want to designate the next piece of type of something small and maybe a little bit ah dainty you're so here as an example I'm going to do in canada have two pieces of type they're both in the same fun although one is bigger than the other one and although the hierarchy is nice, I want them to be a little bit more different because I want people to read one first and really get that message and then go on to the next thing I don't want to have the risk of someone reading this second line first because as a lot of copywriters know, it starts with the word hand so it's a conjunction there's something I want people to read before so I'm gonna take this year and I'm going to select it go up into my tool tip up at the top and the drop down menu I'm going to pick something a little bit thinner one of my favorite five funds is babe a ce nu so here I've changed it, tio condensed sort of thin fund and I want to make it just on the edge like maybe center it here and let's make it a little bit smaller, I'll zoom in so you guys can see it and then this fund here I want to make bigger just to create that contrast that complimentary feeling if everything was big and be feeling you feel like you were being shouted at on if everything was small it's like a whisper so all of these micro decisions that we're making have actual influence on the viewers perception, so here I'm going to change the font I'll go up in my wingmen you again and I'll move down to let's just make it a little bit bigger maybe this thirty six here and I can see that changing the funked um gave me a line what's called line break so the words were too big for the with of my text box so it went down to the next line I don't want that to happen, so in order to account for them, I'll take the anchor point has found here and I'll just drag it out and it doesn't matter which anchor point you drag out, you could drag out the left one or the right one just until you see goes being just like that and I'd like this fund, so I'll keep that right there. So um, an example of contrast ing fonts choosing funds that are different than each other. There are a lot mohr differences then boldin light or sentence case in all caps, you'll notice that the fund on the bottom of the second example is spaced out and design terms. This is called tracking it's the distance between letters it makes a nice contrast to the very condensed space up in the top. Excuse me, we can adjust this very simply by going clicking on our fund here we have our our our tool tip menu and I'm going to go into the wing menu over here on the right, which gives me all those options again type has more options than any other item in canada and I'm going to go down to text spacing this is a little bit hidden and anything that's that's farther away in a menu structure usually is reserved for more advanced users but you guys have picked up so much in these last couple sessions I think this is fine so we're going to go into text facing here and here you can see that that the designer has has done it at letter spacing around around here negative one hundred so watch this here let me zoom in so you can see what's going on here as I pull up my menu and a good tech spacing see these letters how they're gone in and out in and out I'm adjusting the spacing between them and the more space you put in there the area the text fields it feels lighter it feels like again like dainty ear like something could could you could break it in any second the more condensed you get the lord's like solid it's it's got this feeling of it's not going anywhere any time soon so I want to try and dilute it worked there really like that that feeling of airiness when combined with the sort of stark start letter forms up the top um for large quantities of texts paragraphs um you want to not have a lot of variation if something is usually mohr than more than I'd say twenty to thirty words you want to try to keep it all the same that's where we get basic paragraph structure from but for these kinds of headlines and a lot of this stuff that you're going to create can va these types of fun choices can be really, really fun? Another piece of type trick that we're looking at is size. So you saw me re side some of this stuff up in the previous example let's, let's do that again here we can see ah headline a body copy and sort of sub body copy when you change the size of your type, you're telling the reader subconsciously what you want them to read first, a lot of people would think that just putting something up at the top is going to get red first and something that the bottom is going to get red second, but we could totally switch that around and I'll show you an example. So if I take this type here and I make it really big it's like thirty six point, I could actually put it in between these pieces of text and you're going to read the big one first that's just the rule that's how our eyes and our brain work so you could actually play with reading order now you want to make sure that it reads nicely and that makes sense, but you have this power as designers using canada, you can dictate what someone reads first and want someone read second, this is the basic principle of hierarchy I can't even take this guy here and make sure that it's almost never read on the way I could do that like let's say it's a it's a piece of text that you're you're required to put in and design but you don't really want it to be a part of your design you could shrink it way down now this please be judicious when when when a prudent when doing this because we don't want to just everything you're telling the reader I don't really want you to read that I kind of had to put this in there for some other reason again, it's just a proof of the amazing psychology behind size er another example or another thing we want to consider with type is ledge ability or readability? The the typeface on the right here is illegible I mean I'm I'm saving, you know three feet away I still can't make out most of the words we want to make sure that if we're putting text in our design that like I mentioned it's alleged bill is possible your font choice can dictate your ledge ability we're not going to change the size of this, but we're just going to change the fund so I'm going to select all instead of opinion script I'm going to go up here into my menu right above the text and I'm going to choose a really ledge a ble funt uh league spartan so you'll notice that I'll undo you'll notice that the text actually went down a little bit that's not because the size changed, but that's. Because the letter forms in the font that I chose were wider than the letter forms of this very condense just fund which means that it's going to push more words to the next line and it's going to make your paragraph longer. That's something to look out for when you're changing funds let's, go back to lolita one um you know what, it's still not that ledge herbal it's too chunky it's a it's a very thick fun in typography we have something called counters. Counters are this space inside of letters? So if you have a letter, a thie counter is the hole in the letter. A same thing with o the counter is inside of it. If you can't see those counters, all you get is just the mash of whatever color those those letters are so let's pick something that's. Not as chunky actually ended up picking louisville one let's do liberal bath. There we go. Look at that. So size is the same technically. But the fund has larger counters it's a serif font which adds to its ledge ability, uh, and it's just a lot more legible um you guys really did between sara font and a sand saref on most video a sarah if fund has little foot's and things coming off of it that add to its ledge ability comes from old printmaking when they would stamp something with a letter sometimes you bleed on the bottom and they found that that actually helped it being legible people could read things that smaller sizes okay, so this's a great one one a classic design technique with typography is called forced justification forced justification is taking many words or sentence and adjusting the size and the weight of different parts of that sentence in order to emphasize certain words over other ones. So for this one as an example that says this is a lot of farms shape you know those are the two words that I read first remember a principal of the bigger it is the more likely is getting red first s o it's it's great because it also creates a design element out of your text thiss nice rectangle I want to do that too but here I have three words and the words that I want to emphasize that special choose beforehand is the word love I think that's the more powerful one so I'm going to do is actually delete this text box because I don't think what is what I want I'll show you show you why so if I were to make love big like let's say it's two forty two point and I'll move my box actually let's go you in a little bit bigger even bigger fill that fill that box in the background wows one more okay, great. So if I do that to the word love what's gonna happen if I tried to force justify the word what it can be as big almost as big as the word love and then same thing with you do so if I make all of these big trying to force justify it inside of this box I lose something I lose thie the hierarchy of it it's all just kind of the same size so what I'm going to do is just to leave that one I don't add the word what to this guy? So I added a lot of letter forms so it pushed everything down so I'm going to select all and make it smaller maybe the size of the word above it something to become another trick for those of you not on the ipad for those using your desktop if you, uh you can nudge a piece of your design orographic or anything nudging means to move it very slightly so that it doesn't it goes exactly where you want to go you can nudge something using your arrow keys so if I use carol zoom in so you can see what it looks like where did they go? Here we go so I'm just hitting the left arrow key over and over again and it's creeping over towards the edge you can nudge things that's that's not you get one pixel every time you hit your iraqi it's going to go in that direction one pixel you can nudge things ten pixels by holding down shift so there's really hopping now I'm just hitting left and right I can also hit up and down so, um nudge it so that it's a line will learn about aline and later on I have a nice piece of I lost of force justified texts, a great typographic treatment that you could do in canada let's see so the next one choosing the right font for the right occasion or the right feeling tight faces like colors uh pull out emotions from us. We see it and we think of something out it's a symbol for feeling or emotion for instance, the color red could be danger could be liveliness could be fire has this energy to of the color blue, especially like a gray blue is very calming it's very soothing into notes, water or air fluidity people forget that typefaces have meanings just like color has meaning a sand sarah fund meaning a fund that doesn't have those little foot's is more modern uh it's going to be something that feels like anything from this century? Something that sand saref is a little bit more traditional it's a little bit more of a story something that is sarah if I misspoke is a little bit more traditional uh I'll give an example here these two fonts so this one here is a send sarah funt and it's very modern got round very geometric shapes to it whereas this guy here is much more formal like this is something that you would see in uh in a newspaper or in a in an imitation of some sort there are other kinds of funds including script funds there's also what's called display funds display funds if you run into them or you see something labeled as a display fun is not meant for large amounts of text. It's used very conservatively in layouts that maybe have a couple words and that's because of its ledge ability a dispel I'll show you an example of a display fund. So if I were to take this text here I'm a select all of it and we're going to go up into my tool tip menu at the top and I'm going to click on the drop down menu and let's find a display fund display fonts usually have a theme or they make you think of something ah great one is this guy called creep stir this looks like an awesome or movie fucked um and it's something that I totally should use last halloween for my invitation I would not want to see this in a paragraph that would be way it would make me feel like I'm in a horror movie of this play funds are meant for very specific purposes and they need to be used in limited quantities so we got a birthday invitation when you guys think what kind of fun to be used for this birthday invitation I totally lost it something fine. Okay what's what's fun I mean what is uh uh okay, so we'll probably want something that has uh we're playful letter form to it maybe it's even sort of script e a lot of curves are symbols of fun things that are in motion a lot of motion is fun let's take a look here how about this guy so this would be considered a display font but it's fun it's got some really neat quirks too it's kind of hand drawn but it still has sarah if so, it's still technically counts a sara font but it fits the mood a little bit better it's pink so maybe we want to go uh we want to use something that's a little bit softer maybe this is someone's birthday invitation and we want to do something with a script um so what I'll do is click on my funt and let's, go ahead. Who? That's interesting. Who? Here we go. Yeah. So this fund is a little bit more condensed. So it's kind of smaller, so we're making a little bit larger. Yeah. Now something interesting about this. This example, as a designer, I see I see the space between these two lines and it just it just doesn't feel right like invitation is very far away from birthday party now psychologically it's all one phrase birthday party invitation. But when I space something out, I read it as birthday party invitation. I want to fix that the way to do that in canada we're going to go to tech spacing and here instead of the space between the letters, which would destroy our beautiful brush script effect, we're going to adjust what's called the line height so I could drag this cannon house, see how that goes up and down. I can adjust this space between I don't want it that close because that tea is going to hit that. Why? So I'll just bring it about there, then I want to center it in my decide just like that. So I picked a fund that I know is going to elicit the kind of emotion and feeling that I want for the task, right? So that's fonts, any questions on those guys? All right yeah question from over here and folks were asking about this and you mentioned it earlier but let's reiterate uploading their own fun right? Certainly so right on me my personal account first thing I'm going to do a switch to my um can before work account because you'd only upload your own funds in the can before work section um I happen to have a fund that I absolutely love uh if you guys are interested you can get it at the lost type co lost type is a great design typographer community that creates some amazing funds I've pre downloaded it and I have it here in my assets folder uh it's called valencia so let's say I want to use valencia as a font the way to do this is you have tio you have to use it as a brand funt candle once came it is when people to upload their entire library of funds just to be able to use whenever they want they were very careful about what funds they have they have license agreements to for people to use them when we are uploading funds we're going to do it in order to use it for our brand s o how to do it is you're going to go into your brand and you're going to click on the brand kit remember we were in here changing our funds and let's say I want I want to pick a new big headline fun and I want to use for lindsay you so here it says hey you can upload your customer funds and it's directing me with this little arrow to click on this edit and I get a couple options not only could I change the fun but I can upload my own important thing to know uh can va accepts true type font formats so that the fund that ends in t dot ttf um so I have a true type of version of valencia my favorite fund and I want to use the bold version so I'll actually says open type of one from two open type all right so it's going to ask me to confirm it wants to ask me if I own this fund I do on this fun um and let's just say yes upload we're gonna learn something new if this takes the open type for men yeah it does okay great. So it's god's good for you to know and everyone at home not only can you upload true type funds but you can upload open type funds that's dot o t f and here I can see it is a very condensed funds very stylized display fund it's kind of reminiscent of the fifties and sixties so it's kind of illegible of this size so I'm gonna want to make it bigger buying default so I just click on the pencil and I could go in there and change it. So now all of my headings. They're going to be in valencia, which is a beautiful, beautiful fund on that's. How to upload your own funds.