Video: Choosing a web-safe font for use in text

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.

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.

Choosing a web-safe font for use in text

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, orvery 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 retainslegibility 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 ofitalic and you want the italic words to look more humanist and elegant, Georgiamight 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 afake 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 moreelegant 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-heightwill 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 descendersand 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 oftypographic resources. We will need a headline for each resource as well as anitalic title in each description.It may include some numbers, so we should look at those. Either Georgiaor Verdana could work.Now I am going to add another requirement. We are going to create atraditional elegant feeling.So looking at the shapes of the letters and the shapes of the italics, I think weshould 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 italicis 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 wantthem 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 theresource 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 .

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.