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.

In the deep weeks of winter, it’s helpful to think of cheerful things—like the fact that the days are already getting longer, and that you only really need one perfect typeface to make your website feel balanced. To round out this chilly week, we’re looking at a few bright, sunny sites that recently caught our attention.

Sam Willis website

Bold color blocks are a simple, effective backdrop to designer Sam Willis’s portfolio site, and subtle Ratio performs beautifully in this setting. Multiple weights of the single typeface give a clean, cohesive feel to the page, while unobtrusive animations keep the navigation fun.

Stuff and Nonsense

We’ve been fans of previous iterations of the Stuff & Nonsense website, and with their fresh redesign featuring lovely Jubilat, we’re smitten all over again. “Fashionably flexible” appears with good reason in the page title: fans of responsive design will be rewarded with a very well-done scaling header image—and the text scales nicely, too!

Fubeca Labs

One big color, a short and playful description, and a link to get in touch by email: Fubeca Labs makes minimalism look pretty smart on their single-page, no-scroll website. Tisa shines here as the leading body text, giving just enough heft to the brief description, with Nimbus Sans in an understated pairing.

That’s it for this week; share sites you like in the comments!

Are you ready to start 2014 off with some fresh faces? We’ve updated a few fonts in our library recently—and added a new one we think you’ll love.

Petala from Typefolio
Petala Black (top) and Thin (bottom).

Gorgeous Petala from Typefolio is new to our library, and comes packed with 14 different weights and styles. Each weight shows off a slightly different side of this typeface’s character, which is pronounced without being overwhelming.

Foco and Effra from Dalton Maag
Foco Light Italic (top) and Effra Heavy (bottom) from Dalton Maag.

Here are a couple great typefaces from Dalton Maag, both featuring updates for even better performance on screen. Foco carries a lot of personality with its handwriting-like features—the “f” in particular giving a forward-leaning energy that’s accelerated in italics. And Effra is a dependable pick for clear text with an approachable, low-key attitude. You might already be familiar with these; republish your kits if you’re already using them, and if not, now’s a great time to check them out.

Updates to Bernini from Just Another Foundry
JAF Bernino Sans Bold (top) and JAF Bernina Sans Light Italic (bottom). All text from Project Gutenberg

We also updated JAF Bernini recently with TrueType hinting improvements, which means smoother performance on screen from this extensive typeface family. This is a well-balanced collection with a number of width variations to support various design needs, be it longform editorial work or punchy headers. It’s also worth taking a look at other typefaces in the foundry catalog with your projects in mind, because now you can sync any of them to your desktop too.

That should give you a few ideas for new typefaces to bring into your designs in the new year! If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

We’re back with the new year, and delighted to round up a new batch of sites that recently caught our interest—this week, with some special attention to a few sites that give us a glimpse into other people’s lives, stories, and thoughts, and a bit of our own cultural mythology.

Indigy screenshot

Indigy presents a lovely space for a powerful purpose: to share stories from cultures around the globe at risk of being forgotten. Freight Sans and FF Tisa are alternated for both body and header text here, and make for a thoughtful pairing that performs well for the longer blocks of text throughout the site while keeping navigation tidy.

Medium screenshot

It’s already evident to us how dearly the folks at Medium care about type on their site, and we love the recent redesign. The calligraphic shapes of Freight Text immediately pull us in, a great choice for long-form reading, with navigation and other elements in clear JAF Bernino Sans to make the whole experience feel completely effortless.

American Imagery Bank screenshot

Keep an eye on the American Imagery Bank for updates to their fascinating catalog of the iconic images that define the American identity, rendered beautifully in woodcuts. We love the type choices here, too, with the banner in Refrigerator Deluxe, headers in classic Futura, and body text in nostalgic SchoolBook.

That’s it for this week; share sites you like in the comments!

Sites We Love from 2013

December 20, 2013

This year, we’ve featured over 100 sites here on this blog, all using Typekit in creative and beautiful ways. It’s a delight to see the great designs that good typography enables. We hope our little showcase here has inspired you in your own work, too.

