Following our sponsorship of CSS Zen Garden, we’ve commissioned three CSS Zen Garden themes from different designers using fonts from Typekit. The first theme comes from our own creative director, Elliot Jay Stocks.

I’ve named this first theme Screen Filler, and in direct contrast to previous Zen Garden themes and a lot of my own previous work, it’s intentionally devoid of any imagery. Instead, I’ve focused on simple, bold blocks of color, using semi-transparency to reveal some of the underlying proportions of the grid.

Elliot’s CSS Zen Garden theme

Perhaps most importantly, I’ve tried to design something that keeps the type (a few choice weights and widths of TypeTogether’s wonderful Tablet Gothic) pleasantly readable at any size with a technique I’ve used on a number of recent projects: increasing the size of the type with the width of the browser. This might sound too painfully obvious to state, but I’m surprised by how few responsive sites use this technique. It’s a nice way of avoiding max-width declarations—which, in my opinion, can often stand in the way of future-proofing our sites—and it feels like a more all-encompassing adoption of what responsive web design can offer.

I’m obsessed with achieving optimal measure (line length), and it’s possible with just a few simple media queries. Here’s an example of what you can find in the CSS file:

/* 700 and up */	
@media screen and (min-width:700px) {
    body { font-size:90%; }
}

/* 800 and up */	
@media screen and (min-width:800px) {
    body { font-size:100%; }
}

/* 900 and up */	
@media screen and (min-width:900px) {
    body { font-size:110%; }
}

And so on and so forth. The important thing here is that the break points and size changes are not based on anything mathematical—just when it feels right.

Here are three different widths, captured on a 27″ monitor:

Three widths

Of course, there are some arguments against this technique: perhaps you don’t want to have massive type when you expand your browser to its maximum width on your 27″ iMac. And that’s okay! The CSS Zen Garden is about showing what’s possible—what we can do with web design; not necessarily what we always must do.

I love that the Garden is a playground. It was hugely influential on me back in 2003 when I started getting into web standards, spending hours of my time pouring over the designs on the site and all of those that were lovingly immortalized in Dave’s book. It’s been a great honor to provide a theme myself, and I can’t wait for you to see the incredible themes our next two designers have been working on!

Froont, a browser-based tool for designing responsive websites, has partnered with us to make Typekit fonts available in its intuitive service. Now, Froont users can add Typekit fonts to their designs by simply picking fonts from a menu.

This integration makes it easy to bring the quality of Typekit fonts into the sophisticated, web-native designs you can achieve with Froont’s text and layout tools.

Take Froont for a spin and let us know what you create!

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

Customizing your WordPress.com blog with fonts from Typekit just got even better. In partnership with Typekit, WordPress.com has refreshed the list of fonts included in its Custom Design upgrade, giving you access to some great new options.

Highlights among the new fonts include Abril Text from TypeTogether for classically readable paragraphs, Futura PT from ParaType for elegant headlines, and the always versatile Brandon Grotesque from HVD Fonts and Chaparral Pro from Adobe.

Like before, you can preview any of the fonts on your blog by selecting them from the font menus in the WordPress.com Customize feature:

Then, a click of the Save button applies the fonts to your blog, no coding required.

We’re excited to help make more Typekit fonts available to WordPress.com users through this easy-to-use feature and can’t wait to see the new, creative examples of blog typography that result.

The Right Type of Brand

November 7, 2013

Today’s post was authored by designer Leigh Taylor.

I recently answered a question on Quora about why we selected FF Tisa as the typeface for Medium. It wasn’t a decision we made lightly. Type is an integral part of your brand’s personality, and will impact your overall design. Here’s how we made the decision.

Focusing on brand development

We needed to identify the essential qualities of Medium to begin establishing the elementary building blocks—including typefaces—that would become the Medium brand identity. The questions we asked were basic in nature, and our goal was simply to learn and understand the product we’d built, and to reduce the anxiety a lot of us were feeling around decision-making.

What are the values of the Medium brand?

Initially we did a ‘data dump’ of all those unfiltered thoughts, ideas and desires that the team had, sharing ideas, product improvements, feedback, and suggestions. With that information at hand, we condensed what we had into product statements, highlighting the values, strengths, and focus areas of the Medium brand, and targeting how we wanted it to be received by our audience.

Sample of FF Tisa
FF Tisa, displayed here in italic, was eventually selected as the typeface for Medium.

