Lessons

Lesson Info

Use Web Safe Fonts

Hi there. Welcome to this video all about fonts, how we pick them, where we get them from, how to pick good combinations, more good combinations and then how to kind of get them ready in XT. So they're ready to use. We've got a light in the dark version will go through what styles you can use, what weights you can use and how they relate to your baseline grid. It's a long video, settle in maybe a cup of tea. This one, there's not too much doing. There's a lot of listening. I do all the doing, you do the listening, put the kettle on and let's get started. Alright, so let's talk about what fonts you can use. So in up until now we just used aerial, whatever was on our machine we used. So now we need to pick font faces that can be used online and in an app. So we need special kinds of fonts. So let's grab the type tool, let's click once and I'm gonna type in dan. And I'm going to zoom in actually, I'm going to click on the black arrow and then zoom in. Okay. And with this font here, all of...

this stuff is just stuff that's on my computer. Okay, I can't just use any of it. I need to ensure that it is available through a website. It can be licensed now there's two kinds of fonts, you can license, there's paid ones and free ones. Now check with the company that you're doing work for. They might already have a corporate font and you might go and see whether it's a font that can be used in a website and I'll show you how at the moment and whether it needs to be paid licensed or whether it's a free one. So there's two main places to check for both free and paid. I'm going to go to google and I'm going to go to my browser at least and there's two places, fonts dot adobe dot com, which used to be called type kit. Um, and then there's fonts dot google dot com. Now the difference between them is they have a lot of similarities. There's some fonts in the adobe version that are also in googles fonts. Google's are all completely free to use. Okay. You can use them commercially for your projects. Adobe allowed you're allowed to use them commercially but you're paying for them. So these, there can be some in here that aren't free if you know what I mean. Like you're getting them as part of your credit card license, they say because you're a creative cloud license member, you can get used to be 100 I think it's up to like 300 or 1000 you can use as part of your subscription. Okay. So you just gotta be careful of that that you're actually paying for them in a certain way, but it's okay. You're creative club member and you're paying for it. So it's fine unless you're using the free version of X. D. Which might not be as cool. So you might want to switch to google fonts so how to use both of them. Adobe is the easier one to use because you go into here, you click on font packs, no browse fonts, you decide what font you want to use and there's a little slider when it loads, I'll show you. So I'm in browse the one I'm looking for. The main one is see this thing in brackets. It means there's a web version of available. There are less and less when it first came out. There was quite a few of them that didn't have this option to be a web version of the font. Okay, so that little icon there says it can be used on websites as well. Okay. Great. Beautiful type for the web. Okay, I'm actually going to cancel that down. So what I want to do is I'm designing with XD. I need to download these funds to do it. All I need to do is activate the fonts. So let's say that let's go through this. This is kind of handy. So let's say I'm looking for a heading so I can be a bit more decorative. Okay, I could use hand fonts or decorative fonts and you can see they're just a little, they're not going to be good for body copy, but there could be quite cool and quirky for headlines and let's say that I like this one here Bellow and I'm like, you are mine bello. What's going to happen is you've selected activate font, you'll notice that the Creative Cloud app starts doing his little thing as well and hopefully in XD without there it is, these little sinking. Hopefully it'll tell me in a second that it's sitting there. It is Bella caps regular has been activated. So now in XD I can go to this and say Bello doesn't want to work, click off. We might have to restart it. I can't remember, I thought it updated straight away. It doesn't, I'm going to save close and reopen. It will be back in a sec. Okay, I'm back restarted XD and I think that's just a quick for my computer, like at the moment, today, often I don't have to restart it. You can see there's belo it's installed, it's ready to go. I can start using on my site. So that's using adobe fonts. Just a couple little things. I want to quickly show you when you are doing headings for a website. You don't have to, but let's say I want to work with all of them, but I want it to be hitting zits gonna kind of cut it down a bit and I want the wits to be a little bit more narrow because headings, I don't want to break into two lines. So I want the heading to be to fit a lot of characters on it before it breaks down, you can see the difference if I use this font at the exact same size as this font, I can fit a lot more in there. So you'll find a lot of headings that people use another websites are a slightly more kind of a narrow version of the fonts because they just want to fit more characters and other little things you can do is you can just type in here, you can say because what's ours instructor HQ You can actually look at the characters before you move it through to see like, oh, that's kind of cool and quickie and you can decide rather than kind of downloading a font and then noticing it doesn't look good and the kind of characters that you have to use it. So let's move on to google fonts, it's slightly different. You come into here, fonts dot google dot com, they've got some same sort of filtering over here. We can pick display fonts or turn to sansa riff off the thickness. But let's say we go through and we're like, this is the one for me. Okay, this one here, I'm gonna pick one that I can actually say this call this one. No, not charm, jeez, no way Oswald. I like I've already got it trying to find one that I don't have. Let's say don't have Oswald, I like Oswald, let's say, I like this font. Hit this little plus button. Okay, and you're like, what's it done now, nothing really, It says one family selected click on it. Then you want to hit this little download button, you have to kind of manually download it and install it if it comes from google fonts. Okay, so download the section, it's gonna zip it, I'm gonna stick mine on my desktop, save open it up and on a Mac, it's pretty easy. Right? You just and if you open it up just stop there he is there. Oswald, I'm going to select all of these and just open it up on a Mac. You just click install and off it goes on a pc. It's it's exactly the same. Now you have to be using a really old version of Windows for that. Not to work. You have to google it for your version of Windows, but just double click it and it should install, you might have to restart XD and then you can start using it, you'll have to use them commercially, which adobe says is okay now there's a couple of things to consider when you are picking fonts. So, font choice in general just as as pure like pure design, you don't want to be picking like loads of different styles but there is an extra added like consideration when you're dealing with websites. Is that the speed in which the page loads. So if I go to a website and I load, say one of my ones. So bring your own laptop, It's loading. It's loading, it's loading, it's waiting one of the things that's slowing it down is the font that's being downloaded. So I am using open sans on this particular site. Okay, so in here it has to go off, find open sands, download it and get it ready for the browser to use. And what ends up happening is if you have 5,67 different fonts and lots of different waits and waits. I mean bold italics, light, extra broad black. It's going to take forever to download and why is that important? Because we don't want our users taking a long time to load and google uses it as one of its metrics for deciding whether you are you are search engine friendly or not. Does the user is the user going have to sit there while you load like a million fonts and google gives you a little indication in here. So what we did you see this is low time fast. We've only got one font family. So what you can do is you say, oh I like this one like this one and this one and this one old charm. I can't even pretend to like you. There you go. I can't say that one but it's going in now if I look in here, I've only got four but it says low time moderate and you're like it's not too bad. I got four fonts but that's only if you only want to use the regular version, let's say I want in here. This one only has regular railway though. Say I want to use the I love the thin one and with the light version and the semi bulge and black. Same with this. I want them all. Can you see it's going into like crazy low time. So back to the top here. Low time is slow game just means. So what you really want to do is you want one or two fonts? I would I wouldn't pick this one here unless it was maybe just for the heading. Okay, but let's say I'm going to use railway and source sands. Um I'd probably just use a regular version and maybe a bold. I'm gonna use a bold italic. A regular italic because you're just you're gonna like even if you don't want to use it, there's gonna be times we just have to have an italic. Just just going to need it somewhere and over here for Oswald. I want the light version. There is no italics. So I'm going to use this for the heading so I want light want regular and probably just semi bold. Okay, I'm going to get rid of sore sands were still at low time. Slow and that's bad. Let's try and tidy up these guys Railway of God's source sands. I'm getting rid of it's still slow and the s C. O person in me says cut more down. Okay, get rid of lots more fonts, but the designer in me says I need some extra weights. I've only got two phones, come on, you'd do better with yourself. So ideally you'd like it to be moderate or low, but for me or fast it never ends up being fast and I'm happy to take that cut and sc Oh goodness. But you might be dealing with a developer or a designer or yourself, you might be like, no way, no time is important. We're only gonna have one font. Alright, so that's some of the technicalities of picking fonts. Let's say that you want to pick them, You're just like, what do I do? I do it all the time. I'm like, I'm sick of using charm on everything. I want to go and find another. You know what's a nice combination and the word font pairing is a really handy one to learn. So if you google font pairing, google fonts, okay, I just googled it and all of these kind of first things that appear all give you just really nice. I just loaded a few of them, you can see here Oswald with paramount and it just gives you like a visual kind of indication of what they kind of look together and that's quite cool. Open sands with open sans condensed. So they've used the condensed front at the top, which gives me lots of characters. Um and just a nice thin or regular version down here, just go through maybe railway and Roboto. Now you have to type in front pairing type kit. That's what it was called last year and it's now called adobe fonts, but you won't find many font pairing adobe fonts listings just yet. So type and type kit instead. And I loaded a few of these and you can just see, oh, just looking at like kind of nice ideas and this, this particular site, you've got to click under the hood and it will tell you which fonts are being used and I can't be bothered loading it. But anyway, there it is there, those two fonts you can go into adobe fonts search for them and use those to to get this kind of combination going. Now we want to use consistency throughout the site. So I find it's easier when I get started to give myself a few bits of text that I can use in my designs rather than just changing the font as I go or font size as I go. Now. I never did this when I was new. So I was half reluctant to show you this because it's something that I do now because I'm like, I need, everything needs to be consistent and it's more important than it has ever been for me, but for you, you might be like too much. So I'm just gonna pick a font as I go, you're okay to do that. So what I'm gonna do is I'll give myself a couple of headings and a few different body copy styles to use and I can just like I did with these color swatches. I'm just going to have it up here, start at the beginning, I'm just going to add them here to make it easy to design with. Now, I'm going to install the fonts, I've actually got mine already installed them using Playfair and Roboto. Now, if you're looking for body copy fonts, basically, Roboto open sands. Source sands are like the new aerial for the world or calibri what's the one word? But anyway, it's just a really solid body copy font and it's really legible. It's available in more than one language and nobody's gonna hate it. I'll show you what I do. So I'm going to grab my type tool, gonna click once this one is going to be called hitting one, I'm using play fair. I've already installed it. We've covered how to install them if you want to use the fonts, I have included them in your exercise files, where are they? Text and fonts? There's Playfair and Roboto, you can just double click them to install them all. Not going to use them all, but they're all in there for you. So what I want is I'm going to use Play Fair And now I'm going to pick some sizes, I'm gonna start with 40. I only picked 40 because I've used I've done loads of these in like 40 is a nice big font, you can change it later on and remember I'm zoomed in at 100%. Remember command one or control one just so that you're picking font sizes at the right size, that's going to be hitting one. I'm going to do a hitting too as well and I'm going to do two and I'm probably going to do a hitting three. That is those are really common sizes online. I'll show you why in a sec. So this is going to be hitting two hearing too. So it's going to be hitting three. The reason we do kind of break points like this is because of our the baseline grid system. We kind of talked about this earlier on. If you're starting to glaze over, that's okay, you're allowed to glaze over and just listen and don't take it and doesn't you don't have to follow these rules, but I want to try and I guess add as much value as I can remember our grid system Now. We did it by eight. The reason it was good is because remember we're going to use a body copy of 16 and was, you could Harvard, it's the same with these guys, you're just going to work out what your headings are. It doesn't it would be super handy. Doesn't have to be if they were divisible by eight by any sort of okay number. So calculator There is over there. So if I go 40 Divided by eight doesn't have to be perfect. I'm not sure what happened. Let's go 40 divided by eight. Okay, is it goes into a five times? I can't do that math. By the way, people, you might be like five, I can't do that. This calculator zone, you might be like me this calculators on constantly on my computer because I need it. I'll show you why this is all good and divisible. So remember we got 32 so 32 divided by eight. It's four daniel four And I can't do this either. It's probably three. Right, let's take a risk three times eight. How am I getting this so wrong? I'm just going to do it. Let's go 24 divided by eight. Can't get me three times in. If it's not a whole number, at least a 0.5. So if you decided to use 20 and divided by 82.5 is an okay number. It's gonna mean your grids are gonna line up now. What do I mean by this baseline grid is if I copy this and paste them over here And I make his the line spacing the same. So it's going to be a font with 40 line spacing and I come in here and I type in another line. Another another line. Lucky, I've got predictive text on, it's partially helping me copy it all pasted a few times because what I want to show you is if I zoom in and if I line this text up, I'm lighting the heading up. Can you see this heading? I'm gonna move it up a little bit. See it lines up with this baseline grid here. Can you see every line does? That's why it's it's handy if it's divisible by your baseline grid consistency throughout the document works really good with body copy as well and that is it. If you're like man baseline grid, I understand it dan we don't want to do it anymore. That's the last time I'm going to mention it. Okay, so I had to kind of bring it back in here because fonts are you know you you want text lining up nicely along with things like physical objects or page furniture as we like to call them. So I'm gonna fill out the rest of this text here and no longer talk about baseline grid. Promise I'm gonna grab another one and this one is going to be my body copy and I created a couple of different versions for body copy and this is we're using Roboto Roboto. So we decided 16. Really common body copy size can be smaller. I mean using Roboto regular. Cool. So that's going to be that you probably need to have a bold version of it as well. Remember every time I add another one of these to my design, I'm slowing down the page load. Will I need an italic Bold? Maybe not? We'll have to see about that one. You probably need some like teas and see text when we get down to like 10 points or something. Super small. I'll probably only run that in the regular Actually I'll make a smaller version. eight 10 is not divisible by our little baseline grid there. I mentioned it one more time. I'm gonna do one more thing. I want to create another version of them. I'm going to right align them. There we go and I'm going to make a white fill and these guys actually should be black. So now I've got some fonts to start with. I've got two styles. A couple of different weights. I've only gone for one weight in the hitting. I've just used the regular version. Doesn't even have a lighter version. There's a bold one. But I think I just like it has the regular version. Now this is a long video. I know but I guess you need the skinny on where to get fans. Why? You can't have too many and how they relate to the baseline grid. We're done. I'm done. You're done. Let's get into the next video