This is the second in a pair of posts demonstrating the technique of using the CSS background-clip: text property to style headlines. Catch up on the first post from John Zeratsky if you haven’t already.

This post was authored by UX developer David Parker.

Back in early 2008, before Google Chrome had even been released to the world, the people at WebKit landed a brand new CSS property in Safari, background-clip: text. Never heard of it? I’m not surprised; it was never standardized as part of the CSS spec, and was never implemented at Mozilla or Microsoft.

I’m unaware of the reasons why it was never taken up, but WebKit has kept it and you can use it in all current versions of WebKit and Blink browsers.

So what can it do? you ask. Well, allow me to introduce you to some of the results you can achieve with it.

Quantum strike header demo
Live demo at http://boldfacedesign.co.uk/type.html

RADICAL!

OK, so how can you make your own kick-ass web type?

Well, before we start, there is one major caveat to deploying to the web: the CSS necessary to achieve these effects is only supported by WebKit browsers — namely, Chrome and Safari. We’re giving those WebKit users something a little special when they visit our site, but we won’t do it at the expense of the experience on other browsers. Here’s how the demo above appears, for example, without the fancy styling.

Text sample in Orbitron with no styling

Less radical, but still totally readable. So long as the styling is done only for flair, and doesn’t change anything fundamental about the site navigation, all your site visitors will have a good time.

So, where do we begin?

1. Choose your font

This is the most crucial step to establishing an authentic look and feel for the style that you want to achieve. Have a browse through the Typekit library of fonts for some inspiration. I’m going for that 80s feel, so I picked Orbitron.

2. Add a background

Once you have your text on the page and your chosen font applied, it’s time to apply a background layer in your CSS. This will in fact become the “fill” for your text.

To create a gradient background we can use the following CSS property:

background-image: -webkit-linear-gradient();

Simply pass in a directional value (optional, defaults to ‘top’), and as many color values as you like. You can define color points with percentages, pixels, ems, etc. Take a look at my example below:

Image used for background clip fully visible

background-image: -webkit-linear-gradient(
    #022486 0%, 
    #0AD0FD 30%, 
    #BDFCFC 40%, 
    #D8FFFF 44%, 
    #00081C 44%, 
    #00081C 50%, 
    #074A67 52%, 
    #1CD8FE 60%, 
    #7FEDFE 62%, 
    #96F5FC 70%, 
    #0FD8FA 73%, 
    #0BD2FD 88%, 
    #AFFDFF 100%
  );

There are a number of different gradient options you can apply with WebKit, such as -repeating-linear-gradient, -radial-gradient, etc. Play around with the various gradient types and values to find something you’re happy with.

You can also use an image for the background layer, but this should be done with care in order to avoid rather ungraceful degradation errors in non-WebKit browsers. In order to make sure our background image is only applied in WebKit browsers, we can use the following declaration:

background-image: -webkit-linear-gradient(transparent, transparent), 
  url(path/to/image);

By using a double background declaration with a WebKit prefix, we can prevent non-WebKit browsers from applying the unwanted image.

3. Clip to text

Now to apply the two most crucial CSS properties:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Background image now placed as layer visible through text

We’ve now created a mask layer from the text, through which we can see the gradient or image background. If you’ve worked with layers in Photoshop before, you may already be familiar with this kind of thinking and technique.

4. Accentuate

So now that we have some good looking text on our screen, let’s add some more flare to it with a few other WebKit typographic treats.

-webkit-text-stroke: 1px #f008b7;

Text stroke will create a solid outline around you text in whatever color you choose. The weight of the stroke will vary depending on the weight of your font. The effects of this will be very apparent for Mac users.

The text stroke property takes two values: a stroke weight and a color. You can set these with any variation of sizing unit and color format, so feel free to use rems, points, rgb, or rgba.

Now, let’s have a look at drop shadows.

The drop-shadow filter introduced in 2012 is the much welcome successor to box-shadow. Unlike box-shadow, which follows the outline of the box or div, drop-shadow will follow the outline of the text or any other shapes inside the box which you apply it to. Drop-shadow is also inclusive of pseudo elements allowing for more detailed and intricate element outlining and shadowing.

The drop-shadow filter takes four values: X offset, Y offset, spread, and color. Here we’ve set our spread to 20px, giving our text a nice glow effect.

