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 add rule lines to our sans serif bibliography. First, I want to go over some of the things to think about when using rule lines. Rule lines can be used to help chunk text for readers, but they should be used sparingly. If you use a rule line for everything, they lose their power. We lose the strong visual separation between sections, and instead we see a page of lines. Also, when you create lines, use the principle of similarity. If rule lines are meant to separate text into similar chunks of information, the lines should look similar to each other.
If we use lines that look too different from each other, they began to suggest that each section is unique in some way. Here, it looks like the second section is subordinate to the first, like it's a subsection of the top section, but it's not. Here the first section looks more like an introduction to the second section, because the thick rule line below looks like it's the start of the main content, like it's more important even though it's not. On the other hand, sometimes you need to use different kinds of rule lines when there is a different kind of separation.
For example, if we were to add a footer to this layout and wanted to add a rule line, using the exact same kind of rule line might cause a momentary confusion. We expect the rule line to mean, here is a footer separated from the rest of the page. In this case, using a different kind of rule, maybe one that's dotted or a different color will help the reader see immediately that ohhh, whatever comes after this line is different from what came after the other lines. When working with rule lines, you also want to keep them as subtle as possible.
We'll see them, they'll work. You don't have to hit us over the head with them. You might try using a color that stands out less or a thinner rule line to help keep the lines subtle. Finally, keep the rule lines closer to the text they belong to. Here, the rule line suggests the section above it is ending. It draws our eyes to the text above it. Here, the rule line suggests that the next section is beginning. It draws our eyes to the text below it. Here, the rule is just in the middle, which is fine.
It separates the space. But we lose the extra hierarchy gained when visually associating the rule with the text it belongs to. The rule has less meaning here than it does here. It's a subtle difference, but it helps with the chunking. So okay, let's add a 1-pixel rule line to the top of each of the sections in our bibliography. We'll keep the color the same as the text so the rules don't pop out so much and we'll keep it simple. You need the files biblio_sans_rule.html and biblio_sans_rule.css from the Exercise folder.
Open the HTML file in the browser to see what we're working with. The page is just like we left it the last time. All the sections are neatly wrapped in their divs. Let's add the rule lines. We'll do this in our CSS file. We're going to add the rule line above each section. So we'll do it by adding a top border to each section div. So here's our section_container.
We'll add border-top. We're going to make it 1 pixel solid and we're going to use the same color as our text. Quick thing to do here is we can just actually copy that and paste it down here, so we've got a good match, and this will give us a simple 1 pixel solid blue line at the top of each section div. Let's save that and refresh. There we are! It's coming in here.
I think it's maybe a little bit too tight to the text. So we're going to go back in and add a little space. We're going to add padding to the top of our section container because padding gives us space inside the div, so the space will be inside between the border and the content. We'll add padding-top and let's see. We're going to try 1em. So this will give us 10 pixels of space.
We're going to start with this amount of space because it's double the amount of space that we used between our authors and our descriptions and I'd like to try to keep things sort of mathematically related. It gives me a place to start. We can refresh that and see that's working much better. It doesn't feel like it's only connected with that one title. But now the problem is I think we need a little bit more space above the rule line to really help the sections sort of separate from each other. Back in our CSS, we're going to add space above the rule line by using a margin, because margins add space outside of the div.
So the space will be outside of the border, between the border and the div above it. We'll add a margin-top. We're going to try 1.4 em. I'm starting with that measurement because that equals the measurement of our text. We're already using that measurement elsewhere in this file. I'm saving it. We can review it. I think that looks good. That looks like a good separation there. One of the things I'm going to do is I'm going to take the time to scroll up and down.
I know that top is a little tight still. We'll fix that later. I think this is looking really good. All right! So with the rule lines in place, the hierarchy is all set for this version of the bibliography.
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.