*** From the Archives ***

This article is from May 5, 2014, and is no longer current.

Using Adobe Typekit

3

Early in the desktop publishing revolution, fonts were very expensive and choices were few. But soon, font prices came down to the degree that graphic designers developed a saying: “He who dies with the most fonts, wins!”

Joking aside, having a huge font collection isn’t about pride of ownership as much as it’s about having a wide variety of choices when designing a project. And if that project includes a website, then your font choices become considerably more limited if you want to use the same fonts on a client’s website as on their printed and digital materials. To make matters worse, the technology to serve custom fonts on websites is cumbersome and expensive. But Adobe hopes to solve those problems with Typekit, which they acquired in 2011 and is now included with every subscription to the Creative Cloud.

Typekit is a collection of fonts in both Web and Desktop (Print) format that you can download and use in your printed and electronic documents and also on websites. Typekit’s desktop fonts may be used with any desktop application (not just Adobe’s), and its Web fonts can be used with Dreamweaver, Muse, Behance, or any other website creation tool. One of Typekit’s attractions is that most of the fonts are available in both formats. So for example, you could choose Myriad as a client’s branding standard, and use it on all their materials and Web pages. In addition, because Typekit is part of the Creative Cloud, you have access to all of its fonts from any computer that has Creative Cloud apps installed—you just log in with your Adobe ID and the fonts are available to you.

Desktop vs. Web fonts

Because Typekit offers its fonts in both desktop and Web formats, we need to understand the difference between them.

Typekit’s desktop fonts behave almost the same as other fonts on your computer. For example, you can use them with any application, embed them into PDF and EPUB files, convert their characters to outlines, and so forth. However, you cannot include them when you package an InDesign document for archiving or delivery to a printing company. Because the font files are stored invisibly on your hard drive, you can’t get at them. Also, when you stop paying for your Creative Cloud account, the fonts are removed from your computer.

In contrast, Typekit’s Web fonts are stored on Adobe’s servers and delivered to a visitor’s Web browser when loading the page you’ve created. Adobe limits the use of Typekit’s Web fonts to 500,000 page views for each domain where you use these fonts, so to use the fonts on a website that has higher traffic requires an upgrade to a paid Typekit plan, which starts at $50 to $100 per year for 1,000,000 page views. (For more info visit: Typekit.com/plans.) And just like Typekit’s desktop fonts, when you or your client stop paying the subscription fee, the Web fonts are removed from your computer and are no longer served to your websites.

Exploring Typekit’s fonts

Typekit is a website, which you can quickly access from Adobe’s Creative Cloud app on your computer. You’ll find the Creative Cloud app in the menu bar of your computer. Here’s how to get started:

1. In the Creative Cloud app, click the Fonts tab. If this is your first time using Typekit, click the Start Syncing button. If you’ve already added some Typekit fonts to your collection, the Start Syncing button is replaced by the Browse Fonts and Manage Fonts buttons, as below:

2. The Creative Cloud app opens the Typekit website in your default Web browser, where you can browse for fonts.

3. At typekit.com, click the Browse Fonts button at the top left.

4. Explore the Filter buttons on the right, which help you whittle down the collection to just what you need. For example, you can limit your search by Classification (serif, script, decorative, etc.), Web and/or Desktop use (some fonts are Web-only), Recommended use (paragraphs or headings), character weight, width, x-height, or stroke contrast, and languages supported. You can click the little question mark icon to the right of each filter for a clear explanation of what each one means.

5. One truly helpful way to discover new typefaces is the Lists feature, available in the Browse Lists section. (The Lists button is to the right of the Browse Fonts button near the top of the Typekit Website.)

There, you’ll find curated lists of fonts, collected by Adobe’s font experts, that lead you to new discoveries. In Adobe’s words:

“Lists have been created by the Typekit team and feature an editorialized means of browsing. Each list features fonts organized by theme (sci-fi or typewriter fonts), intended use (good for longform, alternatives to Helvetica), or defining characteristic (rounded fonts, fat faces). Think of them as a good place to start when you aren’t quite sure what font you’re after.”

6. If you’re looking for a font that was designed by a particular foundry (perhaps to coordinate with other fonts from that foundry), click the Foundries button, to the right of the Browse Lists button.

7. To see a nice visual collection of many Typekit fonts in use, click the Gallery button, to the right of the Foundries button. This is actually incredibly cool, because Adobe showcases websites that use their Typekit fonts, such as the New York Times and the New Yorker. You can visit the website that uses the fonts, and the font names are linked at the bottom of each gallery image. Just see, click, and use.

8. The Blog section has an ongoing stream of articles that Adobe finds useful for Typekit users. This is also where you’ll find out about the newest fonts added to Typekit: see the Recent Font Releases area in the col
umn on the right.

9. When you find a font you think you may like to use, click the little heart icon at the top right of its badge. This adds it to your list of Favorites. To see your Favorites, click the My Favorites tab under the Browse Fonts section.

10. If you previously purchased Web or Desktop fonts from other foundries, the Purchased Fonts tab provides a handy way to link those accounts into Typekit for management and syncing. Currently, Typekit supports just a few foundries, but they are adding more.

Installing and using Typekit fonts

When you’ve found a font you want to use, roll your mouse over it and click the Use Fonts link that pops up, then just follow the steps!

Your first decision is whether to get the Desktop font or the Web font—the little icons at the bottom of the font info card indicate whether the font is available for use on websites, desktop applications, or both.

For Desktop fonts:

Choose the weights and styles you want, then click the “Sync selected fonts” button. The fonts will then download to your computer and become active for all your applications.

Note: applications that aren’t from Adobe (e.g. Microsoft Word) must be re-launched before the new fonts will appear in their font menus.

In the past year, Adobe has added new Typekit-related features to InDesign and Illustrator. For example, in the Fonts list in InDesign’s control panel, the Typekit fonts are marked with a special icon, and you can even add new Typekit fonts by clicking the Add Fonts from Typekit button:

Note that you can also click the Typekit icon next to the Filter: label to limit the font list to only the fonts you synced from Typekit:

To disable or add new styles and weights to your collection of synced fonts, either click the Manage Fonts button in the Creative Cloud app, or go to typekit.com and choose Your Account > Synced fonts.

For Web fonts:

“Kits” are how you tell Typekit to bundle together specific fonts for delivery to specific websites. One kit can be used on multiple websites and multiple kits can be used on one website if necessary. When you’ve found a font you want to use on a website, you need to include it in a kit, so follow these steps:

1. Choose either Add to an existing kit or Create a new kit.

2. If you’re creating a new kit, give it a name and enter the URL or URLs where you’ll be using it. The Typekit Editor then opens.

3. Under Language Support, choose the languages you need to support. Default includes support for English, French, German, Italian, Portuguese, and Spanish.

4. Choose the weights and styles you’ll be using. Remember that Typekit delivers all the fonts in the kit when a page is loaded, not just the ones you’ve used on that page. So, keep an eye on the size of the kit as it grows (in the upper left corner).

5. Click Kit Settings at the upper right to choose which mobile devices to support. By default, all are enabled, so unless you need to remove one, you can skip this. Also in Kit Settings, the Colophon Settings tab is where you decide whether to add a Typekit badge to your pages and let your visitors know which fonts you’ve used. Kit Settings is also where you can add or remove domains (URLs) allowed to use these fonts, or rename the kit.

6. Click Publish to make the fonts available at the URLs you listed. Typekit then creates a “kit” of fonts for you on its server.

7. Click the Embed Code link near the top right of the Typekit Editor window to display the required JavaScript code to paste near the top of the <head> tag in the CSS or HTML page code for your website.

You can then use those fonts when designing Web pages in Adobe Dreamweaver, Muse, or any other website-creation tool—even WordPress and other dynamic content servers. (It’s easiest in Muse, because the fonts simply show up in the Fonts list, while using them in Dreamweaver or other Web tools requires using CSS Stacks.)

When a person visits your website, the JavaScript tells Typekit to deliver your fonts to their Web browser. (This is also how Adobe counts your page views.)

Tip: For Typekit demos, videos, and documentation, see typekit.com.

Here are a few other points to keep in mind:

• Currently, Typekit includes fonts from about 60 foundries, and it’s helpfu
l to remember that while Adobe claims “thousands” of fonts in the collection, they’re counting every style and weight as a font (for example, Myriad Regular, Bold, Italic, and Bold Italic count as 4 fonts).
• A paid Creative Cloud account of any kind (even a single-app subscription) includes Typekit’s “Portfolio Plan,” which allows you to use up to 100 fonts at any time. Again, each style or weight in a font family counts as one “font,” so the actual number of font families you can use may be considerably smaller.
• To share a document that uses Typekit fonts with your clients, they must have a Typekit account.
• When you use a Typekit font in a Photoshop document, then send that PSD file to someone who doesn’t have the Typekit font you used, the type will display and output perfectly, but they won’t be able to edit the type without losing the font styling.
• Adobe’s earlier “Edge Web Fonts” is a completely different thing. Essentially, those are Google Web Fonts, plus some others, and are mostly useful in Adobe’s Dreamweaver, Muse, Edge Animate, Edge Reflow and other Web-related tools.

Using Edge Web Fonts

As mentioned above, Adobe’s Edge Web Fonts are not related to Typekit, but they are easily available for use in Adobe’s Web-related apps, such as Dreamweaver. We’ll use Dreamweaver as an example, but the process is the same in all apps that support Edge Web fonts, such as Muse, Edge Animate, and Edge Reflow.

1. In Dreamweaver, choose Modify > Manage Fonts > Adobe Edge Web Fonts

2. Click on any font(s) to add or remove it/them from your collection, then click the Done button.

3. Open the Font list from any location in Dreamweaver, such as the CSS section of the Properties panel. You’ll see your new Edge Web Fonts at the bottom of the list.

Tip: For more info on Edge Web fonts, see https://html.adobe.com/edge/webfonts/

The Bottom Line

Typekit isn’t for everyone. If you worry about your fonts disappearing when you stop paying Adobe for Creative Cloud, you may want to stick with your current way of using fonts. But if you want instant access to hundreds of high-quality Web fonts and matching Desktop fonts, you’ll enjoy having access to them from any computer for as long as you subscribe to Creative Cloud.

 

  • John Kramer says:

    Am I wrong in noting that not all styles of a given font are available for downloading?

    https://www.dropbox.com/s/yzjh0q50osm6jsz/Screenshot%202014-05-05%2021.53.22.png

    Makes it hard to sketch for a website that uses unavailable styles.

  • Jay Nelson says:

    John: many fonts are availble in their full families. But many are not. You just need to double-check before committing.

  • drasa says:

    You didnt mention that for me, like many other users, their carefully desinged kits somehow vanished when merged with Adobe.. That is not cool, considering we paid for and supported Typekit, which in turn had an incredibly responsive support team. This is not progress!

  • >