What common font sizes should I choose in web design?

Hi everyone, in this video we're going to talk about sizing fonts in Figma. The 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 going to use in this course, all right, let's jump in. 

So sizes for text, you can pick any size you like, there are some general rules that are helpful when you're new, 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 0', you can go to Shift, remember 1, it shows you the whole page, 'Shift 2' is, makes the thing you've got selected full screen, but that's too close. Mine's at 133, I want it to be at Shift 0, which is 100%, it's a better way to be deciding on fonts. 

Again, you need to be testing on your device, especially if you're going out to like a smart watch, or maybe a television, or something else, but the defaults, yeah, let's add our main marketing message, on this Home page. I'm going to grab my 'T' on my keyboard, for the Type tool, click once, I'm going to call this one "The music of our people," and I'm going to pick my font. I'm using that Crimson, Crimson Pro, that's what I'm using, I liked it, I saw an example, there was an italics, and how big should I make it? 

So what we're going to do is, I'll show you the kind of basic one, so I'm going to start, you over there, and I'm going to make it white, so I can see it out here. The main stack is this, let's put in some sample text, put, "Heading 1- Sample", and for me, I'm going to work through, the biggest size to ever roam the earth, is about 72, never use it, but it's, seems to be part of everybody's kind of like sample list. Then I'm going to come down one, and I'm going to change it down to the next jump, and it's 48, next jump, 32, 24, 18, and then often you'll switch to your Body copy for 16. 

So that's a really kind of normal sizing scale, you can have all sorts in between, but that'd be really common for, just lots of sites will have this kind of, like, it's a hierarchy, right? So you might have Heading 1, Heading 2, often that's called Heading 0, because nobody uses it, because it's so big. So Heading 1, 2, 3, you can have a 5, 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, oh, there, and you can use that for your spacing. 

So if you're like, "I'm not sure what that should be," "Music for our people," actually, I'll bin that, and I'll say, I'm going to do a Heading, so I'm going to bring this one in, I'm going to make it, actually, one of my colors. So I'm going to use my 'Secondary 3', nice and dark contrast to the background, and I'm going to use that marketing message, "The music of our people." 

You're going to have to come up with your own marketing message, for your persona or your client, I'm going to put a 'Return' in there, and I'm going to make it centered, and then I'm going to grab my selection to click off, put it in the middle, and that's going to work for me, that is my main marketing message, so you get to be Heading 1, because you're really important. Depending on how you're going to use the font, you might have the exact same group as well, but it's not italic, but it is in, maybe semi bold, or, actually, that's too big for me, Regular, Medium, 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. Anything lower than that runs into trouble on both apps and websites, where being too small, and accessibility is an issue, 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 is called Dosis, never used it before, look, cool. I saw it in an example, and I'm going to use it in Regular, and 16, that is going to be my Paragraph. So instead of Heading 4, it's going to be my, either Body Copy, or you might call it Paragraph. What you'll also probably notice on the lines, is they'll call it H 1 or H O, H 0, sorry, Heading 1, Heading 2. Your web designer brain might be like, "I totally know what that is," if you don't, your web designer and web developer's brain will know what it is, it's just a shorthand version of it, and when it gets to here, sometimes there's a P1 and a P2. 

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 something like a mixed model background, and that light version is too light, it might need to be this heavier version. 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 going to get rid of this background, I'm going to go back to--

I'm just going to have no Fill, oh, you need a Fill, even if it's just white. I'm going to start building some cards, that we're going to build later on with our features, and I want to draw some boxes, but I want to snap it to our columns. This is a bit of a production thing, like-- we've learned all we're going to learn about sizes, again there's no reason why you can't have 35. 

The reason some of these numbers exist, there's a couple of different rules, but like, let's say that, 16, 16 is the default on the web, something called ems, and one em 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 8 pixel grid earlier on, 8 is 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, also, don't hold me to this, like this is just general rules, you can break them all you like. All right, let's go and do the thing, I'm going to draw something over here, and what I want it to do is, I want to snap to the columns. I'm going to create what's called a card, it's our little feature reusable box, we're going to have three of them, you kind of saw them at the beginning there. 

So what I'm going to do is click on this, turn the Eyeball on my grid, there it is there, and I'm going to draw, 'R' for the Rectangle tool, and I'm going to draw something that looks like that. Color wise, I'm going to pick one of my styles, I'm going to go to the secondary color, I'm going to go to my Circle tool, Circle tool is the O key, because it looks like a circle, if you want a shortcut. I'm going to drag it out, holding 'Shift', I'm going to use these as images later on, I've got plans to use them for images. 

In terms of consistency, I-- you don't have to follow all the grids, but it's going to be handy, so I'm going to do that, and my plan is to use a couple of-- and my plan is to use them alternately, so the image is going to be in here, the feature text is going to be this way, I want to flip this one over, so we're going to use our super amazing shortcut, 'Command /', or 'Ctrl /', and we're going to go-- I wonder if there's a flip, not a slip, a flip, there is, Flip Horizontal, there you go, I'm going to do the same thing. 

So this is my kind of plan for the moment, and I'm going to 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 'Type' tool, click once, and I'm going to have, like my features are going to be-- we're going to have three of them. 

One of my headings for it is, probably "Recycled Plastics", is going to be one of the features that my product has, plastics, select it all, I'm going to go down to my-- what headings do we have, 32? Do I jump down to 24? 24 is going to work for me, because it fits, and then my Body copy, I'm going to click and drag, because I want it to kind of break across here. 

Remember, clicking once gives you that forever expanding box, clicking and dragging is going to give you a fixed 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 changed it to 'Dosis', and I'm going to be using 16. I'm going to start typing, so I'll do this for the moment, here we go, cool. 

Remember, back to 0, back to 100%, so 'Shift 0', just to kind of see what-- oh, that didn't work, if you hit Shift 0 while you're in the Type tool, and right snap, who knew? 'Shift 0', 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. Line height, probably needs to come out a little bit, in my opinion, and I'm going to make sure the copywriter only writes one sentence, thank you, very much. 

All right, and that's my plan for one, two, oh, three 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, and instantly I was like, wrong blacks. You can see there, oh, look at that, lined up. It's not perfect yet, but I guess that we need to start making some things, I want to show you kind of an instance of, that heading versus that heading. 

Is it too close? It could be, do I jump up to the 32? Maybe I need a 28, because this particular font-- some fonts look bigger than other ones, anyway. Don't spend too long on your actual laptop, unless it's a website, check on your phone, like, we need to do-- go to that Figma mirror, and actually just check it, is it readable, does this need to be actually Regular, or does it need to be Medium? 

All right, that's it, font size is over, I'll see you in the next video.