HTML & CSS for Absolute Beginners: Font sizes

Key Takeaways

so this lesson's about font sizes and font sizes are a simple thing but they open up a bit of a can of worms because they open up length units in CSS because we have lots of available length units to us for example uh let's we'll just do it here so we see it and the big impact this can have and we'll do a font size on here and I could say the font size is 1 cm s CM for centimeter that is a centimeter like you'd expect and the fonts get much bigger and so we have C we have inches which would obviously make this gigantic uh so we can measure things in inches uh and there's other of like actual measurement things that you might use which we don't want to actually use in CSS unless of course you're creating something for print cuz you can make things for print with CSS as well uh and the most common unit you will see in CSS is the pixel so I could say the font size is 20 pixels and then that will be setting the font size of my paragraphs the headings will sort of scale up from there uh because of the user agent styles that are on them they're set to always be bigger than the font size you're setting here so I'm saying This is 40 pixels right now and my font size is getting bigger this is the most straightforward unit because it's what most design software uses it's if you're used to like Google Docs or anything else the font sizes are usually set in pixels and so it becomes the easiest unit to be able to use and for most things we're going to get into you can make the size of things like set the width and the height elements and setting those in pixels is probably fine however there's a problem with pixels on font size and that it's bad practice you should never do this and the reason for that is users can go into their browser settings and they can actually change the size of the font being used and if you come in and you say that my font size is 10 pixels like this if the user set a different standard on the size being used it's probably because they like they or they need bigger font sizes and if you set this at 10 pixels it will be 10 pixels this is an an absolute unit the same way something is 10 cm is 10 cm like it's a fixed unit that you could actually measure and it's linked to the size of an inch actually uh that's the other weird thing with pixels a CSS pixel is not a screen pixel if it was it would be a nightmare because different screens and monitors have different pixel sizes and so then a pixel would always be different and it would be very hard to do anything and it would be basically useless so first of all a pixel a CSS pixel a fixed unit size and it overwrites the user preference and if a user gets here and they have a very small font size and that's not what they want they could zoom in but they'll probably just leave and go somewhere else CU your site's probably not the only one that's you know what they were looking for there's probably competitors and if somebody else is doing it better then they're going to prefer that one and it's just generally considered best practice to not do this like pixels as font sizes are just one of the big no no that a lot of it's like the easy one to learn so this is the unit you'll learn at the beginning and then after that you have to break that habit I don't I just want to set you up with the right habit from the beginning and the right habit is to use a unit called a rem like this so one REM uh what is a rem this opens up a bit of a can of worms on its own because it's sort of there's an M unit as well that I'm not even going to talk about in this course uh the REM is based on the root and the root of our project is sort of like we have our root for folder so if we look here the root folder is where our project is living the root m is basing its font size on the root element and the root element is the HTML element CU everything is the child of my HTML element and the way REM units work is it's basically a scale it's saying that if you have one REM you're matching the font size of the HTML element so I'm going to do something you shouldn't actually do now but it's just going to illustrate how Rems work so let's take this one off of the body and refresh nothing should change and we're going to come on the H1 here and I'm going to say my H1 has a font size of one r instead and it's going to get a lot smaller so we can see it right there now I'm going to come all the way up and say my HTML element has a font size of uh let's say 25 pixels and I put refresh you can see this got bigger so this one REM is now equal to 25 pixels if I make this uh 45 pixels now and and I refresh now the font size here is one REM so it's the same as the 45 pixels here if I were to make this two REM that means it's 2 * 45 so it's going to be double the size or now it's becoming 90 pixels so whenever we do REM it's a scaled value of what our HTML elements font size is that leads to the question of if we don't declare a font size on the HTML what is the default font size and that's where the default if a user has not changed their user preference the default is 16 so that would be if you had this this would be what everything looks like but once again if you did this this would be overwriting a user's preference which we don't want to do so you generally don't declare a font size on your HTML element and you just let it stay at the default value and so the default value of that will be 16 though if a user changes their preferences it could be larger or technically smaller than what that 16 is so we don't always know exactly what the font size is but that's fine that's part of designing websites is we don't know anything that the user is doing we don't know how big their screen is how small it is are they on a phone or they on a TV or anything in between and we have to create websites can adapt to all of these different scenarios and getting used to using the right units with our font sizes is a really good way to or just start living in that reality that we have no control over things so uh what I'm going to do is actually just suggest that you come through and do your best just to try and like match it closely enough uh if you're working on a more formal design you would have like potentially actual values that you should be using and it's weird working off of a base 16 when you're using REM I won't lie but you get used to it really quickly so if I just you know I look at this and this needs to be really big I just go in my heading here and I can say font size is I don't know five R and then I can refresh and see what that looks like hey that's not too bad it's not exactly the same size but it's quite big my you know maybe it needs to be a bit bigger I can try a 5.5 if I want to and then see what that looks like I can make it a 7.5 and I just want for now just go through and try and Eyeball things until they look half decent and if you find it's too big or too small then just make adjustments and find numbers that you think are going to work uh and that look good I'm not we're not going to get too specific or too picky with it the one thing I will say is once again you can set font sizes on your body so that could actually be a good starting point is instead of starting on the H1 coming and doing a font size I often do like a 1.25 uh on the body CU if I do that it just makes the font size a little bit bigger so something like that uh getting bigger than 1.25 here tends to get quite big for regular text but again it depends on the layout you can use different fractions or different decimals here to get a size that you think works well uh and just go through and add in the different font sizes that you want to be using to try and just eyeball it as closely as you can with the design and just remember remember it's all just sort of based on ratios my you know this is smaller my H1 will be quite big my H2S will probably be somewhere in the middle and then you just go from there and I think that's a good start for getting used to using REM units