Ever since experimental support for Typekit web fonts came to the iPhone and iPad, developers have had another performance angle to consider. How does an array of custom fonts weigh against the potential load times your users will see? Jenn Lukas recently raised some interesting questions over at The Nerdary, and got us thinking about this again.

Unfortunately, there aren’t simple answers to these questions. In fact, talking about “mobile devices” is a bit confusing: what we are really trying to do is enable, delay, or disable resources based on the bandwidth of the network connection. There is no easy way for a website to query the available bandwidth of a visitor’s connection and intelligently decide which resources to load. (The Network Information API is meant to fill this gap, but is currently only implemented in Firefox.)

In the future, it might be possible to detect a device on a low-bandwidth connection and intelligently load fonts and other assets (or choose not to load some at all). For now, however, we can offer a few options for you to try.

Strategies for using Typekit on mobile devices

You have several options for working with fonts served to mobile devices. Which method you should choose depends on how people access your website or application. If you’re working within tight aesthetic guidelines and you know your audience mostly uses devices connected to WiFi or other fast networks, it’s probably best to use the same fonts for all display options. On the other hand, if it’s important that your website load as quickly as possible, and your users are primarily on mobile devices, it might be worth exploring options for either fully or partially disabling fonts for mobile devices.

(A note on testing these suggestions: record the network performance of your site before making any changes so that performance problems are quantifiable and not just perceived. Perform the same network recording before and after making any changes to see whether there are significant performance gains.)

You should first consider changing nothing at all. Fonts on Typekit are highly optimized for file size, and our Content Delivery Network (CDN) ensures fonts are delivered worldwide as quickly as possible. Many developers will find that this combination allows Typekit to perform respectably on your mobile site.

It may be worth disabling fonts for mobile devices if a large portion of your users are on slower mobile connections, however. In this case, the font specified in your CSS font fallback stack will be used (or the browser default, if no fallback is available). You can disable support for multiple mobile devices through the Mobile Settings tab in the Kit Settings option of the kit editor. Remember to republish your kit to have the changes take effect.

mobile-settings

If your website only requires a small subset of your fonts, another approach is to only load the small subset first and then load additional fonts after the page has loaded. You can do this by splitting your kit into two: one small kit with only the essential fonts, and a larger kit with the non-essential fonts. Jordan Moore discusses this approach in detail in his post, “Fallback Fonts on Mobile Devices.”

A third option is to delay loading the fonts until all the other content of your website has loaded. You can do this by embedding the Typekit JavaScript, but not calling Typekit.load() until your page has loaded, for example when the browser calls onload.

<script src="//use.typekit.net/xzd6cyj.js"></script>
<script>
  window.onload = function () {
    try {
      Typekit.load();
    } catch(e) {}
  };
</script>

This will force the browser to render your content using fallback fonts, and it will only load and show web fonts once all content has loaded.

Testing your CSS font fallback stack

Whichever of these strategies you use, an important thing to consider is choosing the right fallback fonts. You can test your font fallback stack by commenting out the Typekit embed code and refreshing your page. This will disable loading of the Typekit fonts and ensures the browser will use the fallback fonts in your font stack. Make sure your font stack contains the same generic font family as your Typekit font and has a similar x-height to prevent a jarring user experience of falling back to a completely different font.

As always, if you have any questions about mobile fonts or would like advice on implementing one of these strategies, please get in touch at support@typekit.com.

Collection Two books

We’re big fans of Five Simple Steps — especially their series of Pocket Guides, “concise ebooks focusing on specific and timely aspects of web design and development.” So we were delighted when they asked us to sponsor the printing of Collection Two. You heard right, physical copies of select Pocket Guides are now available.

Collection Two features pocket guides to HTML Email by Andy Croll, Usability of Web Photos by James Chudley, Interviewing for Research by Andrew Tavers, and Combining Typefaces by yours truly, Tim Brown.

Collection Two cards

As a bonus for customers who purchase the printed collection, we worked with Five Simple Steps to print short type studies on five cards. Each card showcases a type combination from a website featured in Typekit’s series of sites we like, and critiques its success based on the judgment criteria in A Pocket Guide to Combining Typefaces. The front side of each card also features artwork by our creative director, Elliot Jay Stocks.

Get ’em while you can!

Alverata

Please join us in our excitement: Alverata, a new typeface from TypeTogether and designer Gerard Unger, is available today on Adobe Typekit.

Alverata presents a blending of historical typographic and artistic elements, rooted in the typographic forms of the Romanesque period and brought up to date for 2014.

