2014adobe39

Smashing Conference is coming to Oxford, England for the first time and we’re proud to be joining them as a sponsor with the Typekit pop-up library. This is the first time we’ve taken the library overseas, and we’re excited to give the library its British debut. The conference covers Tuesday and Wednesday this week, and we’re looking forward to a lot of great talks—such as Dave Rupert’s talk titled “Real Life Responsive Web Design: Lessons Learned” and Scott Kellum’s “Art Directing Posts, Sustainably.” While the main conference is sold out, there are tickets left to a few workshops on UX design, mobile/touch, mastering CSS, and CSS/RWD.

Smashing Conference takes place March 18th and 19th, 2014, at Oxford Town Hall, St. Aldate’s, Oxford, OX1 1BX. Tickets can be purchased for workshops here.

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.

We love everything about typography, so it’s no surprise that we spend a lot our online time reading about it in just about every form. Here are a few sites we noticed that not only taught us a little more, but also made some sleek type selections of their own.

Type Quest website

Using OpenType on your websites is a tricky undertaking for any designer, but Type Quest breaks the process down to make it a little less intimidating—and also shows off some of what OpenType can do. Body text is set in the fully-ligatured glory of Adobe Caslon, with headers in Effra Bold (and, if you can find it, one subhead demonstrating the swashy possibilities of Bello).

Letterpress of Tulsa website

There is so much to love about the Letterpress of Tulsa, from its two antique presses (named Beatrice and Matilda) to the type choices for its homepage: Droid Serif for clean, friendly body text, and Franklin Gothic URW Extra Condensed for the headers.

Typeface Design at the University of Reading website

We expected a lot from the Department of Typeography & Graphic Communication at the University of Reading, and their website delivers with a fantastic type pairing. Abril Text is a lovely choice for long-form body text, and it reads beautifully here, and Iskra—the Extra Bold weight accentuating its quirks—makes for a surprising and effective match in the headings.

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

Typekit pop-up library

Meet us in Austin this Friday! The Typekit pop-up library is traveling to SXSW for a one-day Creative Camp. Typekit is joining forces with the Adobe Web Platform team to present five speaker sessions, covering topics such as creating animated infographics, creating rich media experiences on the web, and how designers and engineers can improve their working practices. We’ll be providing lunch, snacks, and a happy hour at the end of the day.

The Creative Camp is happening at the Radisson Town Lake, Riverside Ballroom (111 Cesar Chavez at Congress), from 11:00am–6:00pm.  An official SXSW badge is required to attend, but there are no additional costs. For further details about the sessions and the Creative Camp in general, visit the Adobe Web Platform blog. We hope to see you there!

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.

Spring is on the way, and if you’re in mind to check out some fresh typefaces in your next projects, here are a few we’ve added or updated recently that might encourage a bit of spring cleaning.

Lust Script type specimen
Lust Script

From Positype, Lust Script starts with the bold calligraphic strokes from Lust and adds a flourish that makes this decorative display font extraordinarily memorable without feeling overdone.

Clavo type specimen
Clavo Extralight Italic and Medium

Clavo is a truly stylish new addition from Dada Studio, and we’re delighted to offer it in 16 different weights. The serif marks look especially charismatic in lighter weights, while the bolder options feel a bit tidier—though still solid and full of character.

Sharik Sans type specimen
Sharik Sans Regular Italic and Medium

Also from Dada Studio, Sharik Sans is an approachable and adaptable sans-serif, and adds just a touch more character than the average sans with that lowercase “k” — especially in italics.

Adriane Text type specimen
Adriane Text Regular and Italic. All text samples from Project Gutenberg.

Some of you may already be familiar with Adriane Text from Typefolio, and may even be using it already on your websites. We’ve recently updated this to cover desktop use as well, so you can now enjoy it in even more of your projects. Its bookish regular style is a classic pick anytime you need a great serif, and it includes an absolutely beautiful set of italics.

If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

Chrome 34 was released on 08 April 2014 and includes a fix for this disappearing web font bug. If you continue to see issues with Typekit fonts after upgrading to v34, email support@typekit.com and we will look into it.

