Fonts are great, but using them well can be hard. Volumes have been written about typography, yet every good designer will say there are no rules; there is no magic formula for success. Typography simply takes practice. Typography is a practice.

So today, we’re launching a new website: Typekit Practice, a place where novices and experts alike can hone their typographic skills. We hope it will help students learn, help teachers teach, and help professionals stay sharp.

Let me show you around.

practice-home
Home.

Lessons walk through specific topics or methods in the practice of typography, with a clear objective or takeaway skill that can be immediately applied to design work. Our first lesson is about using shades for eye-catching emphasis.

practice-lesson
An example in a lesson.

Readers can study the examples by editing code, and the lesson concludes by suggesting next steps. Lessons stand on a foundation of references to articles, blog posts, books, websites, talks, and other solid resources.

practice-reference
A reference in a lesson (left) and at its own URL (right).

For example, John Downer explains why sign painters shade letters to the lower left, Nick Cox reviews Typofonderie’s Ambroise, and Typekit’s own David Demaree ruminates on Hi-DPI typography. We’re working hard to accurately cite the sources of references, so that readers have a starting point for further research.

practice-library
The pop-up library.

Finally, the Typekit pop-up library now has a permanent home on the web. Our collection has steadily grown since we introduced this traveling set of recommended books last fall. These books are excellent resources to reference and build upon, so it makes sense that the complete list of books and reviews by members of our team are part of Typekit Practice.

We have lots of ideas for Typekit Practice, plus an extraordinary group of authors and teachers helping us think up valuable lessons and make good references. Come practice with us.

Starting today, Creative Cloud single-app subscriptions will include a Portfolio plan from Typekit at no additional cost. This includes full access to desktop fonts sync, and should be especially good news for those of you who are excited to try out the new integrations with InDesign and Illustrator.

What is a single-app subscription?

A single-app subscription gives you access to the full version of just one Adobe application for less than the price of a subscription to the entire Creative Cloud suite. You can subscribe to more than one single app, but if you need more than a couple, you may find CC Complete to be the best value.

Screenshot showing list of Creative Cloud single-app plans
Browse all the plans on creative.adobe.com.

A Typekit Portfolio plan is now included when you subscribe to any of these applications:

  • Photoshop
  • Illustrator
  • InDesign
  • Adobe Muse
  • Dreamweaver
  • Flash Professional
  • Adobe Edge Inspect
  • Adobe Edge Animate
  • Adobe Premiere Pro
  • After Effects
  • Audition
  • SpeedGrade
  • Prelude
  • InCopy

What if I already have a Typekit account?

If you’re not a Creative Cloud subscriber and would like to check it out, you can always test the waters with a free plan, which offers 30-day trials for all Creative Cloud apps. We’ll walk you through the process of connecting your Typekit account to Creative Cloud if you’re ready to take the plunge with a subscription.

What if I already have a single-app subscription?

Your next step is simple: sign in to Typekit with your Adobe ID and password to start using your new Portfolio plan.

If you’re already using Typekit and have upgraded your plan independently of Creative Cloud, we’ve got your back. Sign in to Typekit again now, make sure you’ve linked your Typekit account to your Adobe ID, and you will receive an automatic refund for the time left on your subscription.

Any questions about getting started? Get in touch with us anytime at support@typekit.com.

This week, we’re taking a break from our regular exploration of great uses of Typekit out on the web and turning our eyes closer to home. You may have missed it in last week’s excitement, but we’ve replaced the Typekit homepage with something completely new.

The original homepage first appeared way back when we made Typekit available to the public in November of 2009. Since then, web fonts have gone from fringe to mainstream, new trends and techniques in web design have surfaced, and now, with the launch of desktop font sync, Typekit is expanding from web fonts to fonts for all parts of the creative process. The old page had served us well, but the time had come to update the way that we introduce ourselves to the world.

old-and-new-homepage

Original Typekit homepage on the left and our updated Typekit homepage on the right.

Working with the talented people at Weightshift, we designed and built a new homepage to better communicate Typekit’s expanding role. We also took the opportunity to incorporate best practices and new ideas in web design that have evolved since the original homepage was designed. Here are just a few of the things we like about our new homepage:

Bigger, tangible type

type-examples

The original Typekit homepage featured a single example of web fonts on a white background. With the arrival of desktop fonts, we have an opportunity to present great type in use for all kinds of design, from the web to print to motion graphics and beyond.

To help communicate the ubiquity of type, we’ve incorporated a greater variety of examples from all sorts of mediums. We’ve also introduced more texture and depth to the page, which helps the digital type samples feel more tactile and touchable.

One page to rule them all

entire-page

Our original product walkthrough spanned multiple pages, telling a story about the features and benefits of Typekit piece-by-piece. For the new homepage, we decided to take advantage of a long-scrolling product tour pattern to tell a more cohesive story about how Typekit is unifying the use of type across mediums and tools.

Responding to context

responsive-layout

With the explosion of devices and screen-sizes that access the web, we can’t just assume that every visitor is sitting in front of a desktop computer. Responsive web design is a collection of techniques that have evolved to deal with that increasing variability, and the new Typekit homepage is our first attempt at incorporating some of those techniques to explain our product in a format more appropriate to the reader’s context.

Updating our brand

branding-old-and-new

Since our acquisition by Adobe over two years ago, we’ve been finding ways to integrate Typekit with Adobe’s other products in ways that provide benefits to our existing users without too much disruption. It’s safe to say that we wouldn’t have been able to make desktop font syncing so seamless without Adobe’s Creative Cloud platform to build upon. With more new users coming to us via the Creative Cloud, it was time for us to look more like a consistent part of the suite.

To that end, we’ve updated our logo and wordmark to better match Adobe’s other products, and we’re transitioning from our trusty old friend Omnes to Adobe’s custom branding typeface, Adobe Clean. We think this update stays true to Typekit’s heritage while making us more recognizable as a part of the Adobe family of products and services.

With our new homepage, we’ve done our best to fuse the best of what’s new with the best of our history, sometimes quite literally: the repeated background pattern is created from original Typekit logo concept sketches from Jason Santa Maria’s notebook. We’re excited about our new homepage and the direction that it points for our future. We hope it’s a site you like as well.

The Creative Cloud team here at Adobe continues to impress us with their dedication to smoothing the seams in the creative process. We’re delighted with how the work we did together on desktop font sync has turned out. For those of you who use Illustrator and InDesign, we’ve gone a little further and helped to update the actual application interfaces, so that it’s easier still to see your synced fonts from Typekit and pull them into your projects.

Hunt for missing fonts on Typekit from within InDesign

You’ve probably had the experience of opening up a file with fonts missing from your system, forcing you to search for a replacement. The InDesign team has found a great way to make this process a little easier, and have updated InDesign to identify which of those missing fonts are available to sync from Typekit.

Missing fonts dialog in InDesign

And even if you don’t have to deal with missing fonts in your files, you can still benefit from this upgrade just with the lovely new font selection interface that indicates which fonts from Typekit you’ve already synced.

Font menu in InDesign

Easy Typekit browsing in Illustrator’s font menu

You’ll also enjoy a smooth font selection experience in updated versions of Adobe Illustrator. Fonts you have already synced from Typekit are labeled with our icon in the font menu—and if you need to, you can use the “Add Fonts from Typekit” button to head directly to typekit.com/fonts and select some more.

Updated font selection menu in Illustrator

Rufus Deuchler walks through the process in this video from the Illustrator team.

Have you joined Creative Cloud?

To see these updates to Illustrator and InDesign, you’ll need the latest versions of the applications from Creative Cloud, and an Typekit subscription that includes font sync. Find the plan that works for you on Creative Cloud, and don’t hesitate to get in touch with us if you have any questions about linking an existing Typekit account to Creative Cloud.

When we first joined Adobe, we wrote that “this represents a huge step forward in bringing fonts to the web.” This turns out to have been something of an understatement—two years on, we’re changing the way you use fonts on your desktop as well.

Many of you have already signed up for early access to desktop font syncing, and it’s been great to hear so much positive feedback—not only about how easy it is to use, but also how it simplifies the way you use fonts between design and development.

Today, we’re thrilled to open up desktop font sync to all of our qualified customers. Read on to learn about who’s eligible and how to get started.

The new Use Fonts dialog

Choose from hundreds of fonts

We’ve profiled several different foundries on this blog who have already added their fonts to our selection available for desktop sync. We couldn’t be prouder of this collection, which currently includes over 200 typeface families and four times as many individual styles—and we’ll keep adding more to it.

Use them anywhere

When you sync fonts from Typekit to your desktop, they are cached locally on your computer. That means they’ll go anywhere your system fonts do—word processors, slide presentations, and, of course, any Adobe application. Our desktop license covers all the same terms of use you’d expect from a system default font, which means you can safely use synced fonts from initial design through final production.

Synced fonts in Creative Cloud

Getting started with sync

Desktop font sync is available to customers with a paid monthly or annual Creative Cloud subscription or a Portfolio, Performance, or Business standalone Typekit plan that has been linked to an Adobe ID.

If you’ve already got one of the subscriptions listed above, then you have this feature turned on as of today. Jump right in and start syncing! (And if you’re new to this, we’ll be happy to walk you through it.)

Did you already sign up through the early access program? You don’t need to update anything today. Just keep rocking!

What’s next

Today’s a big day in Typekit history. We’re delighted to help you bring great type into all of your work, and it’s exactly the kind of seamless integration we hoped to accomplish when we joined Adobe. We’re also grateful for the foundry partners whose amazing work has been such a fundamental part of what we’re here to do. Supporting great foundries while putting type within reach of more designers—it’s wonderful to see this ecosystem take shape.

This isn’t the end of the road, either. We know you expect more from us, and we plan to keep exceeding those expectations. We’ll continue to develop new ways for you to access and use fonts everywhere you need them—as well as support our talented foundry partners.

Following our sponsorship of CSS Zen Garden, we’ve commissioned three CSS Zen Garden themes from different designers using fonts from Typekit. With previous themes from Elliot Jay Stocks and Trent Walton, today designer Dan Mall presents our third theme, Garments.

Before I became a designer, I worked in retail for years. Through high school and college, I worked at and managed departments for subsidiaries of Gap Inc., Foot Locker, The Limited, and more. One thing that constantly impressed me was the incredible art direction of the apparel’s graphic design: hangtags, labels, packaging… the stuff only the buyer sees.

Garment tags
Garment hangtags

One of my favorite pairs of jeans has some beautiful printing on the inside, and I vowed to one day create a design influenced by this lovely style:

Detail on inner jeans tag

Today is that day. Introducing Garments, my CSS Zen Garden theme.

Garment theme for CSS Zen Garden

To carry the spirit of this design, I turned to Dalton Maag’s Effra, a modern geometric sans serif that surprises with soft and humanist design details. I was looking for something utilitarian but not vanilla, and, with more than its fair share of personality-filled glyphs, Effra fit the bill quite nicely.

Now that we have such wonderful options for serving great typefaces on the web, the days of image replacement are all but gone. That’s good news for the progress of a speedier web, but one of the benefits of image replacement is the ability to modify the text without changing structural markup. As an example, check out one of my favorite CSS Zen Garden themes: This is Cereal, by designer/developer Shaun Inman. In order to fit conceptually, his images include headlines like “One bowl away from enlightenment” instead of the original text of “The road to enlightenment.” Genius!

I wanted to do the same, but since I’m not actually replacing anything, how could I thematically “style” the headlines without altering the markup? Enter generated content.

My first thought was to generate the content that I wanted using :before or :after and then hide the original text with display: none;. No dice; when you hide the original element, you can’t unhide content generated from said element. But, there’s one exception: the visibility property. If you set the original element’s visibility to hidden, you can “unhide” the generated content by explicitly setting the visibility to visible.

My final code for the headings ended up looking something like this:

.preamble h3 { 
  visibility: hidden; 
} 
.preamble h3:after { 
  visibility: visible; 
  content: "A Fashion-Forward Future";  
}

Voilà!

The other big consideration for me was optimizing graphics, especially since Elliot and Trent each did such a great job creating beautiful and fast-loading themes. Especially because the art direction of my theme lends itself to simple icons, I thought SVG would be a great way to go. I created an SVG sprite sheet and ran it through my usual SVG workflow to get the file size as small as I could and also to generate some fallback PNGs.

Well, without further ado, help us welcome this new CSS Zen Garden + Typekit collaboration and get cracking on your very own version!

Dan Mall

Dan Mall is the Founder & Design Director of SuperFriendly, a design studio that makes brave sites and apps for screens of all sizes. Dan is the co-founder of Typedia and The Businessology Show. He writes about design and other issues on Twitter as @danielmall and on his site, danielmall.com.

Following our sponsorship of CSS Zen Garden, we’ve commissioned three CSS Zen Garden themes from different designers using fonts from Typekit. Our first theme was designed by Elliot Jay Stocks, and the second theme comes from designer Trent Walton.

It’s an exciting time to see CSS Zen Garden revitalized. For years it has demonstrated the power of CSS through a single CSS file. I believe that now, thanks to media queries, we are able to demonstrate that same power multiple times within a single file. Our layouts can change dramatically from viewport to viewport, and all we need is CSS.

