Lessons

Lesson Info

What Common Font Sizes Should I Choose In Web Design?

Hi, everyone in this video. We're gonna talk about sizing fonts in fig. A short answer is you can pick any old size you like. But there are some kind of like defaults or common things that I don't know. I've been agreed upon amongst a lot of the web community, but you can totally break the rules. You can use any size you like, but I'll show you the defaults and then we'll do some basic stuff and mock up some of the kind of feature cards that we're gonna use in this course. All right, let's jump in. Ok. So sizes for text, you can pick any size you like. There are some general rules that are helpful when you're new and I'm going to be working on my home page. I'm going to clear off any junk that I had from the previous tutorials and we're going to go to hold down the shift key and go shift zero. Ok. Um, you can go to shift number one shows you the whole page shift two is makes the thing you've got selected full screen, but that's too close. Ok. Mine's at, at 130. Ok. I want it to be at s...

hift zero, which is 100%. It's a better way to be deciding on fonts. Again, you need to be testing on your device. Ok? Especially if you're going out to like a smart watch or maybe a television or something else. Ok. But the defaults, yeah, let's add our main marketing message on this home page. I'm gonna grab my T on my keyboard for the type tool. Click once I'm gonna call this one, the music of our people. OK? And I'm going to pick my font. OK? I'm using that Crimson Crimson Pro. That's what I'm using. I liked it. I saw an example there. It was an italic and how big should I make it? Ok. So what we're going to do is I'll show you the kind of basic ones so I'm going to start you over there. OK? And I'm gonna make it white so I can see it out here. And the main stack is this, let's put in some sample text, put hitting one sample. OK? And for me, I'm gonna work through the biggest size to ever roam the earth is about 72. OK? Never use it. But it's seems to be part of everybody's kind of like sample list. OK? Then I'm gonna come down one. OK? And I'm gonna change it down to the next jump. OK? And it's next jump 18. And then often you'll switch to your body copy for 16. OK. So that's a really kind of uh normal sizing scale. You can have all sorts in between. OK? But that'd be really common for just lots of sites we have this kind of like it's a hierarchy, right? So you might have hitting one, hitting two often that's called hitting zero because nobody uses it because it's so big. So hitting one to three, you can have a five. We've just got these ones. That's kind of a really typical one. Let's spread them out nicely. So over here our line we are going to use the here. We'll distribute vertically spacing. There we go. Ooh Better. And you can use that for your spacing. So if you're like, I'm not sure what that should be. OK? Music for our people actually, I'll bin there and I'll say I'm gonna do a heading. So I'm gonna bring this one in. I'm gonna make it actually one of my colors. So I'm gonna use uh my secondary three that's in dark contrast to the background. And I'm gonna use that marketing message, the music, one of our people, you're gonna have to come up with your own marketing message for your persona or your client. And I'm gonna put a return in there and I'm gonna make it centered and then I'm gonna grab my selection to click off, put it in the middle. OK? And that's gonna work for me. That is my main marketing message. So you get to be hitting one because you're really important depending on how you're gonna use the font, you might have the exact same group as well, but it's not italic, but it is in maybe a semi bolt or actually that's too big for me, regular medium. OK? There might be another use case for your headings. This might be like the colloquial marketing version and this might be more information when you get down to your body copy. It is normally always 16. OK? Anything lower than that runs into trouble on both apps and websites where being too small. OK. And accessibility is an issue. You know, where people can read it, especially Google websites. They don't like it when you put teeny tiny fonts everywhere it goes, hey, you've broken some rules and your search rankings might be affected anyway. So my matching font OK is called do sis never used it before. Look cool. I saw it in an example and I'm going to use it in regular in 16. That is going to be my paragraph. OK. So instead of hitting four, it's gonna be my either body copy or you might call it paragraph what you'll also probably notice on the lines. OK? Is they'll call it H one or hoh zero. Sorry. OK. Hitting one heading to your web designer brain might be like, I totally know what that is. If you don't, your web designer and web developers brain will know what it is. OK? It's just a shorthand version of it. And when it gets to here, sometimes there's a P one and A P two. OK? If you've got a second kind of paragraph, you might have one that needs to be, you know, it's a special case, it goes on to something like a mixed model background and that light version is too light. OK? It might need to be this heavier version. OK? So those are kind of basic sample sizes. You can leave it there. I'm going to move that over there and look at an example of kind of working. I'm gonna get rid of this background. OK? I'm gonna go back to, I'm just gonna have no fill. Oh you need a fill even if it's just white. OK? I'm gonna start building some cards that we're gonna build later on. OK? With our features and I wanna draw some boxes but I wanna s snap it to our columns. This is a bit of a production thing like uh we've learnt all, we're gonna learn about sizes again. There's no reason why you can't have um you know, 35 and the reason some of these numbers exist, there's a couple of different rules but like let's say that uh 1616 is the default on the web. OK? Something called eames. And one E is the default size for all fonts online if you don't change it. So we use that as a base. We talked about that eight pixel grid earlier on. OK. Eight's divisible by 16. So that is handy as well. There's things to do with line heights and grids and there's, there's a, you can go pretty deep on it, but that's a good starting sample. Actually give me a sec. I'll write them here so that you can take a screenshot or have it for yourself. All right. So the sizes are there are also don't hold me to this like this is just general rules and you can break them all you like. Alright, let's go and do the thing. I am going to draw something over here. And what I wanted to do is I want to snap to the columns. I'm gonna create what's called a card, OK? It's our little feature reusable box. We're gonna have three of them. You kind of saw them at the beginning there. OK? So what I'm gonna do is click on this to an eyeball on my grid. There it is there. OK? And I'm gonna draw half of the rectangle tool and I'm gonna draw something that looks like that. OK? Color wise. I'm gonna pick one of my styles. Let me go to the secondary color. I'm gonna go to my circle tool. Circle tool is the OK? Cos it looks like a circle, OK? If you want a shortcut, OK? I'm gonna drag it out, holding shift. I'm gonna use these as images later on. OK. I got plans to use them for images and in terms of consistency, I you don't have to follow all the grids, but it's gonna be handy. OK? So I'm gonna do that and my plan is to use a couple of and my plan is to use like them alternately. So the image is gonna be in here. The uh feature text is gonna be this way I wanna flip this one over. So we're gonna use our super amazing shortcut command forward slash OK? Or control forward slash. And we're gonna go, I wonder if there's a flip, not a slip uh flip there is flip horizontal. Here you go. OK? And I'm gonna do the same thing. So this is my kind of plan for the moment and I'm gonna show you just kind of a use case for the text and we need to actually make something in this course. There's a lot of theory I want to actually do something. So, so type to click once and I'm going to have like my features are gonna be, we're gonna have three of them. One of my headings for it is probably recycled. Uh plastics is gonna be one of the features that my um product has plastics, select it all. OK? I'm gonna go down to my, what heatings do we have? 32? Do I jump down to 24? 24 is gonna work for me because it fits and then my body copy, I'm going to click and drag because I wanted to kind of break across here. Remember clicking once, gives you that forever expanding box clicking and dragging. It's going to give you a fix width. So I am going to go over to my, I wish I had a style. We're going to do that in a second. So I'm going to go manually change it to to doses, ok? And I'm gonna be using 16 and we're going to start typing. Um so we'll do this for the moment. Here we go. Come remember back to zero, back to 100%. So shift zero just to kind of see what? Oh that didn't work if you hit shift zero while you're in the type tool then writes that. Who knew shift zero? Ok. Yeah, it's looking good. It's hard without proper text in there but that's kind of something that I'm looking for. Probably some spacing, probably some rounded corners maybe, maybe that's what I'm doing. Ok. Line height uh probably needs to come out a little bit in my opinion. Ok. And I'm gonna make sure the copywriter only writes one sentence. Thank you very much. Alright. And that's my plan for 1203 of these they didn't line up did it. It's pretty good though. Can you see the red lines? I had it kind of a bit over here instantly. I was like wrong place. You can see that. Oh, look at that lined up. Uh, it's not perfect yet but I guess that we need to start making some things and I want to show you kind of an instance of their heading versus their heading. Is it too close? It could be. Do I jump up to the 32? Maybe I need a 28 because of this particular font. Some fonts look bigger than other ones anyway. Don't spend too long on your actual uh laptop. Ok. Unless it's our website, check on your phone like we need to do, go to that uh fig a mirror and actually just check it. Is it readable? Does this need to be actually regular or does it need to be medium? Alright, that's it. Font size is over. I'll see you in the next video.