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.
It's time to find a good line length for our sans serif bibliography. If a line length is too long, our eyes and brain have to work harder to follow the whole line of text. Readers can end up reading the same line of text over and over again. On the other hand when text lines are too short, the lines can feel choppy and undermine the rhythm of the text. A recommended line length for text on the Web is about 75 to 85 characters per line.
So let's take a look at our PT Sans set at 79 characters per line. The right ragged edge is more jagged than I'd like to see it. There is quite a discrepancy between the long and short lines in the text, so this line length may not work for us. I don't want to go any longer because this is a list of resources we are working with and each resource only has one short paragraph. I'm concerned about the text looking too horizontal, even if the line length is within range for readability.
So let's try going a little shorter. Here the line length is 74 characters. The text block feels better. The ragged edge is a little comma, but not too even, and the block of text field is substantial. Let's use it. Start by viewing the HTML page through the browser. Yeah, this file doesn't have any line length set at all. We're going to change that, but first we need to figure out the measurement for our line length. We can't tell the browser to make it 74 characters wide, so we'll open up the maockup in Photoshop.
Get the Ruler tool which is under the Eyedropper tool and you start at the start of your longest line and you'll click and drag to the end of your longest line. I've already done it. You can see up here that the width is 450 pixels. So that'll be the width of our div, but it's in pixels and we're using ems for the san serif version of the bibliography. But that's fine, because we know how to convert pixels to ems.
We've already changed the base font size to 10 pixels, so we just need to divide our target size, which is 450 pixels, by 10. So we know our line length is 45 ems, which means we need to make our div 45 ems. We'll do this in our CSS document. Go to the ID #resource_list _container. That's the div that's holding your text. Type in width: 45 em. Again, even though I always say ems, we don't use the 's' when we're typing in the syntax.
Let's save our page and we can review it in the browser. I'll hit Refresh and the text is now set at the line length we want and we've used a relative unit of measurement. If you're going to use the relative units of measurement to promote flexible type sizes, it's important to use a relative unit of measurement to make the divs flexible too, not just the type. As type gets bigger or smaller, divs need to get bigger and smaller too; otherwise typo gets too big or too small for the div it's in.
So we've done the right thing by our type. We're using relative units of measurement for the font size, the line height, and the div width. We're on our way to a flexible layout. As I mentioned in a previous lesson, if you're interested in learning more about flexible layouts, I recommend the article "Fluid Grids" by Ethan Marcotte at alistapart.com.
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.