Through iteration we eventually refined the statements down to the six guiding principles of the Medium brand:

  1. Quality first
  2. Interest over Social
  3. Appropriate over Consistent
  4. Direction over Choice
  5. Evolving over Finalized
  6. Networked over Controlled

We now had values we could reference to validate our decisions. It allowed us to make progress with confidence.

Who is Medium for?

To identify Medium’s core audiences, we gathered even more information from our internal collections, continued discussions internally, and harnessed the feedback from our early adopters—from whom we gratefully received many suggestions for improvement each day.

We distilled this down into four personas to encourage ourselves to view the product through ‘their’ eyes, running through user flows, mock-ups, and prototypes several times to highlight the subtle differences in each user case. We built an understanding of what works well and what doesn’t for each persona—which allowed us to address how to empower each ‘type’ of user on Medium and, secondly, to identify priorities on our roadmap.

How do we want Medium to be perceived?

We believe the brand should always support and enhance its content, and the minimal amount of chrome and embellishment used throughout Medium’s interface shows how this principle became a reality. We studied several other major brands whose visual qualities ranged from lighthearted and playful to serious and refined, and used this information to design Medium’s minimal brand presence with the appropriate personality.

Selecting a typeface

Considering that the Medium product is built on the words of others, the typeface was a fundamental component of the brand aesthetic. It was vitally important to find a typeface that supported what the words were saying, yet was still beautiful, legible, and encouraged the wide range of writing we wanted to see on Medium—not just opinion pieces.

This type critique meant our existing typeface, FF Meta serif, came under some scrutiny along with a small collection of perhaps four typefaces that we used when exploring and prototyping Medium, prior to launch. We reviewed each typeface in different environments and in different contexts to establish the right fit for Medium.

We compared articles in multiple typefaces that had a broad spectrum of overlapping qualities.

Type comparison of different fonts on Medium
Type comparison between FF Meta Serif and FF Tisa.

Comparing the high-quality shortlist of typefaces against each other, rather than throwing in, say, Comic Sans, allowed us to assess the presentation of each, and validate and justify those against our ideal brand direction.

In a direct comparison of FF Tisa and FF Meta Serif, we found FF Meta Serif was a little too formal and authoritative, making the words feel declarative, factual, and slightly more opinionated in presentation than we felt necessary. FF Tisa, however, still contained the positive aspects of FF Meta Serif, happily accommodating an opinionated piece, but with a touch more understatement than its predecessor. It is softer in presentation, with slightly more relaxed terminals, descenders, and tails, more consistency in stroke weight, and a touch more tracking. These factors contribute towards making the typeface appear more inviting, approachable, and supportive of storytelling.

This is definitely an example of content-led design—a typeface that accommodates multiple article types and styles while aiming to minimize the conflict of its presentation with the context of the article.

It helps that FF Tisa looks beautiful, too.

Leigh Taylor

Leigh Taylor is a designer, Partner and Founder of @GravitaCo, a design collective that applies design approach and solutions to a wide variety of products, platform and systems. Partner of @Noflo and @thegridio, making tools to help produce software. Sometimes he tweets @lat and showcases work via be.net/leightaylor and dribbble.com/t47lor.

We’ve made a small update to the languages supported by Typekit’s default web font character set. In addition to English, Italian, Portuguese, and Spanish, you can now use the Default option in the Kit Editor to display content in French and German.

To recap how language support works in Typekit, there are two character set options for each font in the Kit Editor, Default and All Characters. The All Characters set is exactly what it sounds like: every character (or glyph) in a particular font, including ligatures, alternates, and OpenType features (where available). Though these fonts have the broadest possible language and feature support, the font files themselves are much larger, typically 100-200% larger (in terms of KB).

The Default character set, on the other hand, includes all the characters necessary to support our most common languages, as well as some useful typographic characters like smart quotes and bullets. Because Default fonts include just the characters required for most web pages, these font files are much smaller, resulting in faster load times for your users.

What it means for your site

If you’ve been using the All Characters set to include French or German characters on your site, you can now switch to the Default character set instead (and trim down your kit size in the process). Simply launch the Kit Editor, select the font, and then change the Language Support setting to “Default.” When you’re done, republish your kit.

kit-editor
Select the Language Support option in the Kit Editor.

If you’re using any language that’s not included in the default character set, keep using the All Characters set. (Language support varies by font family and is specified on the font detail page.)

lang-support
Supported languages are specified in the right-hand column on the font detail page.

As always, if you have any questions, contact us at support@typekit.com and we’ll be happy to help.

8 Faces #7 (cover)

The latest issue of 8 Faces magazine (run by our creative director Elliot Jay Stocks) is now available to buy, and features an article by our engineer Bram Stein about hyphenation and justification on the web. Bram gets into the details of just what, exactly, makes line justification so tricky on the web.

Here’s a preview:

As screen resolutions increase to the point where it’s comfortable to read long-form text from a screen, more and more traditionally print-based publications are moving to the web. However, the quality of these two reading experiences is not quite the same, and this is partially because designers working on print publications have the benefit of advanced justification and hyphenation algorithms that are not available on the web. Ideally, using paragraph justification (or not) should be a design choice. This choice is made more complicated because of the short-sighted justification algorithms employed in web browsers.

We’re going to need better paragraph justification in browsers if we aim to make it a place for long-form reading.

8 Faces #7 (spread)

The whole issue looks great, and we’re proud to have members of the Typekit team among its contributors. You can pick up a printed edition, a PDF edition, or both versions of the issue right now from the 8 Faces website.

Aligning Type to a Brand

September 9, 2013

Today’s post was authored by designer Aura Seltzer.

Maybe you’ve been there before: You open a zip file of logos, flip through samples from a recent ad campaign, or someone hands you a binder of brand guidelines. You gulp, and prepare to design a website whose aesthetic will hold together these disparate pieces.

An industry-leading newspaper can lose credibility if its website is significantly harder to read than its paper copy. A gourmet private chef can have a tough time reaching the right audience or justifying his prices if his site doesn’t feel as “high-end” as his plated dishes. If you can make a brand appear consistent across touchpoints, you’ll boost its reputation on the web and provide a positive opportunity to connect with users. But without a solid foundation, your website and brand can deteriorate as soon as the site launches.

Your goal is to craft a beautiful website that effortlessly extends a brand’s visual vocabulary and serves as a flexible entity over time on the web. To establish this brand recognition and start the visual inquiry for your design, one reliable approach is to choose a typographic palette that supports (and even amplifies) that brand’s personality.

Designing a visual system from scratch

It’s likely you’ll encounter a situation where your client (or your own company) has no design guidelines to share with you. You’ll be building the system upon which future designs will rely. So, where should you start?

Think of type as your building blocks. Type dictates several other key decisions in your design, such as your column widths and layout, and by association your grid composition, media-query breakpoints, and the hierarchy of your messaging. Your type palette is your users’ entry point to your content. It’s the first point of interaction with your brand. Ask yourself candidly: if your website were to address your visitors out loud, what would its voice sound like?

If that voice is chirpy and candid, the voice of your type should be, too. You could explore typefaces like Rooney Sans Web and Soleil, whose upright posture, rounded forms, and open counters will convey your brand’s bounciness.

If that voice is husky and intellectual, look at durable faces like Acuta and JAF Lapture, whose defined edges and texture give the sense that they have a few stories under their belt.

Jet Blue homepage
JetBlue applies FF Din on its site’s most important labels, flight information, and pricing to create visual consistency with the brand’s logotype. They save page weight by relying on Arial for microcopy, paragraph text, and form styles.

You may find that using a single (super)family’s weights, widths, and styles—along with introducing color and scale to further hierarchize your content—can be enough to convey your brand’s voice. Working within a restricted palette automatically introduces brand consistency, making every piece of content feel like it’s coming from the same mouthpiece. JetBlue built its recent redesign around FF DIN (served via Typekit), which lends itself to friendly, clear labels that emphasize UI. Meanwhile, McSweeney’s uses Adobe Garamond to evoke the site’s publishing roots while nodding to the innate humor of using a traditional print face with such emphasis on the web.

McSweeney's homepage
McSweeney’s fills its hierarchical needs with Adobe Garamond Pro‘s regular and italic, letter-spaced uppercase, and a restrained link style. Ornamental dividers section the content and emphasize the site’s bookish feel.

Some typefaces may not have enough flexibility to handle all of your content, or your brand may have multiple voices, each warranting its own treatment—and that’s totally fine, too. In its most simple manifestation, you could find one typeface to serve for your headlines and another for your body copy. But it’s important to exercise restraint. Beware of creating overly complex systems, whose patterns can be difficult for users to decipher and may add unnecessary page weight to your site.

