Join Laura Franz for an in-depth discussion in this video Choosing a web-safe font for use in text, part of Typography for Web Designers.
- View Offline
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.
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes