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.
When choosing any font for test it's important to consider what you will need the font to do. That is how will you use the font. For example, do you need the font to have it bold for subheads or other emphasis? Do you need the font to have an italic? Do you need the font to work very large, maybe for a headline or a pull quote, or very small maybe for a caption or footnote? Does the text have a lot of capital letters or numbers? How do different fonts measure up when you need these things? I will often look carefully at 4 or 5 fonts, sometimes even more when starting a project.
Here we are going to compare 2 fonts, Verdana and Georgia. We can see that Verdana's bold has more generous counter forms and retains legibility at small sizes. So if your text needs bold words or sentences Verdana might be a better choice. But Georgia's italic is more calligraphic. If your text requires the use of italic and you want the italic words to look more humanist and elegant, Georgia might be a better choice. And of course all fonts are different. We are only comparing Verdana and Georgia right now.
When looking at other fonts, it's especially important to look at their italic. Some web fonts don't come with a true italic. So when you try to use font-style: italic, the browser simply skews the letters over. Compare the top As and Ls and you can really see the difference. The single decker flowing A and the curved L get lost when using what we call a fake italic or false italic. The fake italic isn't as beautiful as the true italic and loses legibility when set in text.
So if you need to use italic in your text, make sure the font has a true italic. Many contemporary sans serif fonts have more humanist italics these days. If you want to use a sans serif font but also want more elegant italic, you can find both. Again notice the bottom sans serif italic A is single decker and flows. The L also has the curve at the bottom. And when the type gets very large like in headlines, Georgia will give you more elegant feeling, while Verdana will give you a feeling of clarity.
11 pixel type is pretty small for the screen. If you're going to use such small type, a font like Verdana with a very open counter forms and a generous x-height will work better for you than Georgia. If you're using a lot of numbers, you will want to look at the numbers each front comes with. Georgia has what we call old-style numbers. They have ascenders and descenders and work really well in text. They look elegant and don't stand out as much. Verdana has what we call lining figures. Notice how the numbers are as big and as powerful as the capital letters.
This can cause numbers to stand out in a block of text. Let's choose a web safe font for our next project. We will be doing a list of typographic resources. We will need a headline for each resource as well as an italic title in each description. It may include some numbers, so we should look at those. Either Georgia or Verdana could work. Now I am going to add another requirement. We are going to create a traditional elegant feeling. So looking at the shapes of the letters and the shapes of the italics, I think we should go with a serif font.
I'm thinking Georgia. Of course there is more than one serif web safe font. We are not even going to consider Courier, since typewriter type isn't elegant, but we should consider Times New Roman just to be sure that Georgia is our best choice. Georgia's italic is slightly rounder and more flowing. We will be using italic a lot in this project and I want to make sure the italic is as beautiful as possible. I also prefer Georgia's numbers. They are the old-style numbers which feel very traditional.
I'm not sure we'll have a lot of numbers in the text, but if we do think I want them to be old style. So we will go with Georgia. It has a traditional look with its serif. It has a lovely italic, nice old-style figures, and it works well large for the resource settings. We can create a very traditional feeling with Georgia. In the next lesson we will apply Georgia to the text in our project.
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.