To finish up the year, here’s a selection of some sites we especially loved from our weekly roundups.

Two Please website

Two Please shows off tempting recipes with luscious photos and some great type: FF Nexus Serif and Sans, both ported over on a license from FontFont, and Brandon Grotesque in the header navigation. (From November 15.)

Jack Cheng screenshot

The website of writer Jack Cheng showcases Chaparral in the body text and Anivers SC in headings. (From February 22.)

Space toads gameplay screenshot

The arcade-inspired Space Toads game uses Typekit fonts throughout the site and in gameplay: Xenara for most of the text on the website, wildcard BD Geminis, and look closely for Mostra Nuova and Peachy Keen. (From September 27.)

Letterboxd website

Made for film buffs, Letterboxd uses Abril Text for most of the copy, with Proxima Nova and Freight Sans for navigational text and tags. (From September 13.)

Trask Industries homepage

A teaser for the upcoming X-Men movie, the Trask Industries website displays headings in Futura PT, with text in Proxima Nova. (From August 16.)

Hiut Denim website

Hiut Denim continues a legacy of denim work that’s lasted for three decades—and their website demonstrates a careful, understated personality, with Calluna in the headings and Nimbus Sans a sans-serif counterpart for body text. (From June 27.)

Screenshot from Daft Punk feature in Pitchfork

Fantastic and loud scrolling visuals reinforce the edgy energy of FF Spinoza and Colfax in Pitchfork’s feature story on Daft Punk. (From June 7.)

oneminutewith

The impressive interviews on oneminutewith.com feature insightful questions and solid type choices, with body text in Proxima Nova and interview questions offset in Quatro Slab. (From April 5.)

BKLYNR screenshot

BKLYNR showcases Quatro in a big, bold title format, with body text set in Proxima Nova. (From March 22.)

Little Goat Chicago

Little Goat Diner’s charming illustrated and animated splash screens are a clever prelude to their numerous and extensive menus, set in Brandon Grotesque. (From January 11.)

If you’ve seen Typekit on a site you like, please share in the comments. We’ll be back with more in 2014; have a happy New Year!

Typekit fonts are now available in Peeky, a new service that makes it easy to design and manage web-based image galleries and portfolios.

Peeky users can apply fonts to the text in their sites just by choosing fonts from a menu. The results are expressive and elegant:

We’re always excited to help bring great typography to more platforms, and we can’t wait to see what people create with Peeky. Try it out for yourself — access to Typekit fonts is currently included in all Peeky account types.

Do you run a platform that would benefit from a Typekit-powered font integration like the one described here? Drop us a line at support+partners@typekit.com to learn how to get started.

Type Rendering Mix

December 18, 2013

At Typekit we care a great deal about how type renders on screens. We work hard to apply our research and knowledge to the fonts we serve, but ultimately, there are some differences in how each operating system and browser renders fonts.

trmix-header

Typekit’s Tim Brown and Bram Stein have created a JavaScript library to help tackle the issue of inconsistent browser text rendering. Type Rendering Mix lets you apply CSS based on the text rendering engine and antialiasing method your browser is using. It does this by adding two classes to your HTML element: one for the text rendering engine and the other for the antialiasing method.

  <html class="tr-coretext tr-aa-subpixel">
    ...
  </html>

Using these classes, you can (for example) decrease the font weight for the OS X Core Text rendering engine, which renders text heavier than other text rendering engines.

originality
Above: Rooney Sans Regular in Chrome on OS X (left) and Windows 7 (right); note that OS X renders text heavier than Windows 7. Below: Rooney Sans Light in Chrome on OS X (left) and Regular in Chrome on Windows 7 (right).

By adjusting the font-weight only for browsers that use the Core Text rendering engine, we create a more consistent experience overall:

html {
  font-family: "rooney-sans", sans-serif;
  font-weight: 400;
}

html.tr-coretext {
  font-weight: 300;
}

