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.

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!

Sometimes you just want to really work your hands into something—whether it’s something you can eat at the end of the process, wear proudly, or curl up under. This week’s sites we like highlight a few of those handmade creature comforts: warm food, good shoes, and a cozy quilt.

Two Please website

From husband-and-wife team Brian Hoff and Kathleen Watkins, Two Please shows off tempting recipes with luscious photos and some great type. FF Nexus Serif and Sans, both ported over on a license from FontFont, balance each other nicely between cheerful sans headings and the delicately seriffed body text, and Brandon Grotesque looks fantastic in the header navigation.

Nick's Custom Boots website

In operation out of Toronto for the past forty years, Nick’s Custom Boots wastes no time getting to the point: if you’re looking for quality custom-made boots, you’re in the right place. You can also see two of our quality fonts on display on their store website: Bree, somewhat unusually placed as the body text font here, invokes the warm rounded elements of handwriting, while JAF Bernino Sans Condensed keeps the headings and navigation clicking along neatly.

Simply Brown website

If you’re ready to dive into your own crafty project, Eileen Brown offers us Simply Brown, whose no-nonsense quilting kits and straightforward directions will turn you into a quilter in no time. Type on the site is likewise clear and easy to read, with body text in JAF Bernina Sans and headings in Kepler Std Semicondensed. Read more about the type choices at Fonts In Use.

Well, if you didn’t have plans for this weekend already, that should get you started. That’s it for this week; share sites you like in the comments!

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.

We’ve worked up a bit of an appetite looking through this week’s sites we like, which rounds up a few menus we’ve noticed recently—showing both delicious-sounding dishes and (of course) tasteful use of type.

Electric Diner website

The Electric Diner menu boasts “unfussy combinations of the best ingredients” in their London restaurant, and we might use the same phrase to describe the pairing of typefaces they selected for their website. Proxima Nova is a dependable choice for clear body text, and we love the bold, precise look of Prenton Ultra Condensed in the headers.

Fuel Cafe website

Futura gets center stage on the Fuel Cafe website, its geometric shapes working in good visual harmony with the clean design and navigation. Brandon Grotesque adds a touch of warmth to the menu descriptions—not that it takes much to make a “cheddar scallion biscuit with homemade sausage gravy” sound pretty appealing to us. (We’ll take 30, please.)

Vermont Salumi website

Not full yet? Let’s head over to Vermont Salumi, purveyors of fine cured meats with an evident flair for type. They use Chunk for an old-fashioned woodcut aesthetic in their standout headings, and News Gothic for no-nonsense navigation—and see if you can detect the tiny traces of Bello and Aviano Sans in there, too.

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

Design studio websites are reliably interesting for us, since they frequently want to pack a lot of character into the space while maintaining a wholly-functional work portfolio. It’s easy to mix up signal and noise with those priorities at stake, but here are a few studio sites that get it right.

Fuzzco website

With an energetic crew based in Charleston, South Carolina, the Fuzzco studio website shows a lot of personality—not to mention a lot of great type. Proxima Nova and Adobe Text are used for most of the body text and headings, but Droid Serif and Hydrophila Iced both make appearances as well. It’s a lot of fonts, but all are used with just the right amount of restraint.

Cultivated Wit website

Cultivated Wit is the studio of three former employees of The Onion, who have harnessed their penchant for humor and unleashed it upon all manner of web projects. Their selected web fonts are attractive and lean towards the conventional, which is all the better for tongue-in-cheek statements. Alternate Gothic No. 2 D appears in many headings, with Brandon Grotesque on broad display as well. FF Tisa appears on the blog and in other longer blurbs throughout the site.

I Shot Him website

I Shot Him is a design studio based in one of San Francisco’s sunnier microclimates. The type on their website does a great job of sturdily accompanying the stunning graphics, with Jubilat for most of the heading text and Gesta in place as a friendly, distinctive sans-serif body font. You’ll also see a few samples of lovely Signalist from Mika Melvas.

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

All manner of animals in this week’s sites we like.

Mandrill

Mandrill is MailChimp’s email notification platform for apps. Freight Sans, set in all caps with generous letter spacing, exemplifies the sleek and contemporary aesthetic of the site.

Stonehenge Veterinary Hospital

If the Stonehenge Veterinary Hospital puts as much care into their services as they do their website, your pet should be in good hands. Friendly, informative, and tasteful, they utilize FF Dax Compact, Museo Slab, and cute silhouetted critters to great effect.

Little Goat Chicago

If it’s true that you first eat with your eyes, you might take a bite out of your laptop. Little Goat Diner’s charming illustrated and animated splash screens are a clever prelude to their numerous and extensive menus, set in the appropriately playful Brandon Grotesque.

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