Join Laura Franz for an in-depth discussion in this video Using font size, case, style, letter spacing, weight, and color to convey meaning, part of Typography for Web Designers.
Once we know what we want a word or headline to look like, we style it in the CSS. We'll be using the files quiet.html and quiet.css for this lesson. View the HTML file in a browser. I usually use Firefox and take a look at what we've got. Six words. Three say quiet and three say loud. They seem to be going down in visual importance or hierarchy. That's because I've set them as H1, H2, H3, H4 and H5 in the HTML file.
I've used H2 twice, because I want two of the words to have the same styling. Semantically, H1 or Heading 1 is more important than H2 or Heading 2 and so on. The heading tags are usually used to create hierarchy in a text. We'll do that later on. For right now, we're just using them to style our words. That is, we are going to style the heading tags in our CSS to make the words look the way we want them to look. In this course, I assume you have some experience with HTML and CSS, either in a text editor or in Dreamweaver.
If you aren't familiar with the basics of HTML and CSS, you may find the exercises go a little fast for you. If that happens, I recommend viewing one of the introductory CSS titles in the lynda.com Online Training Library first. I'll be working in TextWrangler, but you're welcome to work in the Code View of Dreamweaver or whatever text editor you prefer. We are working with words that we sort of sketched out in the previous lesson. Here is a screenshot of how we want the words to look. The first word has been set as an H1.
So let's style our H1. We are going to use font- family: Georgia. font-size: 36px. line-height: 120px. font-style: italic. font-weight: normal. text-align: center.
We can also do our H2. Our font-family is Impact. The font-size is 180 pixels. Our line-height is 220 pixels, our font- weight is normal, and our text-align is center. Let's take a moment and save this and review it in our browser.
We refresh the browser and you can see that our H1 and our H2 have been set. Let's go back into the CSS. We can set our H3 font-family: Verdana. Our font-size is 22px. Our line-height is 172px. Our font-weight is normal.
Our text-align is center. We have a letter-spacing on this one, which is new. Set that at 1px to sort of open it up and our color is a light gray. And I notice from seeing my browser out of the corner of my eye here that that H2 should actually be in all uppercase. So we are going to go up to the H2 and we are going to add a line. text-transform: uppercase and that will change that for us the next time we view it in the browser.
Let's go down to our H4 here. Our font-family is Comic Sans MS and you'll notice that's in quotation marks, because there is a space in the title. Whenever we see a space, we need to put quotation marks around it. Our font-size is 150px. Our line-height is 170px. Our font-weight is normal and I keep typing that in because our H tags always come in with a bold. If we don't want them bold, you have to take that off there.
Our text-align is center. And for our H5, our font-family is Verdana, our font-size is 30 px, so this one is going to seem pretty small compared to the rest of them. Our line-height is 160 px. Our letter-spacing is 1px. Our text-transform. We have another uppercase word here, uppercase.
Our text-align: center and our color is red, #cc0000. And I already have an end bracket there, so I can save this, go to the browser, refresh, and excellent! Actually it's not. I think there is something wrong. My Comic Sans isn't working here. So let's go back and take a look at what's going on there. Oh, I am missing that semicolon there.
Happens to the best of us. No matter how many you do this. Okay, let's go back over to the browser and refresh it. Here we go. Now all six words are looking just the way we want them to. Excellent! So as you can see web-safe fonts can be used to create a variety of forms. Knowing how to create meaning with web- safe fonts comes in handy when designing a site with dozens or hundreds of pages of text. They are free, well-designed, and don't increase download time, and you can make the words change using some basic CSS styling.
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes
Skill Level Appropriate for all
Q: Where can I learn more about graphic design?
A: Discover more about this topic by visiting <a href="../../../discover/graphic-design">graphic design on lynda.com</a>.