7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 55 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Working With Typography

Text is king in our web pages and apps. So naturally, you want to know how to style them using Tailwind's typography-oriented classes. There are lots, and we won't cover them all, but you'll have a solid understanding of the basics and patterns after this lesson.

Related Links

2.3 Working With Typography

In this lesson we're going to focus primarily on typography, so things that revolve around text and just like normal CSS, there are a lot of classes. Some start with font, some start with text, some don't start with either of those. Now, we aren't going to take an exhaustive look at typography and that's okay. There are quite a few classes that you will use probably in every project and that's what we are going to focus on in this lesson. So the first thing I want to do is make our branding stand out a little bit more and one way that we can do that is by making it bold. So let's go to our div element for a branding and let's add a class called font bold. And that makes perfect sense because if we were going to set anything as bold using CSS, we would use the font-weight property, and voila, that is bold. Now, let's also change the font family and once again, this makes perfect sense because if we were going to set the font family through just normal CSS, we would use the font family property. So in this case, the default is already a sans serif font, we are going to make this serif, it's not gonna look the best but this is just for demonstration purposes. So here we can see that by setting font serif, we are now using a serif font for our branding, and that's fine. But now let's say that's okay, this is standing out but let's make it just a little bit smaller. Well, you might think that we would want to use a font size because well that makes perfect sense. However, that's not the case instead here we are gonna start the class with with text, and then we specify the size that we want. Now, there are a lot of sizes that we can choose from, there's a small sm for short. There's a medium in D, there's a large LG, there's also an extra large and there's a to excel and things like that, I'm just gonna make this small. Now the reason why this is starting with text as opposed to font, is because it's doing more than just setting the font size, it's also setting the line height. If we inspect this element, we can look at the CSS classes that are applied and the properties that it's doing. And you can see that right here for text small it is setting the font size and the line height. And in fact, the documentation is going to show us that as well. So if we just go to the documentation, go to font, we can see all of the different sizes that are available to us. So there's extra small, small base, I lied earlier, I thought that there was a medium, there's not, there's base, large, extra large, and so on and you can see that the properties that it sets. This is one thing that's very nice about the tailwind documentation is that it tells you the class that you can use and the properties that it applies. So, going back to our markup, since we made our branding using the small tags, we still want this to stand out, especially in relation to the menu. So that means we need to use a smaller size of font for the menu itself, so let's do that. We will use the text extra small and I don't necessarily want to use white as the menu color, in fact, I would prefer to have something greyish so that whenever we hover over the links, then the link will change to white. We aren't going to worry about hovering just yet, but for right now, we can easily set the text to a shade of grey and let's use 400, so if we look there, we can see that now our branding is bold and surf. And then we have our menu that is smaller but do notice that the vertical alignment is a little bit out. So what I want to do then is make sure that the items inside of our flexbox container are set to align middle, so if we look now that is more of what I wanted. Now we are currently on the homepage, so let's have something that's going to work kind of like an active for the link so that we can track which page that we are on, so we are on home. So let's make this semi bold, so we will use a font, semi bold and that will give us some font weight for home so that we can distinguish between home and the other links. But of course, with some spacing there would be good as well, so let's add some padding. Now when it comes to padding, we have four sides, we have top, right, bottom and left. But really in our case, we only want the padding horizontally, so what we can do then is start with p for padding, and then we want to apply padding only to the right into the left. So we would use x so thinking in terms of a coordinate plane where we have x and y, y is vertical and x is horizontal. And let's just play around with the horizontal padding value, so that is one and really we need to apply this to the other menu items, so let's do that so that we can get an idea here. And that's better, I think we can go with the horizontal padding too, we can see what that looks like I like that better. Now, this is one criticism of not just tailwind but utility oriented CSS frameworks, in that we have all of the CSS classes. And if we want to style the same things using the same classes, we are repeating a lot of classes and yeah we are, however we would be anyway because if we have a class called menu item, then that class would be applied to all of the menu items within our page. Now the counter argument to that is that, we're gonna have more than just one class here because we will want to do something whenever we hover over these elements. And okay, that's a valid criticism, but there's also a way that we can get around that which we will talk about at a later time, but with that padding, I like that. Now, of course, there's a lot of other text oriented classes that we could use, there's line height, there's letter spacing. If we want to to align text we could do so very easily, the vertical align is one that we just use, the align middle to align the items inside of our navbar, in the middle of the navbar. So when it comes to text, I highly recommend just keeping the typography open in one tab. In fact, whenever I am writing an application, I usually have multiple tabs open for different aspects that I want to style.

Back to the top