Version 33 of the Chrome browser was released on February 20, 2014, and includes a fix for the disappearing web font bug we reported earlier.

Unfortunately, a new bug was introduced in version 33, where web fonts may not be displayed until the user interacts with the browser window (scrolling or clicking), causing the browser to redraw the page. The Chrome team is aware of the problem and is working on a fix.

Update, 05 March: we have confirmed that fonts loaded from Typekit are affected by this bug, but the way in which the Typekit JavaScript works makes it less likely that our customers will encounter the problem. (Again, this bug affects all web fonts, not just those served from Typekit.)

We have tested some possible workarounds, but determined that there is not a solution which we are comfortable including in the Typekit JavaScript for all users to download. The Chrome team has a fix for the bug which should be available in the next browser update, and we feel that the best approach is to wait for that update.

Users have posted some suggested workarounds for the problem in the comments on the Chrome bug thread, if you would like to explore the options for your own website.

If you believe that you are seeing this bug on a website that loads fonts from Typekit, please email us at support@typekit.com and we will be happy to look into it.

We love seeing all the different ways people use Typekit on their portfolio sites; these are spaces where people are putting their best faces forward, and we’re always fascinated to see which typefaces people choose to reflect their own distinct personalities.

Emily Brick website

UI designer Emily Brick takes a minimal approach to her homescreen, with an animated bulldog stealing the show at the top of the page. Header text is set in Proxima Nova Alt, and the body text is in the Light weight of Omnes. The effect of the pairing is clean, open, and friendly—with the last quality emphasized by the dog’s wagging tail.

Katie Christ website

Food stylist Katie Christ has an absolutely delicious-looking photography portfolio here. Have a snack nearby when you browse this site, because you will definitely get hungry. The monospaced Letter Gothic Std hasn’t come up often in a portfolio site, and we like the way it looks here—especially in the header, where it retains a lot of its retro-electric-typewriter aesthetic.

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

Great news for those of you who long for better typography in website theme templates: The Theme Foundry, a leading provider of professional themes for self-hosted WordPress sites, has partnered with Typekit to incorporate premium fonts into the design of select themes that it sells by subscription. The first of these is the beautiful Oxford, a contemporary magazine theme that makes stunning use of Soleil and Futura PT. See a demo of Oxford in action.

Screenshot of Oxford theme

When you activate Oxford on your self-hosted WordPress site, The Theme Foundry works behind the scenes to automatically configure the Typekit service needed to provide the web fonts there, so there’s no extra technical setup required. Best of all, this is included in your Oxford subscription from The Theme Foundry, so you don’t even need your own Typekit account. If you do want to use your own Typekit account, adding your own kit is quick and easy.

We’re excited about this new way of using Typekit in WordPress themes. Oxford is available now, and The Theme Foundry is planning to include fonts from Typekit in more of its WordPress theme collection in the future. Read more from The Theme Foundry blog.

Do you run a platform or service 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.

This guest post was authored by designer Nathan Ford.

I like to start with type when exploring the aesthetics of a project. From there, layout and other design considerations can take their cues from the content itself. But how does a type-centered approach to layout look on the web? And how does such a process work with the fluidity of the web to produce unique, engaging compositions at any viewport size?

To explore these questions, I’ll walk through my process for building fluid compositions that reflect the characteristics of a typeface, using three exceptional web fonts from Typekit as examples: DIN Condensed Web, JAF Herb, and Chaparral Pro.

Note: on each layout you can hit Cmd + G in OSX, or Ctrl + G in Windows to see an overlay of the grid system.

DIN layout
View the layout, and the grid system.

DIN Condensed Web

The first incarnations of DIN were originally designed in 1931 for the Deutsches Institut für Normung, the German standards organization. DIN 1451 was most famously used on German road signage for decades, and in the 90s it gained a broader popularity due to being one of the first quality sans-serifs released in the PostScript format. DIN Condensed Web, cut by ParaType and delivered through Typekit, again deftly adapts these classic letterforms for a new context.

The type

