Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
What we're going to discuss in this chapter is, what is in fact, CSS Typography. Now, if you talk to someone who is really a hard-core typographer, they are going to get all excited about things like leading and kerning and serifs and swashes and probably buckles. For all I know there's a lot that goes into typography and you know, print designers in particular really, really get into it, and they get into fonts and tight catalogues and that sort of thing. CSS is not so advanced. It doesn't have what a typographer would think of as real kerning control or real leading control.
In fact, those are terms that I only vaguely understand myself but I've talked to a lot of typographers and they tell me that CSS has basically almost nothing in the way of that. But what CSS does allow you to do is affect the fonts that are used, font sizes and some of the presentation of text and that's what we're going to be looking at in this chapter. So for this video what we're going to talk about is line-height, and how you can affect line-height on elements. So as a good basic example, when I say for paragraphs, we're going to have a line-height of three.
This is one of those rare cases in CSS where you can have a numeric value that doesn't have a unit after it. This doesn't mean three pixels and it doesn't mean 3 inches or 3 mm or 3 furlongs or 3 light years or any of those sort of things it's simply 3. What that basically does is it creates a multiplier, it multiplies the elements font size, by three and that gives the line-height. So for the font size here is 15 pixels. If that's what the font size were set to be, then the line-height for these paragraphs is going to be 45 pixels, that's 3 X 15.
The nice thing about the multiplier, of course, is that you don't have to know what the font size is going to be and even if it changes, the line-height stays proportional to whatever the font size is, which you can check out by using Cmd plus and minus to raise or lower the font size, assuming you're using Firefox or Mozilla or one of those kinds of browsers. So, what we've done here like it says, the line- height for paragraphs should be three times as font size.
There's another way to express it actually, which is let's say 3em, and that's going to have the same visual effect here, given the situation. No there is a difference between the two, which I'm going to discuss in just a minute. You can also, as you can tell, you're not only limited to multipliers, you can use light measures if you want to, although it's generally not a great idea. Here's an example, paragraph with the line- height of one pixel. Probably not what you wanted. Not what I would want certainly, but it's something that you can do.
You can't have negative line-heights, so don't get too many crazy ideas, but you can take them down as low as one pixel, just, you know, you probably shouldn't. You can just say line-height 1em and then you would get this sort of text, which is nice enough but if you're particularly attuned to the way that Web browsers sort of lay things up by default, this a little more crowded than is usually the case. This is not entirely the default, generally default is somewhere around 1.2em, depends on the browser though. That's the thing, the CSS specification doesn't say what the default distance for line-height should be because different languages might have different defaults and CSS is not specific to any single language so basically what the CSS specification says is, there should be a default and it should probably be somewhere around 1.2 and you know, that's the thing, web browsers have this tendency to do things around a line-height of 1.2, but they're not exactly the same. Every one is just a little bit different so don't rely on a specific line-height being the default. If you absolutely have to have a specific line-height, you need to go in and declare it yourself, you need to expressly say this is what the line-height is going to be.
Now, you might wonder, ok, I can have line-height 1.2em, and I can have line-height 1.2 and there's no difference there, and so Why would I, why would there be one and not the other. This is actually a little bit difficult to illustrate on the paragraph, but it easier to illustrate on the body element, and I'm going to bring things up a bit. So let's say we set our body to have a line- height of 1.5em. All right, so this is going to make the line-height of the body element 1.5 times the font size of the body element.
You notice everything sort of spread out a little bit because what happens is, let's say that the body's font size is 12 pixels, that's what it comes out to be. So whatever combination of circumstances, maybe the user has set it to be that, may be somewhere else in the style sheet we set the body font size should be 12 pixels, whatever it is, just let's assume is 12 pixels. So line-height 1.5em, would multiply that 12 pixels by 1 and a half and get a value of 18 pixels, and then, that value of 18px, 18 pixels for the line-height is what we get inherited by all the descendent elements of the body, if you recall inheritance from an earlier chapter. So H1's, Paragraphs, links whatever, they're all going to inherit that value of 18 px, because I used 1.5em, but if I just say line-height 1.5 then, what gets inherited is not that calculated line of 18 pixels, what gets inherited is the 1.5.
And so you can see, what happens there it's a small chain, but it's still noticeable. Each element multiplies its font size by 1.5, and that's what it uses for its own line-height. So if you have headings that are bigger than the rest of the text, their line- heights will be 1 and a half times their font size, which is going to be larger than one and a half times regular paragraph text. So we go back and make the body 1.5em again. Now, we're back to having the line-heights be calculated 18 pixels, and that's what gets inherited. So look, for example at about tea history, see how it shrunk down, and that's because its line-height is now 18 pixels, it's not 1.5 times its font size is just 18 pixels. Even if that about tea history thing had a font size of 60 pixels or 72 pixels, it's line-height would still be 18 pixels and that would make things kind of crowded so that's why this scaling factor the 1.5 the unitless number is recommended so strongly over things like 1.5em and certainly over pixel line-heights, I mean you can do pixel line-heights but you're really setting yourself up for a lot of anguish, because if you say line-height 15 pixels, then all the elements that descend from that element are going to pick up that line-height of 15 pixels, no matter what their font sizes are.
you could have tiny footer text, that's only 8 pixels tall and it has it's line-height of 15 pixels. So scaling factors are pretty much always preferred over united links like pixels, or ems or whatever the case might be. So that's basically a line-height for you.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.