So in this video we're going to talk about the topography in the in the tailwind. So we have many things when we talk about the topography, the font family. The font size, different style phone smoothing defund wait, I mean you know line height literally spacing um list style style type. That's really important. List style type. Maybe when you want to create a list you can go or maybe you want to create the navigation, you can go with the list. None. So this is also an option. So and also the text align text decoration, the text indentation. They were virtual liner. You can see that all these things we're going to cover in this video as much as possible. So we're gonna start with the fund family. So this is a fun family. We have three options. Different sounds different. Uh they found serif the fund mono. So you're going to have these three funds. It's up to you whatever you want to apply. So this is going to be the fund family according to your, you know, according to what you choose. So I am simply gonna, you go with the front sounds. So this is the text we have and this is the height we had and we do not need the height for now. I'm just deleting the hike and I'm deleting the do and I'm deleting the, I'm not deleting the, you know the margin or I'm deleting the marginal but I'm adding the padding. P funny, save it go to the browser and we got the P 20 and that is okay now I'm going to apply the space and I'm going to apply the fun since we can apply in a fund sands fund. Sorry for fun mono then there are more things but it is not belongs to the font family. I'm going to go with the fund sands. This is the phone chance. Btw if you want different mo no let's say mono and this is the mono style. There is a slightly slightly different. I simply copying, I'm simply copying and I'm going with different sand so you would have an idea. You can see that this is a foreign song and this is a fond mono. So there is a slight difference between both of them and then similarly when we do that they found signs and found you know there is one more which is found serif. If I apply this serif let's just see what happens. Foreign serif. This is the former sheriff. Now this is you know with the serif and this is the foreign sounds. So there are a few styles we we can apply and we do have it. It is up to you if you want to or not. One more thing when we have multiple you know multiple lines, multiple Dev so I think the P20 is not good here but we can do this here. P So now we're gonna have the padding all around the grid. You can see that. Oh this is not working with the grid by the way he 10 it is not working with the grid, the main grid. I understand that. Yeah it's oh no it's actually working A man actually it is working. But the problem is that this is the whole grid, this is the whole grid and this you know we are not making any um the padding in the in this data and the background color we have in the inner text. If I simply cut that and I paced it off and I delete that. I was also thinking I mean what is happening anyways so just simply delete that now everything I put it to the mean you know I mean great now you can see that this is how it looks now and that looks fine. I mean yeah not bad. Now we are going to do the further things after the foreign family. We have a few more options. We can absolutely apply for example just like the foreign family we can apply the phone size we can apply the phone style. Let's just go with the phone size for now but it is fun size But to call it we were gonna have to to call it by the text so the size of the text can be in the text. Lg you're gonna you're gonna see that if I simply delete this space and I delete this one and I added a space and I write text. Okay the text and then now it's up to me. I want the excess or maybe I want the bigger text I mean you know access. And then if I go to the browser this is you can see that literally the smaller text. But if I make it X. Text X. If I say five X. L. This is gonna be the big big one. Okay because this the size I increased up to five XL. So you but you also can put the S. M. The small size. You can see that this one is a small but you also have the possibility to put the L. G. The large text. This is literally the large text but not the 5XL because that's a different thing anyway. Um And then okay the we have the possibility did you notice one thing? This is excess but this is X. L. So when we talk about the Excel we can make it you know as much as we want. So text text. Now if I type access this is access. But if I talk about Excel so excess means extra small. X. L. Mean extra large. So as much as you want to you can go with the five XL. You can go with the Pete Excel or whatever you want. Let's just go with the ford XL just showing you the difference between all of them. So that's how you can create the hitting and I think uh we had a little exposure on the sizing. So I think that's enough for the for the text size. Fun size actually. So now we can talk about the something else. Let's just talk about the phone style. Um when we talk about the phone style, maybe you want the metallic, maybe you want the non metallic. So this this is the only thing we have. We do not need to put the non italic because by default we're gonna we are having the non italic. But if we want we can write I. T. A. And you're gonna see the italic. So just simply save it. This is the fun, this is going to make the phone style as italic. You can see that. That's that's literally metallic now. But if you just don't want it, you do not need to write it. But if you want to you can write non italic. But bye revolve. The value is non italic automatically. So I think that works uh for the the you know the palace sizing now. Absolutely. There is some more thing and I'm going to apply the more things to the new the another the text which is the fund. Wait, so you have the multiple fund weights. Maybe fund thin fund extra light fund light whatever you want. If I just go there. So you would have an idea of what I'm talking. If I just go there, you can see that the thin extra life mediums, bold, Extra bold. The black. The normal the normal is the normal weight. If I talk normal I do not need to use the fund normal by the way because it's what we call normal. But I can use the font bold. So if I just make it fun bold and I go back you can see that. That's literally bold now. But it is too small I think because just make it L. G not for XLF but L G. At least you can see that now. Okay much better. And I do not like the phone sara. If I'm making it from sand now this is a sense. Okay, awesome. Okay so you can go with the fun bold. You can go with the front medium and I need to save it. Go to the browser. You can see that this is a medium for fun size and then you can go with the semi bold. Extra bold and the black. The black would be actually the final level. You can see that the 1-800 to 900. So you can apply the thin you can apply any of the value you want to. I'm just applying a few. Sorry, this has to be deleted. Save it, go to the browser. You can see that this is actually the black. This is the heaviest size anyways. So I think that was simple to understand now there are more things. I mean for example I'm going to talk about the letter spacing. So. Mm hmm. So the letter is facing is a thing. We sometimes need to put the space between the letters. This is a simple CSS. You can see that it's actually crystal clear. So how the letter is spacing you want from the tracking tighter to tracking. Widest. If I go with the tracking widest copying that and just go in there and I'm simply putting this here and saving it and going through the browser. You can see that there are spaces between every letter. You literally can see that if I simply copy this one and I paste it right there and I just don't put the tracking Widest in the bottom one. You can see that this one is this one is saying but this one has the tracking so maybe you don't want the widest, maybe you want some different value. Like you know, divider or wide or maybe normal. The normal is already applied. I'm gonna go with the white for now this is white. Okay, I'm not going to go for the, you know the normal because normal is normal. I'm gonna go with the tighter road to the browser. You can see that this one is normal. Now this one is tighter so maybe at some step you want the tighter one so you can apply that. I think That makes sense. Now the next one is the line height and the line height. You know, it explains itself. Pretty simple. It's all about the line height. I'm gonna go with the leading 10 and I'm simply copying that. That's gonna make this line stand out and you can see that there is a change of line height. Just see that if I select the above one, you can see that. But if I say like this one, the bottom one you can see literally see that the height of the line is different now. So it's kind of you know kind of you can see that the vivid but it's on the texture level instead of instead of you know the the div level or you can see the block level. So this is the thing you can apply, you have different size like you know the leading, relaxed leading lose leading. None. This is a normal size. Leading tight leading, snug leading normal. So this is none actually. So these are the sizes you can apply and absolutely, these are awesome. Anyways uh there are a few more things we're gonna apply but in the next cast because there is there are a lot of data, I'm just gonna summarize them in the next video. And then we would be, we would consider the typography covered