Given the heaviness of DIN, I had to set a base font size of 20px to make it readable for copy, and gave it a generous line-height. The historical relationship to “standards” made me think of uniformity and simple mathematics, so to honor this, I kept the the size and spacing of the text to increments of 0.5em. The lead-in text is 1.5em, while the body copy is 1em. Margins are set in whole ems as well.

The one exception is the headline, “DIN Condensed Web”, which I set with the viewport width (vw) unit. I tweaked this font size at various viewport widths to align it with the grid, rather than using ems to relate it to the other font sizes. I felt this created a stronger connection between type and layout.

The grid system

In consideration of DIN’s historical relationship to standardization, I knew I wanted to build this layout on one uniform grid, which necessitates more columns to inject variety into the composition. To me, this sounded like a standard we’ve had in the web industry for a while: the 12-column grid. But to make it interesting, I ditched any gutters so the basic unit of the grid, the column, is given more exposure in the layout.

DIN grid
12 column grid, no gutters

The layout

I tried to build a composition that was dynamic and felt as bold as the typeface itself. Starting with a comfortable, mid-sized viewport (around 1200px wide), I tried to push DIN into a more radical tone, with asymmetry and interesting whitespace.

Layout decisions came directly from the needs of the content. For example, the “Overview” section is thinner and shorter, allowing the deeper “History” content on the right more space. The margins above and below the lead-in copy are echoes of grid column widths, exploiting how top and bottom margins in CSS are based on the width (not height) of the page. Once I felt the composition was working at one size, I then started looking at various sizes by resizing my browser window, adapting the layout where it started to feel pinched or stretched. Later, in my testing phase, I fine-tuned the layouts on real devices.

Herb layout
View the layout, and the grid system.

JAF Herb

I truly respect what Just Another Foundry has accomplished with Herb. A throwback (way back) to the broken scripts of 16th-century Europe, Herb is not derived from frakturs as it may first appear, but instead is uniquely inspired by gothic cursives of that era. By blending blackletter qualities with roman forms, Herb is at once historic, fresh, and surprisingly readable.

The type

The aesthetic power of proportions, such as the Golden Ratio, shaped design in the 16th century — both in architecture and print. Book dimensions have not veered far from this proportion since the mid-16th century, and I found even the proportions of Herb’s thin and thick strokes fall close to (if not right at) 1:1.618. For me, this seems like a logical way to tie together the characters, layout, and history of this typeface, so every font-size, padding, and margin value is derived from this ratio.

Herb, showing proportions

The thin to thick proportions are roughly 1:1.618

The line-height of the copy is set to 1.618, providing ample space between the heavyset lines of text, and margins and paddings are set to either 1em or 1.618em. The large drop cap is 1.618em of the heading’s font size, which is set to 25vw to align with the grid.

The grid system

Building up from the type, the grid system is also derived from the Golden Ratio, with the viewport size determining which grid to swap in. On viewports larger than 960px, the main layout grid comprises three columns, each 161.8% larger than the last. The largest column is used for the main text body, while the two columns on either side provide a cohesive asymmetry. The outer padding, applied to the body, is 61.8% of the smallest column in the layout grid, again pulling from my chosen ratio.

Herb layout grid
Layout grid for mid-ranged viewports, based on the golden ratio

Within the main body of text, modular content grids are used to set margins and to place the block quote on viewports larger than 530px.

Herb content grid
Content grid for mid-ranged viewports, based on the golden ratio

The layout

By using an asymmetrical grid for larger layouts, I wanted to emulate the feel of a right-facing page from one of the Renaissance books that inspired this typeface and design. I pushed the Golden Ratio to tie the layout together as it expands and contracts on different viewports, showcasing the durability and character of Herb at all sizes.

Golden sections across facing pages
Golden section applied to book proportions, left and right-facing pages. Source: Wikipedia

Continuing with the 16th century inspiration, I fully justified the type, but also adjusted the grid and breakpoints to make sure that the measure mitigates rivers and holes in the text. To emphasize the dense, monolithic effect blackletter texts can impose, I ran the P tags inline and used pilcrows to break each thought, as was the (waning) fashion of that era. Perhaps unsurprisingly, JAF took the time to design a beautiful pilcrow for Herb. As unusual as this reading experience may be at first, the strengths of Herb allow for adapted Renaissance techniques to shine in a responsive environment.

