Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
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.
Find answers to the most frequently asked questions about Typography for Web Designers.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.