4.4 The Basics of Typography
Today we're going to take a look at some of the various ways we can style our text. We'll look at using fonts, color, letter spacing, and size.
1.Introduction1 lesson, 00:55
2.Week 17 lessons, 50:14
3.Week 28 lessons, 56:02
4.Week 37 lessons, 1:22:49
5.Week 43 lessons, 29:23
6.Final Project5 lessons, 1:19:55
7.Closing Thoughts1 lesson, 00:39
4.4 The Basics of Typography
[SOUND] Today we're gonna take a look at some of the various ways that we can style our text. We'll look at using fonts, we'll take a look at using color, and letter spacing, and size, and lots of things like that. Let's open up our editor and we have the name Nettuts. If we load it in the browser as you would expect, it displays in the browser defaults. So let's begin. I'm gonna go to style.css and I'm gonna target all h1's on the page. And the first thing is, to make it easier to read just for our demo, we're gonna set it really tall, to 60 pixels. Reload, and why don't we set it even taller, 120. There we are. Next again, just for the demo, let's align it on the page, like so. And we'll then apply some margin top, just to get a nice layout so that we can have some fun with this. First, you already know how to change the fonts by doing font-family. And here you can see we have lots of options. If we want monospace, this is a good font choice when embedding code. Reload, and now you can see a monospace font is where every single letter is the exact same width. Select these, you can see that that highlighted section is the exact same width each time. Another option is to use something like Helvetica. Reload, and if the computer has the Helvetica font installed, it will use that. Another option is arial, which is almost identical. You probably could barely tell the difference. And we've learned that if we do sans-serif, the browser will automatically choose a font of that style. Another option would be to use a generic font like cursive. Reload and now you're gonna get a fancy font, and note that it's not a specific font. It's not the cursive font, it'll simply instruct your browser to use any font that's installed on your computer that matches the cursive style. Now, it's important to note that you're not doing print here. So, just because I bought a really amazing font does not mean I can then use it on my website because remember, you're not transmitting fonts with your website. If it works on your computer, that does mean that it will work on another person's computer. Now that does not mean you can't use custom fonts. It just means you can't assume that the person browsing your website is going to have the same fonts installed that you do. Now we'll come back to that shortly. Next, let's take a look at letter spacing. But before we do, I'm gonna bring this back to San Serif. Print designers know that they often tweak the spacing between each letter. And we can do that in CSS as well. Letter-spacing. Now we can set this to a positive or a negative value. Positive, maybe five pixels. You could do something huge, like so. And you can even do a negative value. It's quite common and stylish to do negative 1, which pushes it together ever so slightly. Remember, depending on the font size, you may be able to get away with a little more negative spacing. So with an h1 negative 5 doesn't look that bad. However, if you did p letter-spacing negative 5. And let's go ahead and add that on, like so, you will see that that looks awful, of course, because the font size is much lower. So with the P tag, you might even wanna keep that to its defaults. I'll go ahead and get rid of that and the associated paragraph as well. Now next, we of course can adjust the color of our font. So if you'd like to do a greyish color, you can specify it like so. So now we know that we can manipulate the size of our font, the family, the spacing, the color. You can even do things like text transform. And then if we want to set it to uppercase, what this will do is regardless of the text within your markup, it is going to render it as all caps. Even if this letter is lowercase it's still going to be rendered as uppercase. Alternatively, we can change this to lowercase. And that's going to do what you would expect. That's a nice little effect when you want to adjust the styling of your entire website. Maybe all headings in the side bar need to be capital. This is a nice way to do it. Next, let's take a look at just a couple fun CSS 3 properties that are just recently becoming available to us in the last year or so. We can use a text-shadow. This is pretty fun. Now this is a little more complicated. It accepts a few values. The first one is going to be the x-offset. So why don't we do big values, five pixels. The next value will be the y-offset. And we're gonna push it down. So when I say ten pixels, we're pushing a shadow down ten pixels. The third value is going to be, how much blur should there be? Again I'm gonna set that to ten, and the final value is going to be what color? Let's do an obnoxious color like red. If I load the page now you can see this is pretty neat even though it looks bad, we've added a shadow with pure CSS. Up until a couple years ago, web designers had to use images anytime they wanted to do something like this. So it's really fantastic that we can now do this directly in the browser. Now of course you would probably wanna do a subtler color. Maybe black or an off black. Reload and that's looking better. But here's a nice technique. What if we adjusted this first to three, remember subtlety is always better. Reload. And now you get a slight glow all around, or if you even wanna make the blur a little bit sharper, and we're gonna put the y-axis down to one. You can get a cleaner look. However, if we make it really sharp you can get the illusion of an outline. So watch what happens if I say text-shadow. I'm not gonna push it left or right at all. So it's gonna remain where it is. But then I'm gonna push it down the y-axis one pixel worth. And then I want no blur at all. And I'm gonna set the color to black. Now watch what happens. Can you see that there is a slight glow below the text? You'll be able to see this easier if I use a big bright color. And now, can you see there's a little bit of red underneath. And this is subtle but it really adds quite a bit to your layout. So for example, if I have a body background of a grayish color and then I set a text shadow to our text of white using this technique, you can get kind of a glow in the background, can't you? Let's change this color to black, and now you can see we have black but a slight outline underneath. If you instead want this little glow to be on top, you can change the y-axis to negative, which means it's going to be pushed up. Reload, and now it's being displayed like so. Though you can have a lot of fun with this. So if I set it to five pixels, reload, now you're getting kind of a side glow. You can do a lot of things too. Especially when you can use a comma-separated list of values. So, what if this time I wanted to do six pixels, negative two pixels, no blur and red. Now, we have multiple shadows. So, we have white and then we're outlining that white. And notice I do one more than each. Because if I did something like four and negative one, it's going to be covered up and you'll barely be able to see it. So I'm gonna make sure that I outline this white value by putting it one pixel more on each side. Why don't we change this from one to two. Anyhow, you can have a lot of fun playing with text shadows. Things like the traditional fire effect that you would create when learning Photoshop, you can actually do that within CSS as well simply by applying a long list of text shadows. For now I'm gonna bring this back to zero, one pixel, zero white. Again, that's x-axis, y-axis, blur, and color. Now another option that we have for styling our text is the font-variant property. You can change it to things like small caps, where it'll make it a capital but it'll use small caps. And if you've used Photoshop before, you'll be familiar with this effect. Other values that you might like to use, inherit, which will receive the default font variant from its parent. Most of the time though you would only use font variant if you're going to do small caps. Now, let's take a look at how we can use custom fonts. And I'm gonna show you the easiest way which is by using the Google font API. If we browse to Google.com/webfont you can see that we have a huge list of fonts. Now, I will warn you they're not always the greatest fonts ever made. But you can find some nice stuff. In this case, let's look at something that's very noticeable, that it's a custom font. So I'm gonna scroll down and let's find something, maybe like this. This obviously is not a default font. So I'm gonna click Quick Use, and if I scroll down you'll see that it gives us the option of adding a link element to our HTML that links to this font. And then you can see to use it it's as simple as creating a font family property and passing in the value. Copy this. Next I'm going to paste it in and because we're going to be relying on this font, I'm gonna place it before my base stylesheet. Now you'll note here type equals text/css. This is something that you'll see quite a bit. Type equals text/css. However its not important. It, the browser will default to that anyway, so it's a little bit redundant, you don't need to use it. You could remove it here as well, and you're gonna get the exact same effect. All right, so now let's use it within our stylesheet. We can go back and copy this sample right here, and replace it. And now we're specifying that we're gonna use that custom font that we linked to. And then we're providing a fallback to cursive. If I come here and I reload the page, sure enough, we're using a custom font and we were able to do this in 15 seconds or so. Now this might sound normal to you, but to actual web designers who have been working in the business for a long time, this is really amazing. Before we had to use very complicated techniques, whether we were using terrible images or even, believe it or not, we were using something called Siffer at the time, and this was Flash. We would use Flash to add custom text. It was horrible. It was really difficult to get set up. The fact that we can do this now is really incredible, whether you [LAUGH] see it or not. All right, so that's gonna do it for today. You've learned quite a bit about typography. There's far more to learn, but this will certainly get you started.