-webkit-filter: drop-shadow(2px 2px 20px #f008b7);

Quantum strike header demo
The pink-tinted drop shadows are visible as thin outlines around the letters. The glowing blue effect comes from another drop shadow, which is described in the next step.

-webkit-filter: 
    drop-shadow(1px 0px 0px #FFF2F7) 
    drop-shadow(1px -2px 0px #FFF2F7) 
    drop-shadow(0px 3px 0px #A1455E) 
    drop-shadow(-2px 0px 0px #A1455E);

One of the nice features of filters is that you can chain together several of them on one element. A good reference point for learning syntax and seeing the effects of each filter is the HTML5-demos page.

5. Layer up

To add a final flair to our text, we can deploy some pseudo elements. One thing to note about pseudo elements is their content property. This must be defined on all pseudo elements in order for them to be visible in the browser. When creating simple CSS shapes, the content property is left blank.

content: ‘’;

However, you can also pass in a text string or image URL, which means pseudo elements can be used to perform a number of different roles. We’re going to create a ‘ghost’ copy of our text on a layer with a higher z-index, which will allow us to add some reflection and spotlight effects.

.strike:before {
content: 'STRIKE';
position: absolute;
left: 21px;
top: 0;
padding-right: 30px;
z-index: 3;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(-92deg,
  rgba(255,255,255,0.85) 0%, 
  transparent 15%, 
  transparent 100%
);
-webkit-background-clip: text;
}

Here, we’ve created a subtle spotlight effect on the top right of our text.

Putting it all together

Markup:

<div class="wrapper">
    <h1 class="tk-orbitron quantum">QUANTUM
    <h1 class="tk-orbitron strike">STRIKE
</div>

CSS:

.wrapper {
  position: relative;
  text-align: center;
  padding-top: 100px;
  -webkit-filter: drop-shadow(2px 2px 55px #3F59F4);
}

.quantum,
.strike {
  position: relative;
  font-size: 99px;
  font-weight: 800;
  background-image: -webkit-linear-gradient(
    #022486 0%, 
    #0AD0FD 30%, 
    #BDFCFC 40%, 
    #D8FFFF 44%, 
    #00081C 44%, 
    #00081C 50%, 
    #074A67 52%, 
    #1CD8FE 60%, 
    #7FEDFE 62%, 
    #96F5FC 70%, 
    #0FD8FA 73%, 
    #0BD2FD 88%, 
    #AFFDFF 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 auto;
  line-height: 1;
  -webkit-filter: 
    drop-shadow(1px 0px 0px #FFF2F7) 
    drop-shadow(1px -2px 0px #FFF2F7) 
    drop-shadow(0px 3px 0px #A1455E) 
    drop-shadow(-2px 0px 0px #A1455E);
  z-index: 2;
  width: 630px;
}

.quantum {
  padding-left: 2px;
}

.strike {
  font-size: 140px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .strike:before {
    content: 'STRIKE';
    position: absolute;
    left: 21px;
    top: 0;
    padding-right: 30px;
    z-index: 3;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(-92deg, 
      rgba(255,255,255,0.85) 0%, 
      transparent 15%, 
      transparent 100%
    );
    -webkit-background-clip: text;
  }

  .quantum:before {
    content: 'QUANTUM';
    position: absolute;
    left: 40px;
    top: 0;
    padding-right: 30px;
    z-index: 3;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(-92deg, 
      rgba(255,255,255,0.85) 0%, 
      transparent 15%, 
      transparent 100%
    );
    -webkit-background-clip: text;
  }
}

For a bit of extra 80’s cool, I’ve added a drop shadow effect to the wrapper around the text. This gives it a nice glow effect.

Other styles

So, what if you’re not such a huge fan of the 80s? What other styles can you achieve? Well, here are a few examples to get you thinking.

Picadilly Circus text sample

Typeface: Azo Sans Web

Live demo

HTML markup:

<h1 class="picadilly">
    PICADILLY CIRCUS
</h1>

CSS:

.picadilly {
  position: relative;
  font-family: "azo-sans-web";
  color: #fff;
  font-weight: 400 !important;
  font-size: 150px;
  -webkit-text-stroke: 10px #FD3A58;
  letter-spacing: 15px;
  -webkit-filter: drop-shadow(9px 11px 0 #98B5CC);
  width: 1000px;
  text-align: center;
  line-height: 1.2;
  margin: 4rem auto;
  z-index: 2;
}

Styled text sample

Typeface: Tandelle

Live demo

HTML markup:

<h1 class="gentlemans-grooming">
  GENTLEMANS GROOMING
</h1>

CSS:

.gentlemans-grooming {
  position: relative;
  font-family: "tandelle",sans-serif;
  font-size: 250px;
  color: #D9DEE5;
  line-height: 0.9;
  text-align: center;
  letter-spacing: 15px;
  background: -webkit-repeating-linear-gradient(-136deg,
    #A4A7AB 0px, 
    #A4A7AB 1px, 
    transparent 1px, 
    transparent 2px
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.gentlemans-grooming:after {
  position: absolute;
  content: 'GENTLEMANS GROOMING';
  left: -20px;
  top: -7px;
  -webkit-text-fill-color: #f1f1f1;
  -webkit-text-stroke: 5px #000;
}

.gentlemans-grooming:before {
  content: '\261e';
  position: absolute;
  right: -30px;
  bottom: -260px;
  -webkit-text-fill-color: #f1f1f1;
  font-size: 340px;
  width: 310px;
  left: 52%;
  margin-left: -155px;
}

Text styling sample

Typeface: Corpulent Web

Live demo

HTML markup:

<h1 class="style">
    <span class="s-1">S</span>
    <span class="t-1">T</span>
    <span class="y">Y</span>
    <span class="l">L</span>
    EOVERSUB
    <span class="s-3">S</span>
    <span class="t-2">T</span>
    ANCE
</h1>

CSS:

.style {
  position: relative;
  font-family: "corpulent-web";
  font-weight: 800 !important;
  font-size: 200px;
  background: url(planets-1.jpg) -354px -607px repeat-x;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -8px;
  width: 755px;
  word-wrap:break-word;
  line-height: 150px;
  margin: 0;
  padding: 30px 25px 260px 30px;
  z-index: 3;
  border: 3px solid #000;
  margin: 30px;
}

.style:before {
  content: 'No.2';
  position: absolute;
  left: 37px;
  bottom: 30px;
  font-family: "azo-sans-web";
  -webkit-text-fill-color: #000;
  font-weight: 400;
  font-size: 80px;
}

.style:after {
  content: 'Reset to Factory Default';
  position: absolute;
  left: 40px;
  bottom: -20px;
  font-family: "azo-sans-web";
  -webkit-text-fill-color: #000;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -2px;
}

.s-1 {
  letter-spacing: -4px;
}

.t-1 {
  letter-spacing: 8px;
}

.l,
.y,
.t-2 {
  letter-spacing: 0px;
}

.s-3 {
  letter-spacing: -5px;
}

I had to do a little custom kerning on this one, so I wrapped a few letters and added specific letter spacing. A little extra work, but it paid off in the overall feel of the finished product.

Other CSS properties to look into

We’ve covered quite a lot here, but there are still more CSS properties we haven’t covered that can yield some interesting effects. Here are a few to get you started:

-webkit-box-reflect: below | above | left | right;
Use this to create some slick Apple-style reflections.

-webkit-font-feature-settings:
Use this to switch on ligatures and other font features when working with OpenType Fonts.

background-attachment: fixed;
This can be used to create some great scroll-to-reveal effects.

So there you have it. You are now armed and prepared to go out and make some awesome web typography of your own. Don’t be afraid to give things a try, experiment, and combine.

David Parker

David Parker is a UX developer based in Yorkshire. He has worked at NetConstruct Ltd, twentysix Ltd, and will be joining Piksel this year. He’s a painter, photographer, typography nut, JavaScript nerd, guitar player, music lover, hiker, father of 2 wonderful kids, and real ale drinker.

This is the first in a pair of posts demonstrating the technique of using the CSS background-clip: text property to style headlines. We were lucky enough to get two different designers talking about this, and we loved hearing each of their experiences with it (and seeing the markedly different results!).

The first post comes from designer John Zeratsky, a design partner at Google Ventures.

Behind the GV.com redesign

We began to talk about redesigning the Google Ventures website in mid-2013. When we brought it up with our partners, the most common response was, “already?”

The previous version of the website was only a year old. But things had been changing quickly at GV. We had new portfolio companies (like Uber and One Medical Group). New general partners (like Kevin Rose and MG Siegler). And we had produced a bunch of helpful new content for entrepreneurs (like our design sprint series and workshop videos).

It was time to redesign. We had a few goals:

  • Explain the basics better. At 4 years old, we still weren’t doing a great job of explaining why we exist and where we invest.
  • Present our team in a more useful way. Our old site showed faces and first names, but buried people’s accomplishments and expertise.
  • Consolidate our content for entrepreneurs. We had four separate blogs, none of which were part of the GV website.
  • Adopt a timeless visual style. We wanted a look we could live with for a few years.

Google Ventures website
The redesigned GV.com website.

Creating a classic visual style

After three years of annual redesigns, we searched for a classic visual style that wouldn’t look old a year later. Some of our early prototypes were heavy-handed, but Daniel kept pushing us to remove elements and simplify styles. To avoid looking boring, we added details like the animated graph pattern and custom hand-drawn icons.

We designed the collapsible navigation bar early. It nearly disappears when closed, which keeps the page clean and dedicated to content. The large remaining canvas gave us plenty of space for articles, videos, and case studies.

Fitting headlines

Braden first noticed Brandon Grotesque at a restaurant in San Francisco:

“It reminded me of Arial Rounded, which was so over-used in Web 2.0, but signaled a ‘Comic Sans’-type friendliness. So I looked it up, and there it was: Brandon Grotesque!”

We started with heavier weights — typical for headlines. But after a few days, we felt like the headlines were dominating the pages. We made the headlines light weight and immediately loved it. Brandon Grotesque Light fit the austere yet refined style of the website. But we worried it was too cold. We started looking for ways to add soft, organic textures to the website.

Daniel is always on the look-out for inspiring design patterns and reference styles. He had noticed contemporary lifestyle brands (including Apple and Dove) using photos masked with text. We started experimenting, and found we could add subtle texture by using desaturated, blurred images. And the light weight of the headlines only exposed a bit of the image, so it wasn’t overwhelming.

After some experimentation, we loved the new headline style. Now we had to figure out how to build it.

Detail of headline styling
A closer look at the headline shows the subtle gradient.

How we built it

We marked up the headlines very simply: an <h1> with an optional class to specify a masked background image.

<h1 class="texture">
  We help entrepreneurs
  <span>change the world.</span>
</h1>

(We use the nested <span> to set line breaks in a screen-size-responsive way. For large screens, we control the line breaks by setting display:block on the <span>.)

The CSS for masking images with text is simple. Most of our styles change the weight, size, and spacing of the headlines — the background mask only requires a couple of lines.

First, we set basic text styles for headlines:

h1 {
  font-family: brandon-grotesque, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1em;
  color: #222;
}

Then we style the texture class, which gives headlines a masked background image.

h1.texture {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;  
  background-image: url(/images/headline-texture.jpg);
}

Unfortunately, this technique only works in Chrome and Safari. We need to fail gracefully in Firefox, Internet Explorer, and other browsers. We use JavaScript to create a temporary div in the page and check whether background-clip exists. If it exists, we add the texture class to our h1s. It’s also possible to fall back in Mozilla, Internet Explorer, and Opera using CSS only (no JavaScript). Divya Manian wrote about a pure CSS fallback for background-clip that looks very good.

We tried a variety of background images in search of the proper texture. For a while, we used a photo of Braden! Our final image contains translucent circles on a dark background. We varied the hue and saturation between circles, but kept the brightness constant. (When the image contained too much contrast, our headlines were hard to read.)

Background image used for GV.com headline styling
The design team chose an abstract background image for the headline styling.

Getting the details right

This kind of detailed design can be a lot of work, but it pays off when the result is effective and well-received. Collaboration is necessary — we combined visual design and web development to produce a unique and subtle headline style that will age well. We are happy with how the headlines turned out on GV.com, and hope you enjoy them too!

John Zeratsky

John Zeratsky is a design partner at Google Ventures, where he helps startups use design successfully.

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.

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.

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!

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.

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.

We’re happy to announce a partnership with ContentActivator, a powerful new platform that allows you to build and maintain responsive websites without writing code.

ContentActivator homepage

You can now easily add Typekit fonts to your ContentActivator sites using ContentActivator’s “Customize Theme” tools. First, choose a page element whose fonts you want to adjust.

contentactivator-customize

Then, pick a Typekit font from the menu.

contentactivator-fontselector

That’s all there is to it. You won’t even need to use your own Typekit account, since access to the fonts is already included in your ContentActivator account.

We can’t wait to see what you create with ContentActivator and Typekit. The possibilities look very promising.

contentactivator-property

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.

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.