Join James Williamson for an in-depth discussion in this video Using the Kit Editor, part of Up and Running with Typekit.
- View Offline
- Most of the font management tasks for web fonts inside Typekit will be performed in the kit editor. So, I want to start by taking a brief tour of it so you'll know where to find things. I'm currently signed into my full Adobe Typekit account. To open up any existing kit, I just go right up here to the kit menu, and choose the kit that I want, in this case, the Typekit kit. It's a little bit of alliteration almost. Okay, this is going to open up the kit editor in its own window. I'm just going to reposition this window, and I'm actually going to make it a little bit larger.
One of the things that I've found is the default size tends to cut some options off or not display as much. So, I like making it a little bit larger. Now, you will notice that the kit editor does open up in a separate window. If I click back on the main Typekit site, a lot of people assume when they do that that it closes the kit editor. Then they go and reopen it again, but it's still open, all I have to do is go back, find that window, and open it up again. So, it just basically hides the window. So the first thing that you're going to notice inside the kit editor is a list of the fonts that you've chosen for that particular kit.
You'll notice for this one currently I have Nimbus Sans Condensed, Acta Display, and Lust Script. Now, you'll notice that Nimbus Sans Condensed looks a little different than the other two. That's because that's the font that is currently selected. So, all of these options on the left hand side, which we'll go into more detail about these a little bit later on, Selectors, Language Support, Weights and Styles, and CSS Stack are specific to the selected font. You'll notice if I click on Acta Display, these all change. Same thing for Lust Script. So, you need to make sure that you're aware of which font you have highlighted because the changes that you make are going to apply to that font.
Now in the upper right hand corner, we have two very important links. The first one is the embed code. Now, I've showed you this before and this is the code that's unique to the domain you specified for this kit. Part of the process of creating a new kit is to tell it which domains this kit is going to be serving. That, in turn generates this code, which again is unique for that site. So this code will work for my site, but it's not going to work for yours. That's really just a result of Typekit's nature and the fact that it's hosting and serving fonts for specific sites.
Now next to that are our kit settings. So if you want to change your settings at any time, you can simply click on that link and bring up your settings. Now, here we can rename the kit, remember this name is really only relevant for you. It tells you which site or which project you're hosting. Below that we're going to have our domains. Now remember, you can use a comma separated list to put in multiple domains. If you have several different domains hosting the site, or if you have a local host set up that you want to test locally, you can place that in there as well and just separate them using commas.
You also have the option to delete this kit. You want to be very careful about that. Notice that if you hover over it, it gives you a tooltip that says "Are you sure you want to do that? "This cannot be undone." So if you click that by accident and then tell it yeah that's what I want to do, there's no undos there, you'll have to rebuild the kit from scratch. Now there are a couple of other settings here that I kind of just glossed over earlier. I want to talk about them in more detail. The first is the Colophon Settings. Now what's really nice about this is that every time you create a kit, you get a colophon that's unique for that kit.
What is a colophon? Well, it basically gives a little bit more information about the fonts that are being used on that site. So, if somebody says "Aw man this site is really cool, "I wonder what fonts they're using?" If you give them access to the colophon, they can see it. Now in the earlier days of Typekit, if you had a trial account, or specific tiers of accounts, a Typekit badge would show up on your project page. People could access your colophon by clicking on that badge. Well, a little while ago they did away with that. So, if you want people to see the colophon, they'll give you a link for it.
You can simply, somewhere within your page, link to this page. Now we can customize that link by giving a name of the site, which in this case for me is Up and Running with Typekit, and then a link to that site. This, of course, will link to the actual site itself. Now I want to show you this in action, so I'm going to go back to my project page which is online. Scroll down to the bottom. I can see at the bottom I have a link that says "Learn more about the fonts used in this demo". This link, of course, is pointing to the colophon page for this project. When I click on this, it's going to jump to that specific site, and it's going to say "Hey, typefaces used on "Up and Running with Typekit." Notice that because I supplied it with this information, it has a link back to the project page and it has more information about the fonts that are being used.
So it's a nice thing to do for people that are visiting your pages, but you don't have to. Now the third tab is mobile settings. When web font technology was in its infancy, most mobile devices didn't support web fonts. So, Typekit had different settings for how fonts were served to mobile devices. Serving fonts for mobile devices is a little different than serving fonts for desktop applications. That has everything to do with not only support, but also resource management because on mobile devices people are often dealing with slow networks or latency issues.
So Typekit has a lot of stuff baked into it that helps your fonts perform better on mobile devices. Here you can see that they have checkboxes that will allow you to enable or disable support for specific mobile platforms. Now, by default they're all automatically checked. So you're already serving fonts fairly efficiently for mobile devices. However, if there's any reason that you don't want to support a specific platform, you can simply turn that off. Once you've successfully managed your settings, you can either save them or if you're not happy with what you've done, you can cancel them.
Now finally at the very bottom of our kit editor, we have the kit size. It gives you a nice little summary. You can see this one is using three fonts and three selectors. We'll talk about what those selectors are in just a moment. It gives the size of this, so 308 Ks. Anybody that browses to my project page has a 308 K hit for the fonts the Typekit is serving. I also have a publish button over here on the right hand side. Any changes that I make to my kit won't apply online until I publish it.
We'll talk more about that publish button a little bit later on. Okay, now that we know our way around the kit editor, we're going to focus on using it to manage our fonts in our next exercise.
- What are web fonts?
- Understanding the Typekit setup requirements
- Browsing fonts
- Creating favorites
- Adding fonts to kits
- Using the Kit Editor
- Customizing selectors
- Defining fallback fonts
- Selecting fonts for desktop use