Unger explains how he drew inspiration from capital letters that were engraved, painted, or chiseled into stone during the Romanesque period, which in turn were derived from multiple Mediterranean and Western European scripts. The contemporary trend in art and architecture was to embrace variety and the combination of disparate elements, and this trend appears to have carried over to the use of type; letterforms from those scripts were interchanged at random, creating a rich nonuniformity.

Alverata Irregular

Alverata Irregular

Unger created alternate glyphs inspired by the caps from those varying scripts, and brought those characteristics to an extensive set of lowercase alternates. The Alverata Irregular set makes good use of the Contextual Alternates OpenType feature; when enabled, alternates will sub in as you type, seemingly at random.

Alverata Irregular - Contextual Alternates

Alverata Irregular in Adobe Illustrator CC

The Romanesque caps also share some characteristics with contemporary type — namely, narrower forms with tighter spacing. It makes perfect sense to accompany those caps with a lowercase set with narrow body and tall x-height, in keeping with current trends of designing for readability across print and digital platforms — not to mention Unger’s personal preference as seen in much of his previous work. Unger also kept some meat on the bones of horizontal strokes that would normally thin out in written examples of the source scripts, opting instead for a sturdier structure that holds up better at small sizes. So while the Irregular set lends itself to display settings, the “regular” version of Alverata, complete with a full complement of italics (as well as Informal upright alternates) and a healthy range of weights, is well-suited for use at text sizes, whether in print or on screen.

Alverata

Alverata (headline and body text) and Alverata Informal (subhead)

TypeTogether has a lot more information on Alverata. Read Gerard Unger’s introduction and background, and check out the extensive PDF specimen. Portfolio subscribers can add Alverata to kits for web serving today; Alverata is also available for desktop use on all eligible plans. If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

This week, we’re feeling drawn in by the vibrant portfolios of a few creative agencies—all of whom take the opportunity on their own sites to show off skilled web design as well as some solid typographic choices.

Domani website

Domani makes a great case for itself as a creative agency with the bold images and clever animations on this delightful website. Futura PT is a perfect typeface choice to match this energy, and beneath these geometric headings, the rounded edges of Omnes pair nicely in the body text.

Makewell website

Makewell takes a more minimal approach to their portfolio page, and the result is a clean, straightforward site that tells a convincing story about their portfolio of projects. Type is carefully paired here, with Museo Sans used throughout and occasionally punctuated with a dash of Museo Slab.

Planet Propoganda website

Design is front and center at Planet Propaganda, with snapshots from their excellent portfolio on display alongside their thoughtfully composed method. The eye-catching type in the main navigation is Hellenic Wide, a digital adaptation of a metal type with roots in the late 19th century. Futura PT also appears in headers throughout the site.

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

Upcoming Speaking Events

February 12, 2014

Antique Map of the World c 1570

The Adobe Type and Typekit teams are traveling near and far to share their passion for typography on the web and in print design with conference attendees.

(Registration is still open for each of these events at the time of posting!)


An Event Apart Atlanta

  • 17-19 February
  • InterContinental Buckhead Atlanta, Atlanta, Georgia
  • Registration

If you’re on site to enjoy the presentations at An Event Apart Atlanta, look for Libby Nicholaou and Nicole Miñoza with the Typekit pop-up library. Take a breather from the high-energy talks, and get some quiet inspiration from the growing collection of typography and design books.


LETTERpressworkBOOK: Innovation Disguised as Instruction

  • 25 February
  • Rochester Institute of Technology, Rochester, New York
  • No registration required

In coordination with an exhibit at the RIT Cary Collection, The Printed Poem/Poem as Print, Ben Trissel will discuss technical as well as design innovation in the context of this and a second project from James Trissel’s work at The Press at Colorado College, LetterPRESSWORKbook.


Typography Day 2014

  • 28 February-02 March
  • Symbiosis Institute of Design, Pune, India
  • Registration

“Typography Day” is actually organized over a three-day period, the first of which is devoted to workshops centered around the theme of “Typography and Culture.” Paul Hunt is teaching a workshop titled Typifying Lettering, where he will discuss the relationships between lettering and typeface design and guide participants through the first stages of glyph creation.


Adobe FDK Workshop Tour

  • 3–6 March
  • MATD, University of Reading, UK
  • Information
  • 10–13 March
  • Typofonderie, Paris, France
  • Information
  • 17–20 March
  • Type & Media, KABK Den Haag, Netherlands
  • Information

The Adobe FDK workshop aims at introducing the Adobe Font Development Kit for OpenType to students of type design, and traditionally has visited the type design Master’s programs in Reading and The Hague. This is the second year that the workshop will also stop in Paris, where anyone interested can register as long as space is available. The workshop series was initiated by Miguel Sousa, and will be held by Frank Grießhammer for the first time this year.


