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 XD.
So they’re ready to use, we’ve got a light and a dark version. We’ll 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, sit alone, 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. So let’s talk about what fonts you can use.
So up until now we just used Arial, 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. Let’s grab the ‘Type Tool’, let’s click once.
I’m going to type in ‘Dan’, I’m going to zoom in. Actually I’m going to click on that black arrow and then zoom in. With this font here, all of this stuff is just stuff that’s on my computer. 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, in a moment. And whether it needs to be paid, licensed, or whether it’s 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.
abode. com, which used to be called Typekit. And then there’s fonts. google.
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 Google’s fonts. Google’s are all completely free to use. You can use them commercially for your projects.
Adobe, you’re allowed to use them commercially but you’re paying for them. So 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 Creative Cloud license.
They say, because you’re a Creative Cloud licensed member. you can get, it used to be 100, I think it’s up to like 300 or 1000. you can use as part of your subscription. So you’re just going to be careful of that.
that you’re actually paying for them in a certain way. but it’s okay, you’re a Creative Cloud member. and you’re paying for it, so it’s fine. unless you’re using the free version of XD, which might not be as cool.
So you might want to switch to Google Fonts. So how do you 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 on what font you want to use.
and this 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 it 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. So that little icon there says it can be used on websites as well. ‘Get beautiful type on the web’, click ‘OK’. Make sure you’re going to cancel that down.
So what I want to do is, I’m designing with XD, I need to download these fonts. To do it, all I need to do is activate the font. So let’s say that– let’s go through this, this is kind of handy. Let’s say I’m looking for a heading.
So I can be a bit more decorative. 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 could be quite cool and quirky for headlines. Let’s say that I like this one here, Bello, and I’m like, you’re 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 he is there, sinking. Hopefully they’ll tell me in a second that it’s synced.
There it is, Bello 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. Can’t remember, I thought it updated straight away, it doesn’t.
I’m going to save. Close and reopen it. I’ll be back in a sec. I’m back, I’ve restarted XD.
and I think that’s just a quirk for my computer, like at the moment today. Often I don’t have to restart it. You can see, there’s Bello, it’s installed, it’s ready to go. I can start using it on my site.
So that’s using Adobe Fonts. Just a couple of 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.
I want all of the headings. It’s going to kind of cut it down a bit. and I want the widths to be a little bit more narrow. because headings, I don’t want to break on to two lines.
So I want the heading 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 in other websites are a slightly more. kind of a narrow version of the fonts. because they just want to fit more characters in. Other little things you can do is you can just type in here.
you can say, ‘instructor HQ’. You can actually look at the characters before you move it through. to see, like, quot;Oh, that’s kind of cool and quickie,quot; 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. google.
com, got some same sort of filtering over here. We can pick display fonts or turn the Sans Serif off, the thickness. but let’s say we go through and we’re like, quot;This is the one for me. quot; This one here, I’m going to pick one that I can actually see.
Let’s call this one– no, not Charm, geez, no way. Oswald, I like. Already got it. Trying to find one that I don’t have.
Let’s say I don’t have Oswald, I like Oswald. Yes I like this font, hit this little ‘+’ button. and you’re like, quot;What’s it done now?quot; Nothing, really. It says ‘1 Family Selected’, click on it.
Then you want to hit this little ‘Download’ button. You have to manually download it and install it. if it comes from Google Fonts. So hit ‘Download the Section’, it’s going to zip it.
I’m going to stick mine on my desktop. ‘Save’, open it up. On a Mac it’s pretty easy, right? You just– I need to open it up, ‘Desktop’, there it 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 exactly the same now. You have to be using a really old version of Windows for that not to work. You’ll 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. There are these in 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 is, is 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 bringyourownlaptop.
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’m using Open Sans on this particular site. So in here it has to go off, find Open Sans, download it.
and get it ready for the browser to use. And what ends up happening is. if you have five, six, seven different fonts. and lots of different weights.
by weights, I mean bold, italics, light, extra bold, 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.
if you’re search engine friendly or not. does the user have to sit there while you load like a million fonts? Google gives you a little indication in here. So what we did, can you see, it says ‘Load Time Fast’. because we’ve only got one font family.
So what you can do is, you can say. quot;I like this one, this one, this onequot;. Old Charm, can’t even pretend to like you. Can’t say that one, but it’s going in.
Now if I look in here, I’ve only got four, but it says ‘Load Time Moderate’. And you’re like, quot;That’s not too bad, I’ve got four fontsquot;. but that’s only if you want to use the regular version. Let’s say I want, in here, this one only has Regular.
Raleway though, say I want to use the– I love the thin line, I want the light version, semi bold, and black. Same with this, I want them all. Can you see, it’s going into like crazy load time. So back to the top here, load time is slow.
So what you really want to do is you want one or two fonts. I wouldn’t pick this one here unless it was maybe just for the heading. but let’s say I’m going to use Raleway and Source Sans. I’d probably just use a Regular version, and maybe a Bold.
maybe use a Bold Italic, a Regular Italic. Even if you don’t want to use it, there’s going to be times. where you just have to have an Italic, 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, I want Regular, and probably just Semi Bold. I’m going to get rid of Source Sans.
We’re still at load time slow, and it’s bad. It’s trying to tidy up these guys. What have I got? Source Sans, I’m getting rid of. It’s still slow, and the SEO person in me says.
cut more down, get rid of lots more fonts. but the designer in me says. I need some extra weight, I want to go too fast, come on. you 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. In SEO goodness.
you might be dealing with a developer or a designer, or yourself. you might be like, quot;No way. quot; Load time is important, we’re only going to have one font. So that’s some of the technicalities for picking fonts.
Let’s say that you want to pick them, you’re just like, quot;Oh, what do I do?quot; I do it all the time, I’m like. I’m sick of using Charm on everything, I want to go and find another– 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’. I just Googled it, and all of these, kind of first things that appear.
will give you just really nice– just loaded a few of them. You can see here, Oswald with Garamond. and it just gives you like a visual kind of indication. of what they kind of look together, and that’s quite cool.
Open Sans with Open Sans Condensed. so they’ve used the condensed font at the top. which gives me lots of characters. and just a nice thin or regular version down here.
You just go through, maybe Raleway and Roboto. Now you’ll have to type in ‘Font pairing typekit’. that’s what it was called last year. It’s now called Adobe Fonts.
but you won’t find many font pairing Adobe fonts listings just yet. So type in ‘typekit’ instead. I loaded a few of these, and you can just see. just looking at like, kind of nice ideas.
And this particular site, you got to click under the hood. and it will tell you which fonts are being used. I can’t be bothered loading it, but anyway, here it is there, those two fonts. You can go into Adobe Fonts, search for them.
and use those two 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 everything needs to be consistent.
It’s more important than it has ever been for me. but for you, you might be like, quot;quot;Ah, too much hassle. I’m just going to pick a font as I go,quot; and you’re okay to do that. So what I’m going to 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. You saw it 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, I’m using Playfair and Roboto. Now if you’re looking for Body Copy fonts.
basically Roboto, Open Sans, Source Sans. I like the new Arial for the world, or Calibri. What’s the one on Word? Anyway it’s just a really solid Body Copy font. It’s really legible, it’s available in more than one language.
and nobody’s going to hate it. I’ll show you what I do. So I’m going to grab my ‘Type Tool’, I’m going to click once. This one’s going to be called ‘Heading 1’, I’m using Playfair.
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 Playfair. Now I’m going to pick some sizes, I’m going to start with a 40.
I only pick 40 because I’ve used. I’ve done loads of these, I’m like, quot;40’s a nice big font. quot; You can change it later on, and remember I’m zoomed in at 100%. Zooming back, ‘Command 1’, or ‘Ctrl 1’.
Just so you’re picking font sizes at the right size. That’s going to be Heading 1, I’m going to do a Heading 2 as well. and I’m going to do 2, and I’m probably going to do a Heading 3, that is– those are really common sizes online. I’ll show you why in a sec, so it’s going to be Heading 2.
Heading 2. This is going to be Heading 3. 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 suddenly glaze over, that’s okay, you’re allowed to glaze over.
and just listen, and don’t take it in. You don’t have to follow these rules. but I want to try and, I guess, add as much value as I can. So remember our Grid system? Now we did it by 8.
The reason 8 was good is. because remember we’re going to use a Body Copy of 16. and we can halve it. It’s the same with these guys.
You’re just going to work out what your headings are. It would be super handy, doesn’t have to be. if they were divisible by 8, by any sort of okay number, so calculator. There it is over there.
So if I go 40 divided by 8; doesn’t have to be perfect. Not sure what happened here. Let’s go 40 divided by 8. Is because we do it 5 times, I can’t do that Math by the way, people.
You might be like, 5. I can’t do that. In this calculator zone– you might be like me. This calculator is 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 8. It’s 4, Daniel; 4. And I can’t do this either, it’s probably 3, right? Just take a rest, 3 times 8.
How am I getting this so wrong? I’m just going to do it. Let’s go 24 divided by 8, gives me 3 times in. If it’s not a whole number, at least at 0. 5.
If you decided to use 20 and divide it by 8. 2. 5 is an okay number. It’s going to mean your grids are going to line up.
Now what I mean by this Baseline Grid is, if I copy this. and I paste them over here. and I make the line spacing the same. so it’s going to be a 40 font with 40 line spacing.
I come in here and I type in another line. Another line. Lucky, I’ve got. predictive text on.
It’s partially helping me. I copy it all, paste it a few times. because what I want to show you is. if I zoom in, and if I align this text up.
I’m aligning the heading up. Can you see this heading? I’m going to 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 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, quot;Man, Baseline Grid.
I understand it, Dan, we don’t want to do it anymorequot;. it’s the last time I’m going to mention it. I had to kind of bring it back in here because fonts are– you want text lining up nicely along with things. like physical objects or page furniture, as we like to call them.
So I’m going to fill out the rest of this text here. and no longer talk about Baseline Grid, I promise. I’m going to grab another one, this one is going to be my Body Copy. I created a couple of different versions for Body Copy.
This is, we’re using Roboto. So we decided 16, really common Body Copy size, can be smaller. I’m using Roboto Regular. So that’s going to be that.
You’ll 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 Tamp;C 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, 8.
10 is not divisible by our little Baseline Grid. There, I mentioned it one more time. We’ll 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. 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 heading. 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, it’s the regular version.
Now this is a long video, I know. but I guess you need the skimmy on. where to get fonts, 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. Hi there, I hope you enjoyed the video. My name is Daniel Scott. If you would like to do the full course.
there will be a link in the description for that. Please give this video, on YouTube here. a thumbs up, really helps me in what I’m doing. Also, consider subscribing to the channel.
I release a video like this every week, for your viewing pleasure. All right, bye.