What Common Font Sizes Should I Choose In Web Design?
Daniel Walter Scott
Lesson Info
42. What Common Font Sizes Should I Choose In Web Design?
Lessons
Introduction to Figma Essentials
02:53 2Getting Started with Figma Training
03:06 3What Is Figma For & Does It Do The Coding?
03:46 4What's The Difference Between UI And UX In Figma
05:22 5What We Are Making In This Figma Course
09:18 6Class Project 01 - Create Your Own Brief
04:01 7What is Lo Fi Wireframe vs High Fidelity in Figma?
02:34 8Creating Our Design File & Introducing Frames In Figma
08:29The Basics Of Type & Fonts In Figma
10:51 10Rectangles, Circles, Buttons And Rounded Corners In Figma
06:50 11How To Use Color In Figma
05:45 12Strokes Plus Updating Color Defaults In Figma
09:28 13Object Editing And How To Escape In Figma
01:47 14Scale vs Selection Tool in Figma
02:39 15Frames vs Groups in Figma
09:24 16Class Project 02 - Wireframe
03:00 17Where To Get Free Icons For Figma
09:10 18Matching The Stroke Of Our Icons
05:16 19How To Use Plugins In Figma For Icons
04:31 20Class Project 03 - Icons
03:48 21How to Use Pages in Figma
08:31 22How to Prototype in Figma
10:46 23Prototype Animation and Easing In Figma
10:53 24Testing On Your Phone with Figma Mirror
05:40 25Class Project 04 - Testing On Your Phone
03:51 26What is Smart Animation & Delays in Figma?
08:44 27Class Project 05 - My First Animation
02:01 28Sharing & Commenting on a Figma File with Stakeholders
07:10 29Sharing & Editing With Other Ux Designers In Figma
06:58 30How I Get Inspiration For Ux Projects
06:39 31How To Create A Mood Board In Figma
05:33 32Class Project 06 - Moodboard
01:26 33How to Work with Columns & Grids in Figma
13:54 34Tips, Tricks, Preferences, and Weirdness in Figma
07:21 35Color Inspiration & The Eyedropper In Figma
06:34 36How To Create A Color Palette In Figma
09:02 37How to Make Gradients in Figma
07:09 38How to Create & Use Color Styles in Figma
08:01 39Class Project 07 - Colors & Columns
04:00 40Fonts on Desktop vs in Browser in Figma
01:30 41What Fonts Can I Use? Plus Font Pairing In Figma
06:01 42What Common Font Sizes Should I Choose In Web Design?
11:30 43How to Make Character Styles in Figma
06:36 44Lorem Ipsum & Placeholder Text In Figma
04:28 45Useful Things To Know About Text In Figma
09:35 46How To Fix Missing Fonts In Figma
02:42 47Class Project 08 - Text
05:19 48Drawing Tips And Tricks In Figma
09:38 49Squircle Buttons with ios Rounded Courses In Figma
02:48 50Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
07:25 51What Is The Difference? Union vs Flatten In Figma
03:36 52Class Project 09 - Making Stuff
03:29 53Smart Selection & Tidy Up in Figma
08:40 54Do I Need To Know Illustrator With Figma?
04:15 55Tips & Tricks For Using Images In Figma
06:11 56Masking & Cropping Images In Figma
09:12 57Free Images & Plugins For Figma
02:31 58Do You Need Photoshop For Ux Design In Figma?
10:40 59Class Project 10 - Images
01:17 60What Is Autolayout & Expanding Buttons In Figma?
10:27 61Class Project 11 - Buttons
01:15 62Auto Layout For Spacing
05:47 63How To Use Constraints In Figma
08:22 64Combining Nested Frames Auto Layout & Constraints in Figma
11:54 65Adding Text Box Autoheight to Autolayout in Figma
08:27 66Class Project 12 - Responsive Design
02:19 67Nice Drop Shadow & Inner Drop Shadow Effects In Figma
05:56 68Blur Layer, Background Blur & Image Blur in Figma
05:57 69How to Make Neumorphic UI buttons in Figma
07:37 70Class Project 13 - Effects
01:53 71How To Save Locally & Save History In Figma
05:42 72What are Components in Figma?
06:19 73Updating, Changing & Resetting Your Components
07:47 74You Can’t Kill Main Components In Figma
07:22 75Where Should You Keep Your Main Components In Figma
05:02 76Intro To The Forward Slash / Naming Convention In Figma
08:55 77Class Project 14 - Components
00:44 78How To Make Component Variants In Figma
06:41 79Another Way To Make Variables In Figma
06:14 80How to Make a Multi Dimensional Variant in Figma
11:13 81Class Project 15 - Variants
01:41 82How To Make A Form Using Variants In Figma
12:52 83Class Project 16 - Form
01:27 84Putting It All Together In A Desktop Example
19:44 85How To Add A Popup Overlay Modal In Figma
03:03 86How To Make & Prototype A Tool Tip In Figma
07:26 87What are Flows in Figma?
05:39 88Slide In Mobile Nav Menu Overlay In Figma
03:55 89Class Project 17 - Prototyping
01:10 90How To Pin Navigation To The Top In Figma
10:17 91How To Make A Horizontal Scrolling Swipe In Figma
06:36 92Automatic Scroll Down The Page To Anchor Point In Figma
04:50 93What are Teams vs Projects vs Files in Figma?
05:18 94How Do You Use Team Libraries In Figma
11:03 95The Difference Between Animation & Micro Interactions
02:55 96Animation With Custom Easing In Figma
25:36 97Class Project 18 - My Second Animation
01:54 98How To Make Animated Transitions In Figma
12:34 99Class Project 19 - Page Transition
01:31 100Micro Interactions Using Interactive Components In Figma
05:54 101Micro Interaction Toggle Switch In Figma
04:23 102Micro Interaction Burger Menu Turned Into A Cross In Figma
04:23 103Class Project 20 - Micro Interaction
01:35 104How To Change The Thumbnail For Figma Files
04:10 105How To Export Images Out Of Figma
07:40 106How To Share Your Document With Clients & Stakeholders
07:09 107Talking To Your Developer Early In The Figma Design Process
03:55 108Sharing Figma With Developers & Engineers Handoff
06:07 109What Are The Next Level Handoffs Aka Design Systems
03:18 110Class Project 21 - Finish your design
04:57 111What Next?
06:08Lesson 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
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!