Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Web fonts are fonts that I linked from another source and load into your web pages. Web fonts are great, because they add variety to the fonts you have at your disposal. They can, however, add loading time to your web pages and even quality, well-designed web fonts are not always designed for the screen. Many started as fonts for print. So their spaces in and around the letters, as well as their strokes, may not result in legibility on the screen. Always look carefully at the quality and legibility of any font you're thinking of using.
Do not settle for a font that makes it harder to read the text. There are two kinds of web fonts. Fonts you put in a folder on your server and reference with the @font-face syntax, and fonts you access from someone else's server. In this lesson we're going to be looking at fonts we'd put in a folder and reference with the @font-face syntax. There are free web fonts and web fonts you'll have to pay for. I am going to show you the free options because they're immediately available. You can jump right in and learn how to use them.
However, I highly recommend setting aside a budget to purchase web fonts or access to web fonts. You'll not only get more variety of fonts; you'll get access to higher quality fonts that have been designed for the screen. That is, they'll retain legibility, good spacing, and will have all the styles and what you need. In the meantime, a great place to find free fonts you can link to with the @font-face syntax is fontsquirrel.com. Font Squirrel has a large selection of free fonts that are legal to use for font linking.
Legal use is an important aspect of choosing a web font to link to. Not every font permits web linking. Linking is not the same as embedding a font. Embedding means the font is embedded into a file, like text in an image or a font used in Flash. Web linking means the font is transferred to a browser to be part of a web page. So read the end-user license agreement for any font you purchase or download to use on a web site. If the font does not explicitly state that it allows font linking, you must assume it does not allow it.
There are plenty of good fonts designed for the web or that are approved for font linking. There is no reason to break an end-user license. Font Squirrel provides all the font files we need to link fonts with @font-face. Some fonts don't provide the files because they aren't approved for font linking. Keep an eye out for this icon right here. Most fonts have it. If you see it, it means you are allowed to use it on your site. For this exercise we're going to choose web fonts to create three meaningful versions of the words love and hate.
Since we eventually use the fonts to create meaning for a single word, we don't have to worry about them being legible at small sizes and paragraphs of text. We can go pretty crazy. So let's start with the obvious and look for a nice script font for the word love. Come over here and I'll choose script, and we are going to start with BlackJack. We are going to test it to see how it looks in our word. We can and click on the font, test drive it, and I can type in the word love.
If you're using it smaller, you can do it smaller or bigger. Gives you the sense of what the font looks like in that word. Then what I am going to do is take a screenshot of it and I would do this with multiple fonts to compare them. I always go back and save my screenshots so they have meaningful names. So for instance, I know this is the word love and I've set it in BlackJack. That way when I am comparing the files later, I don't have to remember exactly what font is what. It's in my title.
To the magic of editing, I've already tested a couple of fonts for us. I'll walk you through how I as a typographer would choose which fonts to use. I try to pay attention to spacing, shapes, and then meaning of the word. For example, not every script feels romantic. Some feel old or retro or quirky. If I'm going for cliche romanticism, then I would not to use a font that looks like it would be on a grocery store sign selling milk or something. So BlackJack was fine, but Lobster, which is a personal favorite, I think it's a little too heavy and stylized for this project.
Champagne doesn't work for the project either. I don't care for how the spaces between the letters look. It makes it feel sort of choppy. ChopinScript is great, very elegant. Brock doesn't feel elegant enough for this project. The dark filled in spots feel a little harsh for the word love. Ballpark is too heavy and stylized and Quigley is also too stylized. We might go in a completely different direction and consider something unexpected.
Using a font that conveys the opposite meaning of the word. This is not always appropriate, but sometimes a purposeful mismatch can be strong. It asks readers to reconsider the meaning of the word or headline. Here I've set hate in ChopinScript, one of the fonts I am considering for the word love. Or I could consider using a font with hard edges like Daela for the word love. I might also consider a Grunge font like Boycott. When working with display fonts, I always look carefully at the letters I need to use.
The really broken O in Gesso could work here, but might not work with a different word or for a different project. After considering quality, characters, and meaning, and also trying to create some cliche and some less cliche versions to the word, I've settled on these free fonts: BlackJack, Gesso and Daela. Web fonts offer us more variety, but as web designers we need to be careful about following end-user license agreements, and we need to carefully choose quality fonts that feel like they could work for the words or headlines we need to set.
The font I chose for this lesson wouldn't work in a page of text. They are meant to be used sparingly in a headline.
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.