I'm a creative director at Laughing Samurai. I bark orders. Sometimes people listen. Sometimes they don't. When they play nice, I pay with pizza. And sometimes with Nachos. Hell, sometimes even Beer. Wanna work with me? Let's do this.

The ULTIMATE designer’s guide to using Typekit

Get ready to embark on a splendorous journey. A journey to a world that includes matching typography on both print and web, without having to resort to Verdana or Helvetica. Now there is nothing wrong with either of those fonts, but on this particular journey, you’ll encounter multiple weights, faces and type families. It’s a journey that is sure to bring more awesome to every web project. The journey of topic here is non other than TYPEKIT.

Typekit [or you late adopters or those buried under a rock for the last year or so] is a typography subscription service that allows you to use a vast library of fonts – within your website or print project. Initially, it started as a service solely for the purpose of web design. Since their acquisition by Adobe, however, it is now included as a part of the Creative Cloud subscription.

This allows designers to use some of the fonts in the collection on their, and in turn, on print jobs. While there are some limitations you may encounter when using these fonts in print files, the advantages of consistent typography in both print and web far outweighs these limitations.

In order to get the most value out of your Typekit account, we’ve created a best practices guide for designers who are new to Typekit. Here you will find basic tips for getting started as well as tips on general usage. For detailed information or step-by-step guides, check our Typekit’s Learn & Support page.

SUBSCRIBING TO TYPEKIT

Before you can begin using Typekit, you must subscribe. Fair enough, right?

Creative Cloud Members

You automatically have a type kit subscription. Sign in using your Adobe ID.

1. Click the Creative Cloud icon on your computer’s menu bar
2. Click on Assets
3. Click Fonts
4. Either sign in or click “Add fonts from Typekit”

You will have access to over 1,000 desktop fonts and over 4,200 web fonts.

Non- Creative Cloud Members

Sign-up on typekit.com. You can sync fonts to your desktop by downloading the free Creative Cloud app. (link to app download)

FINDING AND CHOOSING FONTS

This might be the easiest part of using Typekit. With a very intuitive user interface, Typekit makes it easy to locate exactly what you need to get your project started.

Fonts can be filtered in numerous ways:

Classification: serif, sans-serif, slab serif, et.
Web and/or Desktop
Headlines & Body Copy
Weight
Width
X-Height
Contrasts
Old Style Numbers
Supported languages
(+ any combination of the above)

Afraid of commitment? Use the slick type testing tool that allows you test drive the font before you install it.

Keep in mind, if you are designing a website in Photoshop, make sure you pick a font that is available for both desktop and web use, by making sure it has both the web & desktop icons next to it.

NOTE: Just because a typeface has the web/desktop icon, doesn’t mean all it’s fonts are available for both. Click on the typeface, and check it out in detail. Make sure the fonts you want to use are available to sync to your desktop.

TIP: Because Typekit uses infinite scrolling (like tumblr), when clicking on a font, open in it a new window or tab, so you don’t have to go back and re-scroll from the beginning.

USING TYPEKIT FONTS IN YOUR DESIGNS

Once you’ve decided what font you’re going to use, you must sync it for use.

Similar to how you would activate a font using a font software, the syncing is the process of installing the font for continued use.

1. Click the +Use Fonts button
2. Select weight(s)
3. Click Sync selected fonts

It may take a few minutes, but once fonts have been synced, they will appear on your desktop ready for use. You will notice, as you navigate the font menu, that your Typekit fonts appear with a Typekit icon next to them. This makes them easy to locate when you have forgot the actual font name.

NOTE: Photoshop can be buggy when displaying new fonts. You may have to either create a new fake document, to force it to install the font, or restart Photoshop for the new fonts to appear in the font menu.

“BUT I REALLY, REALLY NEED TO USE THAT WEB-ONLY FONT!”

It can be frustrating to not be able to use the font you want in your design. If you really want to use a web font in your web design project, there might be a few ways to get around this.

Option 1

Use Adobe Muse to design your site. Adobe Muse allows you to use fonts from one of your kits in Typekit, live and on your machine, without having to hold it on your desktop.

If you don’t want to design your whole site using Muse, set your type the way you want it to look, screen capture it, and place is in your design using your program of choice.

If you don’t have the subscription level that allows you to install Muse, you might be able to subscribe for a single month and cancel once your project is finished.

Option 2

Use the font to set your headline using Typekit’s Type Tester, screen capture it and place it in. is to set the headline in the font you want using Typekit’s Type Tester.

This is definitely the less recommended option and should never be your go to for projects. I mean, come on! Stop being cheap and looking for work-arounds, subscribe to or purchase Adobe Muse.

KEEPING TRACK OF YOUR INSTALLED FONTS

1. Navigate to your system’s menu bar
2. Click the Creative Cloud icon
3. Select Assets
4. Select Fonts

Here you will locate your list of installed fonts. You can quickly access Typekit from there by clicking the “add fonts from Typekit” and “Manage fonts” buttons.

COLLECTING TYPEKIT FONTS FOR PRINT PROJECTS.

Using Typekit Use them freely, since there are ways to get around this in print is a bit more complicated, since these fonts cannot be collected for output. But, relax. As always there are ways around this.

SWIM AGAINST THE CURRENT.

Straying from Gotham will not cause a panic attack. You will break down if you have to design outside of Helvetica. I promise. Be aware that Typekit doesn’t have everything. It may not always be your one stop shop, but it does force you to think outside of the common comfort fonts. One of the coolest features Typekit offers is lists. They have some cool lists of suggestions to replace all of the popular and classic fonts of yesteryear as well as themes, characteristic and intended uses. Live on the edge and trust time. You might discover something pretty delightful.

BUY SMART. SHOP LOCAL.

Interested in supporting your local (or virtual) type foundry? Typekit also features collections by foundries. This is a great way of seeing what all the different foundries are up to, as well as staying updated on new additions to their collections.

THE PUDDING.

Still not sure how to integrate Typekit in your work? Check out their design showcase for real world projects inspiration from some really talented designers, doing impressive stuff with Typekit.

GO FORTH AND CREATE.

There you have it. From here on out, make no more excuses for being behind the times of technology. Take advantage of the latest and greatest fonts that Typekit is offering. Using Typekit can make your design look better and more inline with what you’re doing in print, as well as increase the speed of your site by having to use less images in place of text, as it was done traditionally. It also makes for a more consistent look across media, platforms and devices, which usually ends in well-rounded projects and happier clients. So, now its time. Go forth and create.

One Comment

  1. Posted May 11, 2016 at 10:45 am | Permalink John Mindiola III

    This is a nice primer for getting started with Adobe Typekit. The step-by-step processes will definitely help students get up and running!

Post a Comment

Your email is never shared. Required fields are marked *

*
*