Font directives - CSS Tutorial

- [Instructor] There are two types of typography classes. So let's take a look at the types that are related to fonts. First off is font family. And you have three different options that you can use. So by adding the font-sans in any of your elements that will display with a sans serif font of course, font-serif uses a serif font and font-mono uses the just monospace font. These are going to be the defaults that your platform will have installed. So it will look different depending on the type of platform that you're using. You can however, customize these by modifying the theme.font family element in the tailwind.config.js file. So you can even create a new font for any of those if you want so you can see here that I created a new type called display. And in here I would put in whichever font I wanted to use. So you could see that they are arrays separated by different elements and each of the elements is the name of a font. So if you've installed a font say from something like Google fonts called custom font. Then you just type in the name here, and then any of the replacements, just in case that font doesn't load or somebody doesn't have that font installed on their machine. And if you actually use this sans-font now it will replace whatever this system will have and it'll try to use Helvetica here, than Arial and then sans-serif. So you can use that to modify any of the default fonts in here as well. You can type in sans and then serif and it will build the font-serif as whatever you specify right here which can be quite useful. In terms of what this looks like, let's check it out on CodePen. So this is going to look different depending on the platform that you're using to look at this. But generally speaking Font Sans will look like this, Font Serif will look like this and then Font Mono would look like this. And by this, I mean, whatever it happens to look like when you preview it on your browser. Now, here at the bottom of each one of these I have added the actual fonts that it's going to try to use. So as you can see, it's trying in all these cases to use the defaults of your operating system, and if that doesn't exist, then it goes through a whole bunch of other fonts until it finds something that it can use. In addition, there are a number of classes that let you specify different font sizes. And for that you actually use text and then the size of the element that you want you would say text and then either one of these different names here like sm and I've specified here, the different sort of default styles that you would get the font size and then the line height. Font size here would be in rems so .75 would be three quarters of the default route M's which is 16 pixels in the default browser and most browsers use 16 pixels. So a base, if you say text-base, then it would use 16 pixels and anything else would be an increment of that. And then 1.5 would be 1.5 ramps. It always goes by the root M's and it's better maybe if you can see what these look like. So, let's take a look at the example. And in the example, you'll see all the different sizes. Again, some of these will depend on the font that you're using in your operating system but you can see kind of what they translate to using this list right here. There are also some properties for Font Weight and those are specify by using fonts and then one of these weights. So you can say something like font-thin or font-normal which of course will be the default font size which happens to be a font with a value of 400. And you can go all the way to black. Now I'm not really a huge fan of these names. I think that the numbers are easier for me to remember but what we get in the default tailwind installation are these names and you can see what they look like if you click on this right here. And you can see that, I've actually had to replace the default font that it would use, because the font that this operating system uses by default doesn't have all these weights. So to do that, if I click here and change view on CodePen, and then go to editor view, what I have done is under Settings and HTML, I'm actually linking to a font family from Google fonts called railway. And then let's go ahead and notice that under my unordered list that I'm using right here I've added that as the style. So everything in here is styled with railway add all of the different font sizes and it does have every one of these. You could see kind of the difference between black and extra bold is very slight, but you could see that the counters, for example, the inside of this, Oh is a little bit smaller than this one right here. And so, not all fonts will have all the weights but you can at least try to style them. It'll kind of go to the nearest weight as well. And you can see in here how I apply these styles. So I try to move as much as I could the styles to the beginning. So if you see this Rex right here there's a whole bunch of other stuff. My goal is to show you everything in context. So you can see that font thin is the style that I apply right here. And then I have this font weight down here in the font-mono and also the font weight here is light. And you can see some of the other classes that we'll be talking about right here as well. So here's font-thin which is Rex and the next one is Dolores. And that one has a font-extralight class. So in all these examples, I try to move everything to the front, as much as I could, and then give you a lot of styles in context of how I might normally use them. So there's a lot of advanced stuff that I'm doing here. Like this divide-y is adding these little lines in between each of the list items. So hopefully you can go in here and play around with what I'm doing. All right, let's keep on going though. Font style, there's really only two things that you can modify under font style. And that's whether an item is italic or not. No italic is going to set the font style to normal. And with all these classes and tailwinds there's usually going to be a style or a class that's going to reset to sort of the default. So not-italic will let you take something that will normally look italic and just make it not be italic. So it's kind of resetting the font style to normal or not-italic in this case and for just about every one of the classes, there's always going to be something in there that allows you to reset. This is built with things like component-based architectures in which by modifying a variable, you're going to be able to control the look and feel of your projects, so you always need those reset classes and classes that let you undo things. And that's what not-italic is doing right there because otherwise, why would you want to make something not-italic? So font smoothing, this was kind of strange. There's actually a couple of different smoothing styles in CSS. And this is another thing that you'll notice, tailwind will have a lot of classes that are there just because they are there in CSS not necessarily because you actually need these classes, but because they're available in CSS and I guess they thought that they would be a good idea. And you can see the difference here that if you use the antialiased class and what I did here is inside each one of these elements is in a list item using these dividers which I showed you are up here and inside I can apply the antialiased to the entire div. So this div is all this stuff right here. It has this title, this paragraph, and even this little pink label. And then underneath actually, looks like these classes are actually still part. So everything here to the left of this pink label is in this div. And then this other div is the pink little label that you see and here and you can see all the classes that I'm using get used to this many classes, that's how tailwind works. You kind of like kick and scream when you first see this many classes being assigned to things but then it starts making sense. And again, it's really built for component based architectures, because I know that if I was going to modify something about, say, like I wanted to make the font bigger for both of these right here, I had a huge list that I would have to go in and maybe like remember to change all the texts 4xl's to 6xl's and I'd have to do that a lot. So you can see that it's not as good whenever you're just styling a simple page. In that case, you want to use the apply and layer directives to actually modify and create some additional styles. But if this was maybe a view component or a react component, this will be really cool because all those styles will be within each one of the components. And then you would just have a loop that prints out all this stuff that you need. So it's really what it's built for. There was also all of these different styles that are related to numbers and weird numerical formulas. And you can see all of them here. These are really challenging because you don't use them a lot, but I guess they thought they were important enough to include them in the framework or in the library. And I've placed them in here for you. So you have things like the ability to create these little ordinal numbers and sometimes some of these things won't show up like, for example, depending on what you have installed on your system, I added this slashed a zero class here and what it normally would do is it would create a font that has a zero, that has a slash assigned to it. But if the device that you're in currently doesn't support it, so it could be the browser doesn't have the right font or perhaps you didn't add the railway font or a font that included a zero, then had lashes then it's just not going to use them. So these aren't quite as useful. And look at this one though the diagonal fractions I think are pretty cool. So you see you get a number like this which I think is nice looking and a little bit shorter. And then you have things like tabular numbers which allow you to kind of try to align the numbers better but honestly, these don't work that great and you would have to have a proper font that support it not just all of these things but each individual sort of style gets assigned a number. So maybe on your operating system these actually look a lot better than they do in mind. And that's all there is to font. It's really weird that there are font classes and then there are texts classes. That's actually a problem with HTML. You'll see that things like letting and other things are in different places because that's the way that CSS names them and tell when it's just trying to follow CSS as lead in this case.