Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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're going to work with the CSS and HTML to refine the relationship between our section headers and the resources content in the right-hand column. You'll need the files biblio_sans_ hspace.html and biblio_sans_hspace.css from the Exercise folder. Open the HTML file in the browser to see what we're working with. You can see that the h2s are in a separate column.
That's good. But they're not right yet. First of all, some of the headers are running right into the resources text. Also because they're left-aligned, the space between the section headers and the content in the right-hand column varies from section to section. This one is tight, this one is a little looser, and this one is looser still. Using left-aligned headers in the left column is not always a problem, especially if there's a bit more space between the headings and the content.
Then the variations of horizontal space doesn't stand out as much. But we've got the horizontal spacing here on a tighter side and the text is a generous size. The variation in space stands out. I think I'd preferred them if they were right -aligned, so we've got two problems to fix. Change their alignment and make sure there is space between the two columns. Let's change the alignment first. In the CSS file, we go to our h2 and type in align:right.
We can save this and review it with a reload in our browser and I'm going to double-check and see what I did. align, oh, it might be textalign. It is, textalign. That's better. There we go! So now everything is right-aligned, which is great, but it's made our other problem even worse. Now if every single h2 is bumping right into that text in the right-hand column. So we're going to go and fix that next.
Back in the CSS, we have a couple of options here. One way we could approach this is by adding some left padding on the h3s and the p tags and then because we used those in the right column, if we added a left padding, it would add some space. But then this would also shorten the line length of the text and we've worked hard to find and create a good line length. So I don't want to do that. Instead what we're going to do is add padding to the right of the h2 tags.
So this will bump our h2 tags over a little and then it will give us the gutter that we're looking for. So again, we're under our h2 and we're going to add padding-right. And I tested this earlier. We're going to use 1.2em. Let's save it and review it in our browser. And there we go! So now we have the padding giving us that space. Always scroll down and check everything and all of them look good. There's one thing that I'm not crazy about here though.
I don't like how For the Love of Type breaks and how Type is all by itself on that last line. It looks a little lonely down there, and the heading, it doesn't feel as substantial as the rest of the headings. So what we're going to do is we're going to move another word down and we're going to do that with the br tag. So we need to go into our HTML document, we're going to scroll down and find that h2, For the Love of Type, and we're going to put in a br tag here, br /. There we go.
Save that and then we will review this in our browser. And that looks better. It's more substantial. It's more like the h2 above it. A word of warning. Not all web designers or web typographers would agree with me about using a br tag to control the line length of the heading or text. And in fact, I rarely use them. I only use them for an occasional word here or there and only after I've been very thoughtful about finding the perfect size and line length for my text.
I think they're fine to use once in a while when you've already tried to fix word placement with div width and with padding. In fact, this is the only br tag I'll use for this entire course and that feels about right, about usual for how much I actually use br tags. I only use them once in a great while. So now that we've got our h2s working, I'd like to move to h1 over and let me show why. I'd like to move it so that it lines up with our text. I think it'll really help our h2 stand out, so let's do that in our CSS.
So we're moving our h1 over, but we're going to control placement with the div that the h1 is in. Let's find that there. Here it is, h1_container. We're going to float this left and we're going to change our width to 45em. So now it's the same width as the resource_list_container that we're going to line it up with. We're also going to add a padding-left of 15em and that's the same measurement as the section_head_container.
And so that way it'll be bumped over just the same amount as the section_head_container and it will line up with the resource_list_container. Let's save this and review it in our browser. And excellent! It's all lined up. It looks great. We do have a couple of problems. The main heading is a little tight to the rest of the text, but we're going to take care of that later. First, I want to get our rule lines in and we're going to do that 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.