There’s no better way to test your options than with content. Not some lorem ipsum—I mean the actual written words that will find a home on the site. Does your chosen typeface match the attitude of the material?

One way to evaluate this is to hierarchically map out all of your content needs, from h1 down to captions, and assign typographic styles to each. Then, ask yourself: independent of layout, does the rhythm of the palette feel right for the brand? When you’re building your type system, consistency in the tone of your voice across the palette will set a stable ground for your content.

Sealing the cracks: Working with existing guidelines

If you are given any guidelines to shepherd your exploration, it’s imperative to recognize that while brands live across medium, the same guidelines simply cannot—particularly if they were originally intended for print. You’ll have a benchmark for comparison (and therefore a leg up on starting from scratch), but there’s no magical mouse maneuver to translate print-oriented guidelines to the screen.

You might realize that you’ll need to tweak the dictated color palette for better contrast and onscreen accessibility, or that brand graphics should be simplified for smaller file size. You may decide that assets like gradients are better built directly in code to serve as a progressive enhancement. It may seem like you’re making cracks in the already-set foundation, but you’ll at least know which cracks need to be filled in order to produce a sturdier end product.

Finding a typeface that evokes the sentiment of your brand and meets your site’s design and technical needs will seal these cracks in your client’s visual guidelines. Whether your brand-dictated typeface has a web font available or a comparable replacement, ask yourself a few questions to help evaluate whether your choice is suitable for the brand on the web.

Does the web version offer the weights and styles you’ll need in order to add hierarchy to your text?

Knowing you have enough variety to play with will keep you from developing a system that feels monotonous, and help you avoid sticky design situations—like realizing the italic isn’t a true italic halfway through your page designs.

Is the web version adequately hinted for use at a range of sizes?

The fine details and delicate curves of your print-dictated typeface may be difficult to replicate in pixels, leaving the reader with an uncomfortable onscreen reading experience. If there’s too much contrast between thick and thin strokes, your typeface may deteriorate at smaller settings—restricting its use to headlines. The opposite can also be true; your typeface may read effortlessly at 16px but appear crude and cumbersome at 42px.

Finding a web family that distinguishes display from text and/or caption (like Typekit’s Chaparral Pro, Freight, and PT Sans) can help ensure you have access to the right font for your scale. But, finding families with higher x-heights and more open letterforms will make letters more identifiable at all sizes, save page weight, and also make fine-tuning styling across your scale easier.

Does the typeface render well and similarly across browsers and devices?

Since your type will be the vehicle for constructing a consistent brand, you’ll want to make sure that the typefaces are themselves consistent across viewing environments. Cross-browser testing tools and Typekit’s browser samples will give you a realistic picture of how the type renders—a competitive advantage against working solely in Photoshop. Also, setting fallback fonts that align with your choices can reinforce your brand’s voice as you account for older browsers, or aim to deliver thinner pages at certain screen sizes.

At the root of it

Just as you conduct research at the beginning of each web project, visual design merits a thorough examination of your site’s brand. Guidelines merely serve as a place to start. You’ll explore a world of aesthetics and interactions for your users that goes far beyond deciding between a bifold and trifold brochure. Your exploration boils down to creating a typographic palette that successfully evokes your brand’s personality and simultaneously serves the needs of your content.

When you develop a new visual system—one specifically for the web—that is as well-considered as every other aspect of the brand’s existence, it will stand the test of time. You’ll be giving your clients the freedom to continually evolve their content while still appearing like themselves. Your system will work no matter the browser, the device, or the screen size. As everything else evolves, as new devices come to market and as clients change marketing messages, your design decisions are what will hold the brand together.

Aura Seltzer

Aura Seltzer is a Designer at Happy Cog‘s Philadelphia office and holds an MFA in Graphic Design from Maryland Institute College of Art. She’s also a habitual list maker and a wannabe foodie with an uncontrollable sweet tooth. When the mood strikes her, she tweets from @auraseltzer.

Last September, we announced an agreement with Monotype to offer a selection of their fonts as an add-on subscription to your Typekit plan. Then in February of this year, we said it would be delayed, and we estimated that it would be available this summer.

Today we’re sorry to announce that unfortunately we won’t be able to offer Monotype fonts via Typekit in the foreseeable future.

What happened?