Thrilled to see Typekit sponsor CSS Zen Garden, I wanted to pay tribute to the occasion by letting web fonts do most of the work in my Apothecary theme. Imagining labels on tonic and tincture bottles, I made my font choices:

I wanted to have a wide range of eras represented: Bodoni goes back to the late 1700s while both Wood Type Revival typefaces come from the mid 1800s. I really like the inclusion of Refrigerator Deluxe, perhaps the oddball here, which takes its cues from the 1950s. It fits, yet creates an intentional confusion around where or when this thing comes from—which is exactly how I imagine one would feel after being handed a superlative-laden bottle of miracle cure from the local pharmacist.

Screenshot from Apothecary theme

On the more technical front, I put column-count and flexbox to use on the theme. Column-count allowed me to create wider sections while maintaining a sensible number of characters per line. Because most of the theme is one column, I used flexbox to move the design selection up on the page directly under the intro. I think it’s particularly helpful at the narrowest views—less scrolling to explore other themes.

File size is always a concern, and after Elliot went with no images and a sub-100k page load (darn good work), I knew I had to get serious. I focused my energy on optimizing the images as much as possible while retaining acceptable resolution. SVG didn’t work because the images were too detailed, so I went with 2-4 color PNGs. I also created the triangle shapes with CSS. Sure, it’s riskier on the browser compatibility front, but if you’re going to go for it, go for it in the Zen Garden. It paid off, because I ended up at 270kb for narrow views and 320kb for wider ones.

Apothecary theme demonstrated across several screens

But that’s enough out of me. Take a look at the CSS file from my theme. Then, after you came up with 100 things you’d do differently, go and create your own theme. Happy gardening!

Trent Walton

Trent Walton is founder and 1/3 of Paravel, a custom web design and development shop based out of the Texas Hill Country. In his spare time, he writes about what he learns on his blog and on Twitter. Also notable, Trent’s wife has put him on a font allowance.

For more than a decade, the CSS Zen Garden has been a source of inspiration and education for web designers and developers. The project helped to catalyze the adoption and development of the modern standards-based web, paving the way for technologies like @font-face and tools like Typekit.

Today, we’re proud to announce Typekit’s sponsorship of the CSS Zen Garden project. You can now create a kit and use those web fonts in your own theme submission; after your submission is accepted, the kit will be copied into a special Typekit account for csszengarden.com where we sponsor the pageviews. We hope that providing access to high-quality web fonts on the CSS Zen Garden will help to inspire a new generation of web builders.

In this post, Dave Shea, creator of the CSS Zen Garden project, will provide some historical background on the origins and significance of the project, and Typekit’s Bram Stein will explain how to get started using web fonts from Typekit in your own theme submission.

CSS Zen Garden header

A decade of CSS design challenges

The CSS Zen Garden began ten years ago. Born in a time long before CSS-based layouts were the accepted way to build websites, it introduced a very simple idea that proved to be a powerful demonstration of what CSS enables: one single HTML file, redesigned hundreds of different ways just by including a different CSS file.

With that goal in mind, it also offered a design playground that facilitated creativity, thoughtful experimentation, and inspiration. Many designs in the site’s extensive archives were contributed by web designers earlier in their career, designers whose names and work you might recognize—Douglas Bowman and Mike Davidson of Twitter, Dan Cederholm of Dribbble, Ryan Sims of Rdio, along with Jon Hicks, Shaun Inman, Eric Meyer and many more. It has been continuously referenced by education curriculums, and designing and coding a submission remains to this day a popular challenge tackled by students new to the field.

Of course, our industry has experienced major change during the intervening decade. So for our tenth anniversary earlier this year, we relaunched the Zen Garden with an updated challenge: to show what can be done with modern web standards. HTML5 and CSS3 are now expected, and designs built to these new standards now have a home on the site, alongside hundreds of designs from an earlier era of the web.

Even as we work to encourage great design and best practices in CSS, typography still presents a challenge. If you’ve been around since the early days, you’ll remember when saving type as images was the only way of including advanced typography in your designs. CSS image replacement methods guided the early Zen Garden, but we’ve luckily come a long way since then.

Our industry has since crossed many of the barriers that prevented embedded web fonts in the past, but licensing still remains a thorny issue for an open project like this. Typekit is a great force for removing these hurdles and allowing web designers to get to the heart of what they do best, and I’m thrilled that the Typekit team at Adobe has come up with a method that will allow Zen Garden designs to incorporate real fonts legally, easily, and freely.

—Contributed by Dave Shea

Including Typekit in your CSS Zen Garden designs

