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 will be putting some breathing room between the text frame and the edge of the page in our traditional bibliography. You need the files biblio_serif_page. html and biblio_serif_page.css from the Exercise folder. You'll also need the fonts folder with the web font files of a Chopin Script. So put a copy of your Fonts folder into the Exercise folder. That way Chopin Script will continue to load properly.
Open up the HTML file in the browser to see what we're working with. The page is set up and we've got a background image. But there is not enough breathing room between the content and the edge of the page. This is a traditional page and the content should live in a text frame. We need more space between the text and the edge of the page to create the text frame. Right now the tight edges mean that the main heading, the text, and the links all look like they're sort of separate from each other.
They look like strangers at a party just standing there and not talking to each other. The text actually looks like it's trying to leave the room here. The elements don't feel like a cohesive unit. Let's change that by adding in some space between the text and the edge of the page and we'll start figuring out how much space we need. Here is a screenshot of our current page. We could go as high as 990 for the width of our page, but that's too wide. See how the page feels empty in spots? We could use a width of 960 pixels.
That's a very popular width. There is even a grid system based on 960, but it's still too wide for what our text needs. Let's try a little narrower. This page is 930 pixels wide now and it looks like it could be good, though I'd like it a little tighter on the left. I've removed some of the space on the left and our page width is now 915 pixels. It looks pretty good, but the main heading feels too close to the top.
Here I've added some space above the main heading and it feels better. It feels like the heading belongs with the content instead of with the browser edge. But now the links feel a little too close to the text. If I move them over a bit it looks pretty good. Looking at my margins of space, the vertical spaces have variety. The horizontal ones feel a bit equal on the outsides. I actually like it, but I wonder if it could be even better. I can try making only the left space a little smaller or I can try making only the right space a little smaller.
Or I can even shift everything over to the left. That is, make the left space smaller and then increase the space on the right, and this works for me. The page is well-balanced. If I look at my margins of space we have good variety and this improves the tension on the page. If I didn't go with this one, my second favorite is the more centered version. It has less tension. It's a little more subdued and classic but this totally works for an elegant page.
You know what, either version would be great. We are going to go with the version with more tension. So now that we've laid out the page let's build it in the CSS. Open up the CSS file and look for the div for the main container. Here it is our main_container ID. The width is 740 pixels, which is what we've been using ever since I added the navigation container to the page. We are going to keep it that width and add the space around our content using padding.
Padding adds space inside the border of the div which is exactly where we want it. We want to add white space inside the edge of our page. So let's add the padding. We'll do our padding-top and we are going to add 20 pixels. For our padding-right we are going to add 125 pixels. For our padding-bottom we are going to use 30 pixels and that's one-and-a-half times the measurement for the padding- top. And for our padding-left we are going to add 50 pixels.
And again, I am avoiding shorthand, but if you know how to use shorthand feel free to do it. And that should do it. Let's review this in our browser. I'll refresh. Excellent! We are going to scroll down and check the bottom margin. As I sort of guessed at that one-and-a-half times the top margin and it looks pretty good. I find that a bottom margin of one-and-a -half times the top margin is a really good place to start. Sometimes I do need to make it a little looser or a little tighter but it works well here. If I scroll up again, the only difference or the only problem we are still having is that the main navigation is still a little bit too close to our text.
So let's go in and add a little space there. We'll do that again in our CSS. In the CSS let's go down and find our unordered list. There it is, and we are going to add a margin right of 10 pixels. I didn't add the space to the div itself because that would have made my nav container need to change size. And whenever possible I like to control the text by styling the text-related element, not the div.
That helps keep our divs in the right places at the right size. So let's save this and review it in our browser. And that moved the navigation links over slightly and it looks great. We are finished with the traditional bibliography. We'll come back later in the course to finish up details like punctuation, but for now for the most part it's done. In this lesson we carefully shaped the page to our text. When we added the padding around the text, we added to the overall width of the page.
We ended up with a page width of 915 pixels. that's the sum of the width of the main container, the padding-left, and the padding-right. Our page is a little narrower than the average web page but it's a perfect fit for our text. There is no rule that says a web site has to use the whole 960 or 990 pixels. It looks great.
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.