TYPO Day Nürnberg

  • 21 March
  • Le Méridien Grand Hotel Nürnberg, Germany
  • Registration

Type designer Tim Ahrens will discuss the current state of typography on the web, looking ahead to how he expects the craft could continue to evolve, which cues it will take from print typography, and where it will firmly diverge from the print tradition.


TYPO San Francisco

  • 10-11 April
  • Yerba Buena Center for the Arts, San Francisco, California
  • Registration

Topics for this conference haven’t been announced yet, but we’re looking forward to hear what Typekit’s Creative Director Elliot Jay Stocks has in store. Keep an eye on the TYPO website for more information!


2014 University of Illinois Web Conference

  • 28-29 April
  • I Hotel and Conference Center, Champaign-Urbana, Illinois
  • Registration

David Demaree leads a session on The Weight of the Web, considering the web as a physical medium that is both heavily constrained by device capabilities and network reliability, and also wildly adaptive because of its fluidity. Web designers, take note.

As winter trudges along, we’re drawn to cozy indoor activities—like curling up with a good read. In this week’s sites we like, we’re sharing a few literary-minded sites that show a lot of respect for the written word, be it recommending good reads, publishing them, or (in all cases) setting it in excellent type.

Openings website

Openings features just the first line from a long list of books, poems, songs, and other works, making for a subtly brilliant site that we got completely sucked into. Livory displays beautifully here as the primary body text font, giving a warm and weighty feel to the quoted lines. Navigation in JAF Bernina Sans is clean and unobstrusive.

STET website

We’ve loved reading the thoughtful articles that have appeared on STET, which are accompanied by fantastic illustrations and, of course, a great type pairing. Multiple weights of JAF Facit play the part of headlines and navigation, offset by the gorgeous serif Calluna. The combination makes for an enjoyable, comfortable reading experience.

Bookshelf website

Designer Daniël Van Der Winden gives us a list of recommended reading in the most stylish manner imaginable with Bookshelf. We love seeing Adelle front and center with a sweeping quote on the main page, immediately setting the deliberate, literary tone for the site. Proxima Nova appears in subheads and navigation throughout, and a long list of other fonts make cameo appearances: Abril Fatface, Futura PT (for The Wes Anderson Collection, appropriately), League Gothic, and possibly even more with the next review he posts up there.

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

Kerning on the Web

February 5, 2014

Kerning can refer to one of two things: spacing instructions that type designers put into font files to mitigate awkward character combinations, or spacing adjustments that graphic designers make as they typeset text. In today’s post, we’re talking about the former, though we’ve covered the use of Kern.js and Lettering.js here before for readers interested in learning even more.

Imagine each character in a string of text has a box drawn around its outer edges. Without kerning, characters would line up at the edges of these boxes. Kerning enables these edges to overlap so the space between each character can be adjusted to be tighter or looser.

The word AWAY without and with kerning set in JAF Facit.
The word “AWAY” without and with kerning set in JAF Facit.

In the illustration there are three kerning values: “A-W”, “W-A” and “A-Y”. The “A-W” and “W-A” pairs share the same kerning value, while the “A-Y” pair has a larger kerning value. All kerning values in this illustration are negative, but it is also possible to have positive kerning values, which increases the distance between each character.

Browser support for kerning is surprisingly good. With the exception of Chrome on Windows, all modern browsers support kerning. There are, however, some differences in how kerning is enabled, and whether it is turned on by default or not.

There are currently two ways to enable kerning in CSS. The first is the text-rendering property introduced by the SVG specification to give hints to the text rendering engine. It was adopted by Gecko and WebKit based browsers (such as Firefox, Safari, and Chrome) to control text rendering for HTML as well. The optimizeLegibility value of the text-rendering property not only enables kerning, it also enables ligatures and other typographic features. However, it is not an official CSS property.

The second way to enable kerning is by using the CSS font-feature-settings property. This property can be used to enable or disable specific OpenType features, such as ligatures, old style numerals, stylistic sets, and kerning.

Browser support for these two properties is shown in the table below.

Browser text-rendering font-feature-settings
IE6 n/a n/a
IE7 n/a n/a
IE8 n/a n/a
IE9 n/a n/a
IE10 No Yes
IE11 No Yes
Chrome (Windows) No No
Chrome (OS X) Yes Yes
Chrome (Android) Yes Yes
Firefox Yes Yes
Opera <=12 n/a n/a
Opera 15+ Yes Yes
Safari 6 Yes No
Safari 7 Yes No
iOS 4.3.2 Yes No
iOS 5.1 Yes No
iOS 6 Yes No
iOS 7 Yes No
Android 4.1 Yes No
Android 4.2 No No
Android 4.3 No No
Android 4.4 Yes Yes

