Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey

Working with Typekit


From:

Web Fonts First Look

with James Williamson

Video: Working with Typekit

As we've seen there are a large number of font hosting companies available to you that provide a wide array of services. To help introduce you to working with a font hosting company, we are going to work with Typekit, one of the most popular hosting services available. Now, I encourage you to try out as many font hosting options as possible before deciding on which one to use. I chose Typekit for this title based on their market presence, their toolset, and their ease-of-use. So it's very representative of really any of the type font hosting services that you might try out.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

Working with Typekit

As we've seen there are a large number of font hosting companies available to you that provide a wide array of services. To help introduce you to working with a font hosting company, we are going to work with Typekit, one of the most popular hosting services available. Now, I encourage you to try out as many font hosting options as possible before deciding on which one to use. I chose Typekit for this title based on their market presence, their toolset, and their ease-of-use. So it's very representative of really any of the type font hosting services that you might try out.

So here we are at typekit.com and the first thing I want to do is sign up for a trial account and I can either go right over here to Register or you'll notice that very helpful Try it for Free link right there on the homepage. So I am going to click on that. Now, this gives me a listing of all the available plans and some of their limitations. So, for example, for the free trial I see that I have a limited number of Pageviews per month. I have access to simply the Trial Library, so probably not the full library access. It's only available for one web site, and I can only use two fonts per site.

So that's really very much a sort of kick the tires on it, try it out, see if you like a type of service, rather than try the whole thing free for 30 days. And really all the services have a slightly different flavor on their trial account. So you'll have to figure out which one sort of fits you. Now, you'll notice that there are other pricing options available. So feel free to sign up for one of those if you think that Typekit is the right service for you. So I am going to go ahead and sign up for this. So here if you are going to sign up for a trial account you're going to provide them with name, email, and password.

Obviously, you're going to have to agree with the terms of service, and as soon as you do that, it's going to go ahead and create an account for you. Since I already have an account, I am going to go ahead and log into that. You guys go ahead and create your own Typekit account here. As soon as you create it, you'll be logged in as well, and we'll meet back at Typekit after we've both logged in. So if you are still on landing page for creating a new account, just click back to the homepage so you can get right back here. You should still be logged-in. You should see your name right here when you log in or out. Now, you'll notice that I've got a few Typekits already built so I can switch between my active kits or I can build a new one.

I want to go ahead and build a new kit. So the first thing we want to do is go ahead and build a new kit. Kits are how we basically assign groupings of fonts to different web sites. We can say okay, we want these fonts together on one kit and then we are going to apply them to these particular domains, and that can change based upon your account level. So certain accounts are restricted on the amount of domains that you can have. So because I already have some active kits, I don't see the same link you do. You are going to see a link up here that says Create a Kit. I am going to click on this, and I am just going to add another kit.

So you'll be creating a kit. I am going to be adding another one and we get to the Create a Kit page. Now, you can name this anything you want. I am going to call mine Alice in Web Fonts because that is the project that we're going to be working on, and then I am going to add that domain. I am going to add the www.aliceinwebfonts.com. Now, this needs to be a domain that you have access to and that you have permission to use. So obviously, you're going to need to enter-in your own personal domain here, not the aliceinwebfonts one.

You are going to enter in yours. You can choose to enable the colophon badge or not. If you enable that badge, you'll see a little Typekit badge in the lower right-hand corner of the page that basically people can click on it and they'll see a list of the fonts that you've been using in your site. It is a way to promote Typekit, but it's also a way of showing people how you're utilizing web fonts on your page. So, if that's something you want to do, you can enable that or not. It's just a little bit of JavaScript that it puts into your site. I am going to go ahead and click Continue and I get two lines of code that I'll need to put into my site in order to enable Typekit functionality on that.

I can go ahead and copy-and-paste this right now or I can do it a little bit later. In this case I am going to do it a little bit later because right now I want to browse for some fonts and add them to my kit. So I am just going to go ahead and click Continue. All right! So I am all set. Now, all I have to do is go and find some fonts. I am going to go ahead and do that. When you're browsing for fonts inside Typekit, you can browse by type such as Serif, Sans-Serif. You can browse by foundry. You can even browse by tag. So poster fonts, display fonts, or you can say okay, I'm looking for headlines or I am looking for body copy.

