 Hi there, my friend and friends. One of the first things we learn when we dive into the world of CSS is how to style our typography. We learn about things like setting the font size on something or how we can change the color and we just style up our text and do some simple things. But then we can quickly realize that there are a lot of font properties out there and just to make it a little bit confusing, some of them start with a font like font size or font family. Other ones start with text like text decoration or text transform. And of course then there's a few others that don't start with either font or text just to make it all a little bit more confusing as well. So if you're feeling a little bit overwhelmed by it all in today's video, we're going to be exploring the essential font and text related properties that you need to know when you're starting off with CSS. We're also going to talk about some of the units and values that we use along the way as well. And to be able to do all that we're going to be starting off with this nice page where we have a whole bunch of HTML in place and I'll talk more about where I got this in a second because it could be a nice place for you to practice a little bit. But yeah, we're going to be starting off with a blank slate with no CSS at all. We're gonna be looking at exploring all of these along the way. But just before we do that, if you're new here, my name is Kevin and here at my channel, I hope you fall in love with CSS. If I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And today, we're going to be doing that with these font properties and making sure we know them all. And when I say know them all, that's not a complete truth because it's more about knowing they exist. And then being like, Oh, I know I can change that. And then you can just Google it, you don't have to memorize any of these. And a lot of these are going to be using so frequently, you are going to end up memorizing them anyway, but don't feel like you have to memorize all of them. And I'll talk about a way to help you out a little bit in a second as well. But before we even dive into like all the different ones and how they work and all of that stuff, I want to talk about the most important thing when it comes to typography on the web, which is most things are inherited. And what I mean by inherited is if I come here and I say color, and let's just make something let's say red. So it really makes a change. All of my text changed to red, even though I've only selected my body here. And just really fast, if you're not used to what I'm doing here, and you're used to seeing in line CSS, because you're very new, you have your style is equal to this is just an external style sheet that I'm using here. And I'm going to link to a video down below that does talk about using external style sheets with selectors and all of that because I would encourage you to start doing that instead of styling things in line just in case you are really early on, it's going to make your life so much easier. And it's very easy to learn the basic syntax of this and how it works. But basically, this is just like coming on to my body here. And instead of writing it in line, I'm doing it in a separate CSS file. So I have my body and I'm setting the color to red. And then even though this is a heading and this is a paragraph, and these are list items, they're all going to read, there is an exception with the links, we're going to talk about that and how we can overcome things like that and even find what's causing them and everything like that. But inheritance is a very important part of typography, because the font properties in general, the whole group of them are inherited properties. So when we make one change, say to our body, the entire page will change. And that means I can come here and I can set a font family for my entire site. So I'm just going to say saw serif now. So we have something that looks a little bit nicer. And you can see everything has changed there. And that just makes my life a lot easier, because then I don't need to worry about like, oh, I need my h1, my h2, my paragraph, my list, I don't have to select them all individually. I can set global styles on my body. And this is where I tend to do most of my styling. And then we'll see how we can overwrite things a little bit later on. And you can see here, we'll start with this one. I did color before, but we'll talk more about color in a second. We have this one, which is our font family, which sets well, our font family. So you can be very generic here with things like saw serif or serif. And it's going to just choose the system default. And that will be different, depending on which operating system you're on, and even older computers might have a different serif or saw serif as well. So you don't know exactly what font you're getting, but you're choosing more of the family of font. You also have mono space that you could put in here for like the computer style ones there, like my text editor. This is a mono space font. So we have a few different generic ones, or you could put in a very specific ones here as well. Now there is a got you when it comes to putting specific fonts in like let's say I put Georgia, which is a Georgia like that. This is a serif font. So you can see it switched over to serif. And just to compare it to my serif like this, you can see it looks a little bit different because I'm choosing this one specific font. The problem is somebody's computer might not have Georgia installed on it. And for this to work, the person needs access to this font. If they don't have it installed, it won't work. So often you see things like this where then you have a saw serif, or not a saw serif, it would be a serif after. So if the person's computer doesn't have Georgia, it's going to go over to a serif instead and we just comma separate them. So ideally, it would be Georgia. If that doesn't work, it goes to serif. And you can even see my computer or my VS code, I should say when I start writing Georgia, I get all these suggestions so I can choose Georgia. And what this is doing is creating a very long font stack or very long and we have three. So it wants Georgia. If that doesn't work, we're going to try Times New Roman. If that doesn't work, we'll try times. If that doesn't work, then we'll just go to a default serif font. And this is called a font stack where we're including fallback fonts along the way for if people don't have fonts installed on their computer. And if you're wondering why this one is in quotation marks and this one isn't, I could easily enough have that one and it wouldn't make a difference. The only reason this one has to be and VS code was automatically doing it is because I have spaces in the name. If there's no spaces in the name, it's not required to have the quotations around it, but you can include them. It won't change anything. But as soon as you have spaces in the name of the font, then you need to include those quotation marks. And if you're wondering about things like what if I want a font that I know the person doesn't have, for example, there's a font that I have on my computer called Alaska, which I quite like. And you don't have that on yours. So this wouldn't work on your computer, but it works on mine because I know I have it installed. But there are ways of including these. I can either upload the font to my server and have them available and we have something called a font face to be able to make sure that it's accessible. And then there's also Google fonts and other font services like that that host the fonts online. I'm not going to get into that now. It's a little bit beyond the scope of what we're doing here, but I'll link to some extra information down below just in case you are curious about that. But for now I'd like to move on. And I'm just going to switch this one back to a standard saw serif for the time being. The next one is another one that we often change which is our font size and the default in browsers tends to be 16 pixels. There are ways of a user can overwrite this. But that tends to be the default size and it tends to be a little bit small. I do like boosting this up a little bit and making it a little bit bigger going to 18. Some projects I'll even go up to 21. And often when you're first learning you'll be seeing pixels like this though font sizes in general I wouldn't recommend pixels for just for accessibility reasons. I would recommend using rem units and another one you'll see is m units. These can be useful but usually you want a rem and not an m. There's a few exceptions. But if you're wondering what the difference what's an m and what's a rem basically a rem is my root m. So they're very similar units and one rem remember I said the browser default is 16 pixels. So like behind the scenes where you don't have to write this behind the scenes there's usually a font size of 16 and it's not even on I mean it's basically on the HTML we don't definitely don't want to do this. But it's just to say that this one rem is looking at this 16 pixels here. So this one is this size. And then if I did this as a one point five we're going one point five times bigger than what we have right here. But we don't need this to be here because that's already there behind the scenes and it's the browser that's actually controlling that. And the reason we don't want to set font sizes and pixels in general and we want to use m or rem and in general I will suggest using rem is because if I declare it in pixels it will overwrite the user's preference. Whereas if I use a rem it's going to build on top of the user's preference. And this might seem a little bit strange you might say well I really want it to be 18 pixels. But you might have someone who's changed their system preferences to have larger font sizes. That means if you're going and saying it is 16 pixels they'll probably just leave your site because their font size is really small when they've specifically set things up to have bigger font sizes because it's easier for them to read that way. So by using rem we're just being a little bit more inclusive and we're catering to our users which is something that we always want to do. It can feel a little bit strange because your base 16 is a hard place to work from. There's some tricks that you can use to get around that. But rem units is the industry standard. It's what you'll see used on most sites and I would recommend that you get used to using them and it's really not that difficult you get used to it very quickly. It feels awkward for a couple of days and then you start seeing that you're always using one one point one two five one point two five two three you know you get used to it you sort of know what each one of them is. And so yeah I just really would recommend early on getting into rem and just sticking with it so you don't have to break a habit later on if you're making that habit an early one that's amazing and you'll be good to go from forever basically the next one we're going to stick with the font properties for now so the ones that are prefixed with font is font weight and you can see there is a lot of them here VS code you get all these we're not you don't need to remember all of these the font feature settings don't worry font variant don't worry font stretch don't even worry the kerning the language override these are things you don't need to know every single font property but font weight is a good one to know and once again this is inherited but you'll we'll see something interesting here and so let's start with doing a 700 here and you can see my fonts got bolder but now if I go to 400 they're going to go and get lighter I'm using numbers here you'll also see things like regular and regular is not going to change anything I could come in with bold and then things get bold so there's keywords or there's number values I tend to suggest just using the number values 400 is basically always equal to the regular 700 is the bold that we see here and you quickly get used to those the reason that we have these is because some fonts and I don't think this one does but if I do a 500 nothing will change because my default sauce there doesn't have anything between the 400 and the 700 but some fonts will have this for example let's change this over to system UI which is a bit of a nicer font a Saucer font still but if I put this at 400 you can see it looks like that I could bring that up to 500 it's a little bit bolder I can go to 600 600 doesn't actually change but 700 will make it even bolder 800 gets even bolder than that 900 800 and 900 in this case are the same and so there are gaps along the way some fonts will only have a 400 some fonts will have everything from 100 to 900 so it depends on the font that you're getting and what styles are available for it and if you're like this is you feel like that strange you've seen this before if we're here in Google Docs let's go and make this font size a lot bigger so we can see it a bit more clearly and if I look here I have aerial and I just have aerial and of course we have that bold and italic that are you know across the top but if I go and I look at some of these other fonts let's go to Lado I have a thin a light a normal a bold of black this would probably be my 100 my 300 400 700 900 most are at look at that we have a whole bunch to choose from with most are at so 100 200 300 400 500 600 700 800 900 900 so this one actually has all of them available through the whole scale of different sizes and this is one of the reasons I would recommend using the numbers here rather than using normal or bold and having all of these here and the fact that you might want something that's your extra light or your thin you don't want to remember those you just remember 100 is really light 900 is really bold and you just have that scale that you can go between and some again you are limited by what's available in the font as I said before if we go to look at say Lado I don't have the extra thin so 100 probably wouldn't do anything so it does depend on the font family that you're setting here as well but here it let's go in so 300 to 400 you can see it does make a change with this one so font weights right there the last one and this is one I don't find I change very often but is font style and so we can throw an italic on there and make my font italic or we can do normal which is your normal and you also have oblique and in this case the oblique and the italic will probably look the same italic I tend never to use oblique but it's the main difference here let's see actually if we do a let's try Georgia again because we might see a difference here with Georgia that's oblique and let's try italic we don't see a difference some fonts you will and it's usually going to be with Sarah fonts where there is a difference between the two of them where oblique is sort of tilting the letters whereas an italic is actually going to change some of the characters themselves so there can be a difference but usually you're just going to see italic here italic or you'll see regular this is one of those ones I wouldn't even suggest memorizing it's just good to know that there is a way to make your text italic or turn off italic text if you have some that is italic and you don't want it to be you just Google CSS font italic or something like that and you're going to find it so it's really about being aware that this exists because it's not often you're making something italic or at least in my own experience and it just comes up in certain situations and you just need to be aware that there's a way of doing it and actually for now we'll leave this in here because we're talking about them and I'm going to put this just to normal because I don't want italic for my entire site and this is sort of the main ones that start with font at the beginning that I would suggest you at least are aware of and know about and these are the three that you use on the most regular basis and we have quite a few more to go so if this is feeling like how am I going to remember them all again Google is your friend but if you would like I'm going to link down below to a cheat sheet that I have that covers all of the essential font properties or text related properties is anything I talk about in this video will be in that cheat sheet so you can quickly reference to it if you need to and the next one is one that we've talked about and this is one of the ones that it's like color which is like why is it just color and let's put blue this time and change things to blue and so we have all like it's font it's font it's font it's font like why is it not font color it's not font color because it's not and we just have to sort of go with the flow on this and they decided it was color and that's that's what it is so if you try doing font color it's not going to work and nothing nothing happens text color same thing we just have color and you know what let's make our color red once again because this is somewhere where I want to talk and this happened with the bold text and I sort of passed over it really fast and now it's happening here with my links where my links aren't changing to whoops I put right here and the color is read I'm like wait my colors are wrong there we go so I've changed it I talked about inheritance where my properties are being inherited but clearly it's not being inherited everywhere because even though I've set my font weight to 400 the title up here is still bold and then if I look through down in here again we still have some bold text showing up and of course not everything is read and the reason for that is while most properties are inherited with something like a link there's a default styling on it and if ever this happens and you're not sure why it's happening right click on the element go down to inspect and take a look and it's going to open up the our dev tools here I'm not going to do a deep dive of them if you've never opened these before this is your best friend for just doing development in general because what it's done is it's highlighted my link here you can see it's this is the link and I can come down here and I can see that the color is actually being crossed off because there is a user agent style that's setting a web kit link which is a funny thing to see here but this is what's actually setting the color and so I would always suggest this look down here and see if there's something being applied and if it's being crossed off there's two reasons usually one of them is you made a typo so if you made a typo it will actually give you a little warning here that there's it's an invalid property or invalid value or you'll see it's crossed off and there's something else higher up where it's being applied and it's going to say user agent style sheet and that means this is coming from the browser so how do we overwrite it then well we just have to be more specific in our CSS because here I haven't told my links that they're supposed to be read I would just said that my body should be read and I'm relying on inheritance so what I could do then is I could actually choose my links and I could say that my color is now red and they're going to switch over now I wouldn't suggest this our links should stand out so maybe I'll make my links green just so they're different and now we can see that I can control those links independently let's turn off the red because it's really ugly and just put color I'm just going to do a we'll come in with the hex code here of like a three three three which is a slightly lighter gray color and this is the same thing with my headings here so I could come and say I have my heading one should be a font weight and I actually want this one to be a 400 and so it's not going to be bold anymore and then just like my font size here I was relying on inheritance and just really fast let's make that a bit bigger everything is growing with that so it's all staying at the original proportions things were at and the whole site is growing based on the base font size that I've put in my body here so 1.125 everything shrinks back down but I could come directly on my H1 not rely on inheritance anymore and say that my font size here is three rem and make it bigger or I want five rem because I need a really big font size or whatever it is but we rely on inheritance as much as we can to write less CSS and then I can come on specific areas and I could even come on my lists here let's do an unordered list and say that my color here is going to be purple I'm not sure why I would do that you can see here my unordered list has switched over to purple and even my bullet points here have but because these are links the links are being specifically set to green so we go as generic as possible and then we select individual things to be able to overwrite them if we need to for anything specific but the more you can put on your body the less CSS you're going to write in general now color is one of those ones that is pretty straightforward but we do have another one which is line height which is one of the other ones that doesn't start with either text or font so line height and line height is the distance between our lines if you're coming from typography you know this is letting and this is a weird one because you can put pixel values you can use REM so I could say to REM here and put a lot more distance between my lines this is actually one of the very few CSS properties that accepts a unit list value and it's actually recommended that you use the unit list one so here I could do a one point five and this one point five is going to be one point five times bigger than the font size and this will be different for all of them so my H one here that I just put this big font size on a five REM that means my line height is one point five times bigger than the font size I put here if I did this as a one just like that now my line height is equal to the font size bigger the font size the line height will always match it and the default value for this is a one point four which is a little bit tight for regular paragraph text it squishes things a little bit and so in general you'll see recommendations to start sites off with a one point five one point six or one point seven which just spaces things out a little bit and makes it a little bit more friendly to read depending on what you want the font you're using all of these things change the line height that you might use on something and of course if you have an existing design you can look at what it is there as well and of course you might have an existing design and you can just use whatever line height they've specifically given in those cases that coming in with a unit list number here is the sort of industry practice and it's just a multiplier of the font size value that's on whatever right and of course we can modify this on individual things I'm just going to boost my font size up really big here for this example by doing that like this the gap here is really big so that's my age to so you can always select your age to and say that my line height on the age to is a one point one because I want to bring this much closer together with the one point seven that we were using looks great everywhere else so this is something you'll tend to see where the larger font sizes get smaller line heights so you sort of set like a default one for most of your stuff and then on your big headings and things like that you might have to rain that in a little bit go in the one point one one point two range and let's bring this back down to the one point one two five that we had before just so it's not too big and we can keep on going now we're going to start with the ones that are prefixed with text and once again you'll see like holy moly that's a lot of things that are prefixed with text you do not need to know them all one of the common ones though is text align which has the we'll do a right so everything lines up on the right side or there is the text align center that centers everything and that one is nice and straightforward I think and once again you might not want to do everything we can say that my text align is on the left but maybe I want a specific section so let's go look here just so it's not my entire site but maybe this entire header I want it to be centered so we can select just the header of my site and say that has a text align of center on it and now only that area is centered and the one thing here like I'm putting this I wouldn't normally include a text line left because it's the default so unless I really needed it because I'm overwriting something that's already centered I wouldn't bother writing that and that's another thing with CSS is don't declare something so don't write in a width don't write in a color if it is the default value there's no reason to write it if you don't need to write it only write things that you need because you're changing what the defaults are so if my font size was one rem I probably wouldn't bother with that because one rem is the default value already if I'm changing that value then I'll actually include it within my declarations so I don't want to put a text line left as I just said I don't want to declare something I don't need but I'll leave this one down here just on the header area and just for fun let's come here and also say that the color is going to be purple so the entire header becomes purple once again we can put a color here and they get more specific and overwrite it for one area that we want now let's actually come down and I you know what we'll do we'll stick with our header normally I wouldn't do this for all of here but we'll stick with the next ones we have text align we're going to do a text transformation or text transform and text transforms an interesting one just because it's a bit of a funny name but the one you'll probably use this for the most as uppercase or it makes your text uppercase we can also do this as lowercase so if you do something it's lowercase if it was capitalized so here let's just take this line off I'm going to do a control forward slash and that turns in vs code will turn it into a comment and if you're on a Mac it would be command forward slash and hit save so you can see the two s's here by default were uppercase and if I put on lowercase it will put everything in lowercase it removes any capitalization whatsoever and there is also the other one that I never use which is capitalize and capitalize will make the first letter of every word a capital so just for fun if we move this over to my body and hit save you can see the first word of everything is being capitalized that could be useful for like blog post titles or something like that it's not true in English title case you don't capitalize every word but it's a nice quick fix if you need something like that for a title like here normally of wouldn't be capitalized but we don't have that can specific control with the text transform so it's either uppercase lowercase or capitalize again uppercase is the one I find I use it the most often for but it could be that you copy paste a text that was all uppercase you can actually use this to get rid of that even though I'd probably just rewrite it and the last one we're going to do is I'm going to do it specifically on my links because links come with them it's another one of those default values if we go and take a look here in my dev tools we have that and I can see that there is a text decoration of underline coming from my user agent style sheet and I want to talk a little bit about it because a lot of people like doing this text decoration of none and removing the text decoration and I wouldn't recommend you do this from links so I'm showing you how you can do it but the problem now is it's not as obvious that it's a link it just looks like it's text that's a different color and usually with links we want to do as much as possible to make people aware that they're a link and it's a such a standard on the web now that the text is a different color and has an underline on it so I would encourage you to keep them the one exception for that is in navigation menus where often we don't because it's just such a common pattern that we don't need the underline in those situations because it's really obvious it's a navigation those are actually links so that is one place that I use the text decoration of none you could also I want on my each one here I could say that I have a text text decoration of underline and I can add it in underline and maybe I just want that it's not a link it's just I'm making it underline because I want an underline on there the ones that you'll probably use less often but you do have the choices of our overline which puts it on top instead and we also have strike through which I think isn't strike through it's the line through that crosses out your text this is visual only so there is we actually have a strike through element you can use that comes with this as a default is just an S element that you can use but it is an option if you want to style things with the line through and interestingly you can actually do an underline space overline have multiple values on there and have them like that you'll notice this the space on the top is different from the bottom there are actually some properties you can use these days to control your text decoration so you could look into those if you want but this is sort of you're just getting started do not overwhelm yourself and again you don't need to memorize these you just need to be aware that you can control all of these things and you're going to be using these are the ones you're going to be using so much on such a regular basis that within just a few days a lot of them you're going to remember so just start using them and if you do want that cheat sheet I have again it is linked down below so you can use that just to help you out just so you have it on the side and in that cheat sheet I also show some of the units and the different values we can use as well so it just gives you a nice quick reference if you think that would help you out otherwise Google is just your best friend have no shame in Googling things whatsoever and if you are really new to HTML and CSS and you're just starting to get into web development I am doing beginner friendly videos every single Tuesday for the foreseeable future so if you enjoyed this video you like my teaching style and you'd like more beginner friendly content maybe do consider hitting that subscribe button and with that I would like to thank my enablers of awesome Andrew James, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome