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.
Fonts must either be on a reader's computer or linked from another source to display correctly in a browser. Fonts that we can expect to be on most computers so they display correctly are called web-safe fonts. There are a handful of web-safe fonts. If you stick with these fonts, you can expect them to load correctly in the browser, because most computers have them installed. They are Times New Roman, Georgia, Courier, Trebuchet MS, Arial, Comic Sans, Verdana, and Impact.
Only five of these fonts are what I call neutral. They don't hit us over the head and say things like, "Hey, I look like I was typed on a typewriter!" Of these, three are more legible than the others, due to X-height and space in and around the letterforms. So, web-safe fonts can feel a little constricting. Personally, I love the creative freedom of linking fonts into my web pages. in fact, I do it on my own homepage. Linking web fonts can add variety of forms and can also add a layer of meaning into the design.
For example, some of my research is related to old signs and the environment, and the font I link to is based on a 1945 sign for a department store. But linking in web fonts from another source can create problems, most will cost you money, which may or may not be an option for your client or if you're a student. Those that are free tend to have quality issues. Either the system of letters is inconsistent, the spacing between letters is wonky, or the font doesn't include a bold or italic style to go with it.
Finally, linking to web fonts can slow down your web pages. Sometimes the time is not noticeable, but if you're working with a lot of text and a lot of web fonts, the time it takes for the fonts to load is very noticeable, So web-safe fonts, those eight fonts that are extremely likely to be on most computers, are the work horses of web topography. They are free, quality tested, and don't have to download, so they do not affect your page loading time. But can we use standard, sometimes boring web safe font to create a variety of forms and add specific meaning to text? Yes, we can.
For our first exercise, we're going to explore creating three meaningful versions of the word quiet and loud, using only web-safe fonts. We will start with our eight web-safe fonts. Let's get rid of the comic book look and the typewriter look and we are left with six fonts. I didn't expect to like Impact with the word quiet, but it looks to me like how I sound when I am yelling at my kids, like "Quiet!" So I think it works in a backwards kind of way. But I think I want the other two ways of setting the words to actually feel quiet.
I'm thinking of what I know about how we read fonts. Lowercase not too big and then italic could make the word feel really soft. I can contrast it with making the yelling quiet uppercase and really big. It makes a good contrast and further communicates that these two ways of communicating the word are really different. But I want yet another soft quiet and all the versions of the soft quiet feel the same right now. What might make a word feel soft besides italic? Well, I could make it even smaller and make it a lighter gray.
That makes it softer I think. Since the sans serif italics are as humanist, I would rather keep their italic version with one of the serif fonts and the sans serif fonts hold up in the lighter gray a little bit better. So I think I will use a sans serif for this version, and I can make the word feel a little bit lighter still by adding a little space between the letters. It's almost like a whisper now. I felt pretty good about the quiets. Now let's move on to the louds. We will start with our eight web-safe fonts for the word loud, and we will get rid of the comic book look and the typewriter look, and we are left with six fonts.
And I have to say I loved the loudness of my quiet version. I want to repeat it for one of my louds. But I think I want the other two ways of setting the word to feel loud without using such big bold capitalized letters. Can I suggest loud without being quite so cliche? Well, when I think of loud, what do I think of? Well, again, I think of my kids. They are the loudest people I know. So what if I make a loud that is a little more playful? So I can bring Comic Sans in again and this time I'll leave it all lowercase.
Lowercase letters have more variety and form and might better suggest the movement of loud children. I'll try making it a little bit bigger, because they are, after all, loud. But I still need another loud. I'm using a big lowercase and big uppercase word. So I think I'll try smaller word. Let's look at it all uppercase, so it has a shot of feeling loud. It's still not enough. It occurs to me, I used use the lighter gray to communicate quiet. Maybe I can use color to communicate loud.
So we can try red. Red is a loud color, but it's still not enough. I can try bolding the words, but now they're competing with the big loud that I set in Impact. I can add a little space between the letters to soften it up a bit. I think the sans serif works best across the board for loud. Something about the consistent thickness of the strokes and the letters. There are no quiet strokes at all. I feel pretty good about the three quiets and the three louds.
The fonts, case, style, weight, and color all help create meaning. Also by creating contrast between the words, meaning is enhanced. Finally, while I did use color changes in two of the six words, most of the meaning was created by the letterforms themselves, not through color. So web-safe fonts might feel constricted sometimes, but they are free, quality, and don't have download time. With a little attention to font choice, size, case, style, spacing, and maybe a little color, we can create a variety of typographic solutions using web-safe fonts.
Knowing how to get the most out of these fonts make the websites we design more beautiful and meaningful for the reader.
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.