Chrome on Windows does not support kerning at all, which is caused by their use of GDI for rendering text. Chrome will soon switch to rendering text using DirectWrite and should then also support kerning and other OpenType features on Windows Vista and above. Kerning is enabled by default in Firefox and Safari 7 (on both OS X and iOS).

Surprisingly, the default browsers in Android 4.2 and 4.3 do not support kerning, while the default browsers in Android 4.1 and 4.4 do. This is caused by a bug in the support for the text-rendering property in Android 4.2 and 4.3. Android 4.4 uses Chrome as its default browser, which does not exhibit the bug.

To enable kerning in all browsers with kerning support, you’ll have to use a combination of the text-rendering and font-feature-settings CSS properties.

p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

Unfortunately, the font-feature-settings property is still new and requires vendor prefixes (and vendor-specific syntax for older versions of Firefox), so you’ll need to include those as well.

p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
}

In the future, you’ll be able to use the font-kerning CSS property to enable or disable kerning. The font-kerning property accepts three values: none to disable kerning, normal to enable kerning, or auto to let the browser decide whether or not to use a font’s kerning. At the time of writing this, the only browser that supports the font-kerning property is Safari 7 (on both OS X and iOS). In order to write forward-compatible CSS, you could write your CSS to include the font-kerning property.

p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

Fonts served by Typekit include kerning data by default, so all you need to do is enable kerning through CSS. If you have questions about kerning or other OpenType features, please let us know at support@typekit.com.

Chrome 33 has been released on 20 February 2014, which includes a fix for the disappearing web font bug. We highly recommend upgrading to Chrome 33 (or higher) as soon as possible.

If you are still seeing issues with fonts loading in Chrome, you may be affected by a different bug in Chrome 33

We’ve been getting reports from Typekit customers about web fonts disappearing and being replaced with fallback fonts. We believe this to be caused by this bug in Chrome, which can affect any web font (not just those served from Typekit).

The bug is most apparent in Chrome 32 and affects all platforms. It causes fonts to randomly fall back to the last-resort font, which is normally used when Chrome can’t find any of the fonts in the CSS font-family stack. The last-resort font is platform specific; on OS X a serif font is used, while other platforms might use a sans-serif font.

The Chrome team is aware of the problem and has already fixed the bug. The bug fix will be in Chrome 33, which is planned for release in late February. Please let us know at support@typekit.com if you have any questions.

web_type_west_680x300px

It’s 2014 and we are back on the road with the Typekit pop-up library. Our first stop will be Web Type West in Vancouver, Canada, tomorrow February 1st. Web Type West is a one day designer/developer conference organized by Dr. Shelley Gruendler of Type Camp. We’re excited to partner with her team on presenting the “many different aspects of web typography: how to use it, how to choose it, and how it works.” The speaker line up is a cohesive list of individuals who’ve contributed to shaping typography on the web today including Stephen Coles, Zara Evans, and André Mora among many others.

If you are attending the conference, please stop by the library and say “hi.” The Typekit pop-up library is traveling far and wide this year, so keep an eye on the blog for upcoming events!

* * *

If you think Typekit’s pop-up library would be a good fit for your event, or have suggestions of books that you’d like to see in the library, please get in touch with us through support@typekit.com.  

In this week’s sites we like, we’re craving just a little space—be it working space, actual outer space, or even just the suggestion of rockets. Fuel up for a high-level tour of a few sites that caught our attention.

Rockit Science website

A forward-thinking advertising agency with an innovative streak, Rockit Science Agency has pulled together a tightly cohesive homepage with attractive layouts and the polished look of FF DIN for its text. Eye-catching images lead you directly into their impressive portfolio of past projects.

Making Space for Others website

Getting down to the science of personal working space, Katy Jackson presents her research findings in this beautiful website, Making Space for Others. Most of the text is in Minion, a great option for long-form writing anywhere, with navigation text in Open Sans. The clean, open design of this page immediately helps you focus on the words.

How Many People Are in Space Right Now website

Finally, we get to outer space, and the few humans who are currently working out there nearly beyond gravity’s grasp. How many humans? How Many People Are in Space Right Now? is here with the handy answer. Scroll down for more information about the astronauts currently up in orbit, along with an extended look at graceful FF Enzo, which is used for all the text on this site. (Including the giant number.)

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