Using Typekit in your CSS Zen Garden submission couldn’t be easier. Create a new kit using your own Typekit account and add the fonts you want to use. Then include the Typekit embed code as usual in your local copy of the CSS Zen Garden example HTML file.

Typekit embed code screenshot

When you are ready to submit your design, you need to copy your Typekit Kit ID to the CSS file in your submission. This will ensure that, if your submission is approved, Typekit fonts will continue to work and font usage won’t be charged to your personal Typekit account. To do this, copy the Kit ID (found in the Kit Editor, under “Embed Code” in the upper right corner) and paste it into a new comment near the top of your CSS file.

/* TYPEKIT_KIT_ID: */

Replace with your Kit ID. For example, if your Kit ID is “vhu0zxe” the resulting comment in your CSS file should be:

/* TYPEKIT_KIT_ID: vhu0zxe */

Once you’ve added the comment you are ready to submit your design to the CSS Zen Garden. If you have any questions about using Typekit with your CSS Zen Garden submission, don’t hesitate to contact support@typekit.com.

—Contributed by Bram Stein

Ten more years of web design inspiration

Preview of CSS Zen Garden theme

We’re excited to see where the next ten years of the CSS Zen Garden and the evolution of the web platform will take us. To help inspire you and demonstrate what’s possible with web fonts in CSS Zen Garden themes, Typekit is commissioning three new themes that we’ll be introducing on the blog over the coming weeks. We’ll begin with a post on the first Typekit-commissioned theme tomorrow. For a sneak peek, head over to the CSS Zen Garden.

8 Faces #6

If you’ve been thinking about signing up for Typekit, now is a great time to do so. Join at the Performance or Business plan level (or upgrade your existing plan), and we’ll send you a free copy of Issue #6 of 8 Faces, the typography magazine run by yours truly.

8 Faces is a magazine about type and everything surrounding it. Each issue, the magazine asks the question, “If you could use just eight typefaces, which would you choose?” to eight leading designers from the fields of print, web, illustration, and of course type design itself. These answers are turned into beautifully-designed spreads that show off those typefaces, and are  paired with in-depth interviews about the designers’ lives and work.

The 8 Faces team prides itself on producing a printed magazine that you’ll want to keep on your bookshelf—print is most definitely not dead! And with each issue featuring an article from a member of the Typekit team, 8 Faces is a perfect accompaniment to a Typekit subscription.

We’ve set aside a limited number of copies for this offer, and will honor it for as long as supplies last. So head on over to our Plans page to sign up or upgrade, and the latest issue of 8 Faces will be on its way to you soon!

Desktop font sync is now available on all eligible Typekit plans! Please read the “The fonts you love from Typekit, now on your desktop
” blog post for more information.

Today, Adobe is announcing an early access program for the new file and font sync capabilities of Creative Cloud. We’re beginning to roll them out in limited batches to Creative Cloud and Typekit subscribers as we continually monitor the quality of the experience.

To sign up for the early access program, fill out the Creative Cloud early access request form. Make sure to use the email address associated with the Adobe ID that you use to log into Typekit. If you haven’t yet linked your Typekit account with an Adobe ID, you’ll need to do that first.

Once you are approved for early access, you’ll receive an email from the Creative Cloud team confirming that the features are activated for your account. At that point, grab the latest version of the Creative Cloud desktop app, log in with your Adobe ID, and select the Fonts tab to sync fonts and begin using them in any of your desktop applications.

There are a few things to keep in mind when you sign up for early access:

  • Early access customers will be activated in batches over the coming weeks. File sync and desktop font sync features are not yet enabled for everyone.
  • You must have an Adobe ID to sign up for early access. If you have a standalone Typekit subscription, you must have an Adobe ID that is linked to your Typekit account in order to sign up.
  • You’ll need a paid Creative Cloud membership or a Portfolio, Performance, or Business Typekit plan to sign up for early access. Customers with a Typekit Trial, Personal, or Enterprise plan don’t have access to desktop font sync.
  • All Creative Cloud and Typekit plans will have a limit on the number of fonts a user can sync to their desktop each month, similar to the pageview limits for Typekit web fonts. These limits are still being finalized and won’t be enforced during the early access period.

We heard from many of you who want to know exactly which fonts on Typekit will be available for desktop use via the sync feature. We’ve updated this help document with a complete list of the foundries and faces that will be initially available.

If you have any questions or comments, drop us a line at support@typekit.com. We’re excited to share this feature with you, and we can’t wait to hear what you think.