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.
When linking to a font with the @font- face syntax, the first thing we need to do is get a hold of the font files we want to link to. The fonts we want to download for use are BlackJack, Gesso, and Daela. Font Squirrel makes downloading and linking to fonts extremely easy. First you find the font you want to download. First is BlackJack. And then you click on the @font-face kit, and you need to choose your font formats.
Select all four of them. The TTF is for most browsers. The EOT is for Internet Explorer. The WOFF is the emerging standard and the SVG is for iPhones and iPads. You can click on download and save the file. Unzip it, and we'll see the whole folder here. They give us everything we need. We have our four fonts. We have a demo.html, the CSS, and licensing information.
I always take a look at the demo.html to make sure it's working and we can see that it is. Excellent. We need to put our fonts into a fonts folder, so we can use it in our future exercises. We are going to do that at the Desktop level. I am going to create a new folder, I am going to name it fonts, and I'm going to move these four files over into my fonts folder.
So I have these four fonts in there. I also like to keep my licensing information there as well, okay. And then I am going to keep my @font-face kit folder here that just has the HTML and CSS in it, because I am going to need that later. Let's go back to Font Squirrel and download the other fonts we need. There is also a search function up here. I know I need Gesso.
Download the @font-face kit. While I am here I will also get Daela. Download the @font-face kit, making sure all four of those are selected, and then we can begin the process of getting them into my fonts folder. Here is Daela. I am going to double- check my demo.html to make sure everything is working fine, and it is.
You can see it comes also with an italic and a bold. We're not going to use those. Let's see. I've got bolds here. We don't want those. We just want the book. Put those over in my fonts folder, as well as my license, and we'll keep this @font-face kit for the next lesson, and we'll take a look at Gesso.
Again, I am double-checking and making sure it worked. Seems like an extra step, but that way if anything goes wrong in the future, you know that there is something that happened between when you got the font and you started using it. My license, I always keep my licenses. That way if I need to ever double- check and make sure I'm following the license, I've got it. I don't even have to go get it again. Let's get rid of these ZIP files here. Okay, so we've downloaded the three fonts that we need.
We've double-checked to make sure that we've got everything that we need, they are working fine when we downloaded them, and we have all of the fonts that we need in our font's folder, along with the license files. In the next lesson we are going to put them to use.
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.