Skip to main content

What Common Font Sizes Should I Choose In Web Design?

Lesson 42 from: Figma UI UX Design Essentials

Daniel Walter Scott

What Common Font Sizes Should I Choose In Web Design?

Lesson 42 from: Figma UI UX Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

42. What Common Font Sizes Should I Choose In Web Design?

<b>In this lesson we will take a look at what common font sizes you should use in web design. There are general rules to stick to which will help.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

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.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

Ratings and Reviews

Mahyar Hassid
 

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

Student Work

RELATED ARTICLES

RELATED ARTICLES