When we made the announcement, we believed that we would be able to offer Monotype fonts via a subscription add-on that would be easy for our customers to understand and use.

But as we began working on implementation, we discovered that there were incompatibilities between our account management system and the licensing requirements of the Monotype fonts.

We’ve made our best effort at resolving these incompatibilities, but ultimately we couldn’t find a solution that worked for us and for Monotype.

Moving Forward

We realize that some customers made plans around the expectation that Monotype fonts would be available via Typekit. We’re sorry for the inconvenience this caused you.

If you’re stuck without a solution for your project, or if you’d like to share your feedback or concerns, we’d be happy to hear from you. Please email our support team at support@typekit.com.

We’ll continue to work with the industry’s leading foundries to bring the world’s best selection of premium web fonts to our subscribers. Please stay tuned to this blog for updates, or follow @typekit on Twitter.

We are pleased to announce that, starting today, the Typekit website is available in Japanese. Building on top of our first localization effort for French, we’ve been working to translate and further localize our user interface for the Japanese language.

Typekit font browsing in Japanese

If the default language for your browser or operating system is set to Japanese, you should automatically see the Japanese version of Typekit. You’ll also notice a new addition to the “Change Language” links in the footer of any page, where you can click to choose any available language you prefer.

Japanese language selection

In addition to localizing our user interface, we’ve added Japanese-speaking representatives to our support department. Customers can reach these representatives via email at support+jp@typekit.com or via Twitter at our @typekit account.

What you’ll see in Japanese

As with the French version of Typekit, there are some small differences between the English and Japanese versions that we’d like to mention.

  • Lists are not yet available in Japanese, and so have been hidden from site navigation on the Japanese site. Japanese users will still be able to link directly to a list via its URL, but the text will be displayed in English.
  • We’re unable to offer our full-text search feature to non-English users at this time. Japanese users will, however, still be able to search for fonts by name.
  • Finally, sample text and web font specimens are not being translated.

A growing global community

We’re excited to welcome Japanese-speaking users into the Typekit community, and will continue to develop new features in all supported languages. We also know that there’s more that can be done to support Japanese users—in particular, adding and serving fonts that support the Japanese language. This is a unique challenge that we’re eager to tackle, but for the present we are pleased to be able to offer a Japanese-language interface for navigating our current collection of mostly Latin-based fonts.

Is there anything you’d like to see next? Spot any oversights? Please don’t hesitate to contact us with your thoughts on how you’d like this site to grow! We look forward to welcoming more people to the Typekit community.

As part of our efforts to make web fonts more broadly accessible and easy to use, we’d like to announce that Edge Web Fonts – Adobe’s free web font service powered by Typekit – has a better way to browse fonts. The new site makes it easier to browse the Edge Web Fonts library, find the perfect font, and start using it in your website right away, for free.

You can now browse across the entire library, narrowing your search with filters for classification, recommended use, typographic properties, and language support.

ewf-browse-fonts

Each font appears as a text sample, and you can preview a font’s weights and styles by applying them to the sample. To try out your own text, click to edit the sample. Use the font size control to see the fonts at different sizes.

ewf-evaluate-fonts

While browsing the fonts, you’ll notice links to “similar fonts at Typekit.” Follow these links if you’re interested in using commercial fonts via Typekit that share the characteristics of the free fonts you’re browsing at Edge Web Fonts. Additionally, some of the fonts available through Edge Web Fonts are also part of the Typekit library. This means you could choose to use those fonts via Typekit instead if you want the additional features and services Typekit provides, such as additional font specimens, browser samples, customer support, and an uptime guarantee. These fonts include an “Also available at Typekit” link that will lead you to Typekit for more details on how to use them via Typekit.

ewf-typekit-links

After selecting the fonts you want to use, simply copy a line of JavaScript into your site’s HTML, and you’re ready to start using the fonts in your site’s CSS. That’s all there is to it.

ewf-use-fonts

We’re delighted to make free web fonts even more accessible – and likewise to help expose the great work of a worldwide community of open source font designers to more people.

Learn more about Edge Web Fonts, or just get started browsing fonts.

Edge Web Fonts is a free service powered by Typekit. That means Edge Web Fonts makes use of Typekit’s global font serving network and JavaScript libraries for superior browser compatibility, font events, speed and reliability. Read more about Edge Web Fonts and Typekit on the Edge Web Fonts help page.