4.6 CSS: Typography
Setting the typography styling early on is something I always recommend. That's what we'll do in this lesson.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.6 CSS: Typography
Welcome back. In the previous video, I wrote the variables.less file. Now, it's time to move on to typography. So, I'm gonna do import typography.less and I also go ahead and create that inside the less folder. So, I'm gonna start with the body tag. Set the text color, which is color text. And I'm just gonna go back and forth now and check on how it looks like. Next, I'm gonna choose the font. First of all, the font size, so body-font-size. Next, I would have to do this. Slash and line height. But doing slash after a variable would just mean division, so I got a did till design and then quotes and put the slash between the quotes. And then I could do baseline and then I could choose the body-font. Save that and nothing's happening. Let's see if I got this right, so body-font-size, baseline body-fonts. Let's look at the CSS. So body, font, oh, there seems to be a problem here in the variables file. So body-font size you need to use parentheses here and here as well. So now save this again and yeah, there it is. So we now have the new font size, the new baseline and the new font. Next, I'm gonna add -webkit-font-smoothing: antialiased and this will render to fonts differently. It will make them look a bit better as you can see. Okay. Next, target the paragraphs and let's set some margins. So, I want zero on the top, zero on the right, base line on the bottom, which is 27 pixels and zero on the left. Okay. And then in my PSD, I have some links that are italics. So, I'm gonna target all links inside paragraphs and set a font-style to italic. Next, I'm gonna target the anchor tags, set the color to color-link. Okay. So now they are orange. And also, set a hover state. So, on hover, they will change their color to color-text. What else. Let's reset some styles for the list. So, ul, ol and list item. I'm gonna set margin and padding to zero. [BLANK_AUDIO] Now the only thing left in typography is to define the headings. I'm first going to target all of them, h1 through h3. And I'm gonna set their font family to Roboto and Helvetica Neue. And also, I'm gonna set a font weight of 400, which is the light version. Okay. So these are the headings. This is an h1, this is an h2 and this is an h3. Now targeting each heading individually. So the font-size for an h1 is 55, so 55 pixels. It's all uppercase, so text-transform: uppercase and I'm gonna set a line height of 1.2. Now depending on the font-size, I might choose a bigger or a smaller line height. So for example, on headings, bigger the font-size, the lower the line-height. To give you an example on the h2, my font-size will be, let's see, 32 pixels. This is also upper case, but my line-height will be a bit bigger. So, it's gonna be 1.3 instead of 1.2. On the h3, my font-size is 23 pixels and the line-height, I'm gonna set it to 1.4. And finally we also have an h4, which I'm using in the portfolio page. It's this one right here. So this is using 16 pixels, bold, Open Sans and it also has some letter spacing right here. Color. I'm gonna choose color-light-text, I think it was called. Color, yep, color-light-text. Font-size at 16 pixels. Font-weight will be bold and I'm also using a letter-spacing. I'll, I'm gonna put 2 pixels here and it's also uppercase. So text-transform: uppercase. Let's see it refresh once again. And this says, h1, h2, h3 and the portfolio will contain an h4. I'm also going to add a bit of letter-spacing to the h1 and h2. So, I'm gonna put, let's see, 2 pixels here and on H2, only 1 pixel, just like that. Okay. That's basically it for typography. Now speaking of typography, we have two more elements that we need to add. The first one is used to center content, so you can see it in the footer, for example. And I'm gonna add in the typography section. So center-content. It basically does text-align center and the last one is also in in the footer and it's right here. Narrow paragraph. So put this in actually in the paragraph section. [BLANK_AUDIO] Okay. This will translate to paragraph with the class of narrow-p. So what I'm gonna do here is set a width to about 65%. Let's refresh. Yep, there it is. And also, you can see that it's not centered any more. So what I'll do is also set a margin to zero top, auto on the right, baseline on the bottom and auto again on the left. And that will make this paragraph center correctly. All right. That's it for this lesson. Next time, I'll take care of some of the most common elements in our web page, buttons and forms. See you there.