Type Rendering Mix can also be used to display a different font based on the text rendering engine, or fall back to one of the core web fonts. See the Type Rendering Mix website for more documentation and examples.

If you’re interested in learning more about the nuances of type rendering, start by reading our Type Rendering series. We cover the differences in type rendering across operating systems, web browsers, fonts, and more.

We look forward to hearing how Type Rendering Mix helps you with your work. If you have any questions or feedback, comment here or get in touch over Twitter with Tim and Bram.

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.

tim's talk aea 2013

We’re excited to join An Event Apart in San Francisco this week, with a talk given by our Type Manager Tim Brown and the Typekit pop-up library. Tim’s talk is titled “Universal Typography,” and intends to “show us how to practice typography in a way that is equally universal.” Tim is among the first speakers on Monday, so you can catch him before heading to lunch.

While on your lunch break, come peruse the Typekit pop-up library! We’ll be located outside the main conference room, where the registration tables were set up on Sunday. In addition to our ever-growing, handpicked collection of books, we have copies of 8 Faces, t-shirts, and pins to give out. Stop by to say hello and check out a book you’ve been eager to encounter in person.

New books in the library include:

The Elements of Content Strategy
by Erin Kissane

A Book Apart authors take on important topics, distilling the essentials down into beautiful little volumes you can slip into your bag for reading and reference anytime, anywhere. Erin Kissane’s The Elements of Content Strategy is a favorite; the last read left me thinking about the importance of how writing serves your readers and finding your (blog’s) own voice. — Liz Galle

Pretty Pictures by Marian Bantjes

Marian Bantjes’s work doesn’t fall into one spectrum so much as it spans multiple design spectrums. Her work incorporates graphic and logotype design alongside textile and pattern design, weaving intricate patterns that ultimately work in favor of the typographic elements. There is, very honestly, no one doing the kinds of things she is doing today. Pretty Pictures is a catch all catalog of her work — some work is fairly straightforward logotype design, and some of it questions the limits of typographic design. Her more intricate designs certainly call to mind Middle Eastern pattern-making as well as classically intricate calligraphic detailing. This book is less about finding a theme amidst Bantjes’s work, and more about being consumed by the sheer breadth of her talent and vision. — Ben Trissel

A Field Guide to Typography by Peter Dawson

Forms in Modernism by Virginia Grace St. George Smith

Designing News by Francesco Franchi

Emigre No. 70 The Look Back Issue by Rudy VanderLans

photo-6

You can view a full list of the available books in our previous blog posts on Brooklyn Beta & Ampersand. We are looking for more to add to our library, too, so please send us your suggestions.

If you think Typekit’s pop-up library would be a good fit for your event, please get in touch with us through support@typekit.com.

In this week’s sites we like, we’re going to Vassar College! We’re not ready to declare our major just yet, so let’s see what’s going on in a few different departments.

Vassar Biochemistry department homepage

Biochemistry starts out innocuously enough—with just six organic elements involved, how complicated can it really be? Well, take a look at how just one typeface, Freight Sans, is used on this website, looking cohesive but with enough variety in size and weight to establish clear hierarchy and meaning. You don’t need a truckload of elements to make something live and breathe—but you do need to know what you’re doing to make it work smoothly, as it does here.

Vassar Urban Studies department homepage

Pragmatica looks lovely up in the bold header on Vassar’s Urban Studies homepage, with lighter weights used in the clean sidebar navigation. In body text, the thicker texture of Freight Text gives a satisfying gravity to class descriptions and department information. These typefaces each carry their own distinctive voices, but on the page together they don’t crowd one another out.

Vassar Hispanic Studies department homepage

We love the look of Chaparral just about anywhere, and it suits the Hispanic Studies homepage perfectly, giving a literary flavor to the artfully composed page. Freight Sans balances this nicely in the header text and navigation, with a muted color palette working subtly to guide your clicks.

And if you’re interested in how the school serves similar content to different sites with unique designs, read more on the Vassar Web Design blog.

That’s it for this week; share sites you like in the comments!