So they've really done a good job of creating a flexible interface that allows you to search for fonts in just multiple ways. So however you're trying to find something, you're going to probably find an avenue to it here in the Browse Fonts page. I happen to know exactly which fonts we're going to use. Now, it's going to make my life a little bit easier. So the first thing l am going to do is I am going to go to the Search and I am going to type in L. That's going to show me a list of all of the fonts that begin with L and I am just going to go to League Gothic. So League Gothic is the first font that we're going to add to our kit. If you find this through browsing the fonts and clicking it on a list or clicking on tags, eventually you're still going to get to this page.

This is where we're told a little bit more about the font. We can take a look at specimens, we can test the type out, we can go ahead and look at browser samples, so we can see how it's going to render in multiple browsers across multiple platforms. There's a lot of things here that we can take a quick look at. If you've already decided though that this font is what you want to use, you can just click Add to Kit, the little button in the upper right-hand corner, and it's going to add it to what we call the Kit Editor. So this is the Typekit Editor, and it gives us some options in dealing with how these fonts are going to be served to our sites.

Let's add one more font and then we'll come back to this Kit Editor in just a moment. So I am going to close that and I want to find another font and this time I want to find Calluna. You'll notice that Calluna comes in a lot of weights and styles. Whereas League Gothic only has the one variation, Calluna has several. It's got a Light version, it's got a Regular version, a Semi Bold, a Bold, and it even has a Black version. So later on we're going to talk about how to serve up these multiple versions to your web-pages.

All right! So I am going to go ahead and click Add to Kit, and we'll add that one to our kit as well. At this point, I want to go in and change how these fonts are going to be served to my website. So what I am going to do is I am going to go to League Gothic. So I am just going to click that font. I can see that I have a few options over here on the left-hand side. In just a moment, in our next movie, we are going to talk about different ways that we can access the fonts using selectors or CSS in our sites. Right now, I am going to look at sub-setting my characters and then including weights and styles.

So the first thing I want to do is Language Support. Notice I can choose a default character set, which is much smaller than all characters. If you have a question about well, which one is right for me? You can click on these links which say Choose and you get a little bit more information about that. For the time being, we are going to go with the default which is a little bit smaller, and for weights and styles we really only have one. There is another option right down here that I want to check out and this is CSS Stack. I can click on this and I can create my own custom font stack to provide fallback fonts in case that particular browser doesn't support web fonts.

League Gothic is similar to Impact, and Impact is installed on a lot of computers. So, I think I am just going to type in "Impact, sans-serif" to sort of build my own CSS Stack here. So I am going to go ahead and hit Save and I am going to move on to Calluna. When I click on Calluna, again I can see I want the default character set, not all characters, it's much smaller, and then for weights and styles-- And by the way, this is only something that you need to be concerned about if you're serving up multiple languages of it or certain special characters that you need.

So take a look at the character set and figure out exactly sort of what range you need. Do I need all these weights and styles? Probably not. As a matter of fact I know for a fact that we're not going to be using Black. So I am going to go ahead and disable that. So I'll keep the other ones. The Light, Regular, Semi Bold, and Bold and that shaved off another 29K. The smaller your kit is, for the most part the better. It's just going to make your fonts load a little bit quicker and reduce the overhead of your site. I mean that's never a bad thing. So, now I've got two fonts chosen to my kit. League Gothic and Calluna.

My kit size is a total of 212K. I have got two fonts, two selectors, for Alice in Web Fonts. Now, the two selectors we're going to talk about in just a little bit. So don't worry about them right now. You can work in the Typekit Editor all day long but unless you publish it, none of these settings are going to take. So I am going to go right down here to the bottom right-hand corner and I am going to click Publish, so that these options are available in my kit. There we go! So, now that we've signed up with Typekit and we've built our initial kit, we're still going to need to do a couple of things to our site in order to get the fonts working and we're going to tackle that next.

Find answers to the most frequently asked questions about Web Fonts First Look.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

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:

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:

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

   
submit Lightbox submit clicked