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.
We've learned a lot about attending to typographic details in this chapter: using the correct punctuation and characters, hanging punctuation, vertically centering text, and making drop caps. Now it is a good time to ask, how are typographic details being attended to on professional sites? At alistapart.com they use vertically centered text in their footer. We can see it down here, much like the one we've made. They rarely define the heights of their div; instead their div uses an auto height and the text is centered by adding equal padding to the top and bottom, much like we did in an earlier lesson.
In an article you can also see that they do use em-dashes. There it is, with no spaces on either side, which is similar to the way I usually use mine, and they do also use curly quotes. I'm going to zoom in on this, so you can see that even though in this font it's not a curly quote, neither is it a prime or a single prime. It is cracked.
On Trent Walton's site, he also uses the proper quotation marks, here in an apostrophe and again here in an apostrophe, and if we look further down we can see he is also taking care and using em- dashes, again with no space on either side. Subtraction.com uses centered text here between the row lines and again down here he uses it for all of his titles, and if we scroll down we can see that he is also using em-dashes.
Here he uses a space on either side. That's another way of using the em- dash and that's fine,. Both are acceptable. Again we're going to zoom in. I would like you to see the curly quote in this san-serif font, because this is Arial , and you can see it does have a little bit more of a curl to it. I'm going to zoom in a little bit more. They are hard to see. There we go, with that apostrophe there. The Ministry of Type also attends to the quotation marks and to the em-dashes. Let's scroll down here. You can see an em-dash here. He also puts space around his em-dashes.
Here is another one and another one, and let's see if I can find a quote mark to zoom in on for you. There's an apostrophe right there, pretty small. Hope we can see one here in this link in the word designs. There we go. And then finally let's take a look at Jon Tan's site. One of the things we'll see here is a drop cap. this is the first and only drop cap I found in all the professional sites that we've been looking at in this course.
We can also see that he's using the em-dash. Again with a space. He uses a more generous space on either side of his em-dash. Again, it's another approach. That's okay. What else do we find here? I know that he also uses curly quotes. Oh. Here we are, down here with "what is an 'em'"? Let's zoom in. Serif fonts tend to have a curlier quote in than a sans serif font. They are easier to see when they're curly. I'm going to zoom back out because I want to show you one last thing on this site.
I was not able to find any hanging punctuation in any of the professional sites we've been looking at. But what I did find on Jon Tan's site is that he does an ordered list here using lowercase Roman numerals. And you can see that because it's a list they do hang off the edge. And he's greyed them out so they're very subtle. And this really helps to keep the really beautiful left alignment, the vertical line there od his text. And so that's just to point out that even though he's not hanging, for instance, a quotation mark like we did, that idea of hanging things off the edge of the text works in multiple ways, and it really keeps that good vertical lines so it's nice to see that he's using it.
So as you can see from analyzing the professional sites, details such as using the proper quotation marks and em-dashes are definitely being paid attention to, while more specialized details such as hanging punctuation and creating drop caps are not in use as much. So in all fairness I have been focusing on more typography related sites. You may find that non-typography related sites don't always spend the extra time and effort to use all the proper punctuation, but you should use it when you can.
It makes a difference in the visual quality of your text and part of being a good typographer is paying attention to the details.
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.