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.
In this lesson we are going to apply our system of hierarchy to a bibliography with the serif font. You will need the files biblio_serif_hierarchy.html and biblio_serif_hierarchy.css from the Exercise folder. You'll also need to create a fonts folder containing the web font files for Chopin Script. You can get the Chopin Script files from fontsquirrel.com. If you're just joining us or if you'd like a refresher on how to download and organize Font Squirrel's web fonts, see Chapter 1, Lesson 7, Downloading web fonts, from earlier in this course.
Once you've created a fonts folder, keep a copy of it on your desktop. You will need to use it for the remainder of this course, but you will need to put a copy of it in the Exercise folder for this lesson for it to work. Open up the HTML file in the browser to see what we are working with. I already have it opened here. We have got our text and the color settings from our earlier lessons but we've got a lot more content on the page now.
The titles of the resources are still set in the Verdana Bold all caps. We will have to change those and the names of the sections in the main headings are just default text because we haven't set them as headings yet. Let's go in and do that now. Open up the HTML document in your text editor. There we can see the main headline, Typography Resources, the second headline, Choosing and Using Fonts, and our resource headline, The Elements of Typographic Style.
But we have a problem. The resource title is still using the h1 and it's no longer our main heading. Typography Resources is our main heading. We need to go in and change that. The easiest way to do this is using a Find and Replace function on your text editor. You can type in your h1 tag and change it your h3 tag because the titles are now your h3 and you can replace them all.
We will need to go back in and do that for the closing tags as well. You may be tempted to just leave all of your title resources as h1 and then go up and use the h2 for the main heading but don't do it. This is not semantically correct. Let me show you what happens to your page on browsers and devices that don't use CSS.
The hierarchy is out of whack. See how your resource titles are the strongest things on the page? They shouldn't be that way. It's not good. We want your text to work on all browsers and devices possible. You want it to work on future devices and with voice recognition software. You need it to have the right hierarchy in your HTML. That's why we changed the h1 tags to h3 tags. Now we need to go in add our h1 and h2 tags. Typography Resources is your main heading.
So we will wrap that in an h1 tag. Choosing and using fonts right here is a subheading. It's a section of the site. So we will wrap that in an h2 tag. We have a couple of more h2s down the page. What I like to do is copy and paste my tags. Let's scroll down. Here is Working with Text on the Page.
I can paste that in and I can even paste and add a slash to close it. I copy and paste whenever possible. It's quicker and it avoids errors. And For the Love of Type down here, it's our very last one. So we have all our tags set in our HTML. We are going to save this file and go over into our CSS file and now we are going to describe how those tags should look.
The h1 uses a web font, the Chopin Script. I have already put the @font-face syntax into the CSS file here and I've already told it to go into your fonts folder to access those font files. If you want to see how and why I did the syntax this way, see Chapter 1, Lesson 8, Applying Web Fonts in CSS with @font-face, from earlier in this course. Now let's style the headings.
Here was our previous h1, the Verdana, bold, uppercase letter spaced text. That's not our h1 anymore. It's our h2. The easiest way to change this is to just make that our h2. And let's go in and style our h1. h1 and our curly brackets. We are going to be using the font-family from our web font. So I am going to go up and I am going to copy that line and paste it down here and then I'm also going to build a font stack so, comma, Georgia, serif.
Then we are going to finish it off by giving it a font-size of 75 pixels. We are going to align in center. I am going to turn off the bold right because it's an h tag that's going to have an automatic bold there. We will give it a font-weight of normal. Our h2 was already done. Now we can go in and do our h3. I started to put the font family in here but we don't need to because it's set in the universal selector.
What we do need to do though is put in our font-size, 18 pixels. I am going to put in a line-height here of 20 pixels. Again, we are going to turn off our bold, font-weight: normal. We have this italicized. We can do a font- style:italic. That should do it. Typed a lot in here, let's see how it worked. Save this and we can go back and view it in our browser.
Refresh it and excellent! All our fonts are coming in just the way we want them to. So I scroll down. I can see that that h2 is really popping with the dark bold all caps, just the way we want it. But I am going to point out we do have a problem and it's the spacing, Everything is sort of floating on the page with wide bands of white space between them and this undermines the hard work we've done so far to create chunks of text with the headings. So we are going to have to attend to the spacing in the next lesson.
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.