Chaparral layout
View the layout, and the grid system.

Chaparral

Carol Twombly’s Chaparral is the most capable typeface I’ve worked with on screen, besides maybe Georgia. It is elegant at display sizes, distinct and readable even when tiny, and its italic is stunning. Those chunky semi-slab serifs also make it perfectly suited for backlit, pixel-based displays. Originally released by Adobe in 1997, Chaparral Pro still feels contemporary for web use.

The type

For this composition, I chose to take inspiration from the forms of Chaparral itself; specifically, I measured the proportion of the x-height to the cap-height, which is roughly 66:100. This correlation to the font’s x-height gave me the idea to experiment with CSS’s ex unit. Unlike the em unit, which is defined in CSS by the set font-size only, the ex unit is derived from the x-height of the font (as determined by the browser). Browser rendering of ex sizes is surprisingly consistent, as illustrated in this Codepen example highlighting ex-based line-heights on various fonts. By using the ex unit, I can keep the type size and spacing tied to both the layout and the typeface proportions.

Chaparral proportions
The cap-height to x-height proportion is roughly 66:100.

The grid system

This grid system was less of a preconceived plan, and more the result of adapting to the needs of the content and composition. To start, I approached the grid system in a similar way to my Herb layout, using the 66:100 ratio to derive a scale for creating both layout and content grids. To create a dynamic, novel layout worthy of showcasing Chaparral, I wanted to push the asymmetrical possibilities of the available space with the arrangement of columns. I revisited the grids numerous times while working on this layout, adapting it as needed to improve the balance of the design and provide enough readable space for the text.

Chaparral layout grid
The resulting layout grid for mid-sized viewports.

The layout

The long, tapered slab-serifs of Chaparral made me think of outdented headers, which grew to be a general theme of creating text overhangs. For a more comfortable measure and efficient use of space on larger screens, I split the body text into two uneven columns, using a short, thin left column paired with a wide right column. This leads to a text shape that again nods to Chaparral’s tapering serifs in the first two sections, and keeps the text comfortably within the height of the viewport for the last.

Chaparral content grid
The resulting layout grid for mid-sized viewports, showing content.

A foundation in type

By building up from the smallest component of our design — the type itself — we can more fluidly adapt our compositions from the smallest viewports to the largest, giving our content and type priority from the start. Pulling together a layout from the type may not always be practical, but this exercise has shown that on the web, we have unique new space to explore in the connections between layout and typeface, and this is just a start. What type and layout correlations can you find in your next design?

Resources

  1. http://en.wikipedia.org/wiki/DIN_1451
  2. http://justanotherfoundry.com/pdf/Herb.pdf
  3. http://en.wikipedia.org/wiki/Canons_of_page_construction
  4. http://www.smithsonianmag.com/arts-culture/the-origin-of-the-pilcrow-aka-the-strange-paragraph-symbol-8610683/
  5. http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-US&event=displayFontPackage&code=1717
Nathan Ford

Nathan Ford is the creative director at Mark Boulton Design and the product lead at Gridset.

It’s been just over a year since we began our partnership with Squarespace, and we’re excited to get a look at a few of the stunning websites that are the result of pairing these intuitive editing tools with great type options.

TaraRudolph

Tara Rudolph doesn’t need many words to show off her stunning photography portfolio, but when she does include text, she makes it count. Headers are set in classic Adobe Caslon, and the prominent top navigation options are in sturdy Museo Sans, with FF Meta making an understated appearance in footer copy.

Neuarmy Surplus Co website

Applying artistic sensibility to military surplus materials, Neuarmy Surplus Co. pushes us beyond our army jacket phase and into something truly stylish. We love the look of Futura PT in the text here; its bold geometric shapes play wonderfully against the big, heavily-shadowed photographs.

Wayfarers Photography website

Brandon Grotesque makes a lovely center-stage appearance upon your first glance at the Wayfarers Photography website, but from there on out, the amazing photography portfolio steals the show. Body text is set in Adobe Garamond, showing off the lovely italics in several places.

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

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.