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're going to fix the dashes in our text. You need the files biblio_serif_dashes. html and biblio_serif_dashes.css from the Exercise folder. You also need the Fonts folder with the Chopin Script web font files in it. So drag a copy of your Fonts folder into your Exercise Folder. That way the Chopin Script font will continue to work. Open up the HTML file in the browser to see what we're working with. Scroll down towards the bottom of the page and we're going to stop at A Type Primer.
If we zoom in, you can see clearly here that we're using two hyphens to form a long dash. We want a long dash here because it indicates a break in thought. Long dashes are used when a comma is too weak, but a period is too strong. But using double hyphens isn't typographically correct. While they have the correct meaning, hello I'm a breaking thought, they also undermine the lovely typographic texture you've worked so hard to create.
You've carefully chosen a font, a size, a line height, so text is not only readable but beautiful. Let's keep the long dashes beautiful too. A long dash is called an em dash and em dash is historically as long as the font is high. So if you're using 15 pixel type, your em dash should come into the page right around 15 pixels wide. This is great, because the em dash gets longer as needed when your font is bigger and it also gets shorter as needed when your font is smaller.
If you already know how to create an em dash using keyboard combinations, you might be tempted to enter em dash as that way in your web page. But don't do it. Keyboard combinations do not work across browsers. So how do we fix this? We'll use a character entity. Character entities are snippets of code that help the HTML show characters that won't otherwise work. So open up the HTML file in your text editor, then just scroll down to A Type Primer and find that double dash, there it is, and we're going to replace it.
We are going to replace it with —. You'll notice I also got rid of the spaces on either side. Typographically you can keep them if you want to. That's not a problem; you can do it either way. After you fixed the first one you can copy and paste to fix the rest of them. There are three on this page so we'll select this and we'll copy it. Oops! There is one right here after the word humor. I can paste it and I'm going to keep scrolling down.
Looking carefully and here under the For the Love of Type, The Elements of Typographic Style, we've got another one. I'll paste, we can save, and let's review this in our browser. Excellent. You can see right here under a Type Primer it's no longer a double hyphen. It's an em dash. So now what we're going to do is fix our en dashes. The en dash is approximately half the length of an em dash and about twice as long as a hyphen. It's used to indicate range.
Think of the en dash is replacing the word "between" or "to". So we would use an en dash in phrases such as three to five years old or between 2:30 and 3:30 or June through August. The default en dash is the basic hyphen and this is incorrect. Let me find one for us here. Down at the bottom under Love and Joy About Letters, we have dates that represent the life span of Ben Shahn and here we've used a hyphen.
Hyphens are meant to be used to bring words together to form single ideas. Hyphen does not mean a range. It does not mean between 1898 and 1969. Let me show you a hyphen that it is being used the correct way. We're going to fix this en dash in a moment. I am going to go up under Nice Web Type in the very beginning. Here you can see the use of hyphen that's used correctly. It's being used to combine the word know and the word how to create know-how.
This is exactly how a hyphen should work. Hyphens are lovely and we need them. We need them to help us understand to connect two parts of a word when text is hyphenated along the right edge. So hyphens are good, but they don't mean a range. So let's go in and fix that en dash. What should be an en dash that we saw down at the bottom. Back in our HTML we're going to go down to Love and Joy About Letters and there is that hyphen there and we're going to use the character entity – and a semicolon. Save that and review it in our browser and we'll scroll down. There we are.
The en dash you can see it's a little bit longer then our hyphen, but not as long as an em dash. That's perfect. If you've used em and en dashes in web pages before, you may have used different character entities with the numbers 150 and 151 in them and this is incorrect. I'm not going to lie and say I understand exactly why. Just know that some computers and/or programs reserve the character entities with the numbers 150 and 151 in them for other non-visible things.
Thus, you should use the numbers 8212 and 8211 for your em dash and your en dash. If you want to know more about this from people who know way more about coding characters than I do, I recommend visiting Stack Overflow. There's a thread regarding the difference between the 151 and the 8212 and you can read about it there. And again if you're interested in learning more about when to use em and en dashes, I once again recommend the article The Trouble With EM 'n EN (and Other Shady Characters) by Peter Shearon on 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.