Do you know where your food comes from? This week, we’re getting up close to a few sources, beginning with dessert (as one does) and working all the way down to the raw ingredients.

Molly and Me Pecans homepage

The homepage of Molly & Me Pecans wastes no time getting to the goods: a close-up image of crispy sugared pecans shows you exactly what you’re in store for. We’re sold. Garamond Premier and Garamond Premier Display show off their classic seriffed characters for the body copy on the site, with generous line spacing adding to the laid-back feel. The sans serif headers are set in Oswald.

25 Mile website

Champions of locally-sourced food, the crew at 25th Mile has some pretty impressive menus over on their beautifully photo-filled website, and something called “Tuesday Treat Night” that we could definitely get behind. Adobe Garamond is used in the thoughtful body copy, and Proxima Nova appears as an unobtrusive counterpart in navigation and other headers.

Kobia homepage

Kobia is a bakery supply wholesaler based in Sweden, providing flour, marzipan (did you know there are marzipan factories?), and other confections to bakers throughout northern Europe. The site is in both English and Swedish, and looks great in either. We love Freight Micro in the headings; it has so much character, and feels warm compared to a lot of other serif headers. Freight Sans is a natural counterpart, used in subheads and body text.

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

Fonts are great, but using them well can be hard. Volumes have been written about typography, yet every good designer will say there are no rules; there is no magic formula for success. Typography simply takes practice. Typography is a practice.

So today, we’re launching a new website: Typekit Practice, a place where novices and experts alike can hone their typographic skills. We hope it will help students learn, help teachers teach, and help professionals stay sharp.

Let me show you around.

practice-home
Home.

Lessons walk through specific topics or methods in the practice of typography, with a clear objective or takeaway skill that can be immediately applied to design work. Our first lesson is about using shades for eye-catching emphasis.

practice-lesson
An example in a lesson.

Readers can study the examples by editing code, and the lesson concludes by suggesting next steps. Lessons stand on a foundation of references to articles, blog posts, books, websites, talks, and other solid resources.

practice-reference
A reference in a lesson (left) and at its own URL (right).

For example, John Downer explains why sign painters shade letters to the lower left, Nick Cox reviews Typofonderie’s Ambroise, and Typekit’s own David Demaree ruminates on Hi-DPI typography. We’re working hard to accurately cite the sources of references, so that readers have a starting point for further research.

practice-library
The pop-up library.

Finally, the Typekit pop-up library now has a permanent home on the web. Our collection has steadily grown since we introduced this traveling set of recommended books last fall. These books are excellent resources to reference and build upon, so it makes sense that the complete list of books and reviews by members of our team are part of Typekit Practice.

We have lots of ideas for Typekit Practice, plus an extraordinary group of authors and teachers helping us think up valuable lessons and make good references. Come practice with us.

This week, we’re all about weighty design: from old computers to even older automobiles. Get ready to do a little time traveling.

Celebrate the Mac website

Celebrate the Mac will be a nostalgic trip for a lot of us. In honor of the 30th anniversary of the Macintosh, Jonathan Zufi features a selection from his huge collection of Mac-specific photography, paired with a few details about the machines Apple has released over the past three decades. Headings and navigation are set in Futura PT, whose clean geometric shapes are a natural match for a company known for its simple design elegance. Body text is in Proxima Nova, feeling exceptionally light here thanks to the wide spacing.

Chromeography website

We could spend hours poring over the beautiful and endlessly varied designs featured on Chromeography, a site that exists “in praise of the chrome logos and lettering affixed to vintage automobiles and electric appliances.” The site was built by author and type critic Stephen Coles, whose strong taste for type is evident in the tagging methodology, including categories for “Swash” and “Baseline connection.” All text on the site is set in FF DIN Round, whose soft edges are a great counterpart to all the shiny chrome, as well as the sharp angles on the hand-lettered Chromeography logo.

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

IMG_8021

Are you in San Francisco this week for TYPO? The conference returns for its third year today, also marking the third year Typekit has sponsored the conference — and the first year that the Typekit pop-up library has been part of it. We always enjoy this conference, as it brings together type designers, many of our foundry partners, and others in the design community. We’re particularly proud to have our creative director Elliot Jay Stocks speaking later this afternoon about a few advanced web typography techniques.

If you’re here for the conference, the pop-up library will be on the second floor in the northwest corner. Stop by to say hi and flip through a book or two!

Ticket sales are unfortunately closed for the two-day event in San Francisco, but there’s still room for TYPO Berlin; keep an eye on the TYPO Talks website for all upcoming conference locations.

Starting today, Creative Cloud single-app subscriptions will include a Portfolio plan from Typekit at no additional cost. This includes full access to desktop fonts sync, and should be especially good news for those of you who are excited to try out the new integrations with InDesign and Illustrator.

What is a single-app subscription?

A single-app subscription gives you access to the full version of just one Adobe application for less than the price of a subscription to the entire Creative Cloud suite. You can subscribe to more than one single app, but if you need more than a couple, you may find CC Complete to be the best value.

Screenshot showing list of Creative Cloud single-app plans
Browse all the plans on creative.adobe.com.

A Typekit Portfolio plan is now included when you subscribe to any of these applications:

  • Photoshop
  • Illustrator
  • InDesign
  • Adobe Muse
  • Dreamweaver
  • Flash Professional
  • Adobe Edge Inspect
  • Adobe Edge Animate
  • Adobe Premiere Pro
  • After Effects
  • Audition
  • SpeedGrade
  • Prelude
  • InCopy

What if I already have a Typekit account?

If you’re not a Creative Cloud subscriber and would like to check it out, you can always test the waters with a free plan, which offers 30-day trials for all Creative Cloud apps. We’ll walk you through the process of connecting your Typekit account to Creative Cloud if you’re ready to take the plunge with a subscription.

What if I already have a single-app subscription?

Your next step is simple: sign in to Typekit with your Adobe ID and password to start using your new Portfolio plan.

If you’re already using Typekit and have upgraded your plan independently of Creative Cloud, we’ve got your back. Sign in to Typekit again now, make sure you’ve linked your Typekit account to your Adobe ID, and you will receive an automatic refund for the time left on your subscription.

Any questions about getting started? Get in touch with us anytime at support@typekit.com.

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.

HIKE

We’re proud to host the first-ever Hike Conference tomorrow, April 5th, at Adobe’s San Francisco office. Founded by Laura Helen Winn of Form and Future and Jason Schwartz of The Secret Handshake, Hike Conference is a one-day event intended to inspire and equip students and emerging professionals with ideas and tools to pursue a bright future in design.

We’re excited to welcome the attendees into our space tomorrow; you’re in for a treat with talks from speakers like Mike Monteiro and Laura Bruno Miller. A few Typekit folks will be attending as well, so please say hello!

If you missed your chance to grab a ticket for Hike Conference in San Francisco, there are still spots left for Chicago in October.

The Typekit team wishes you A Very Happy Thursday!

Piglet and Pooh

Dave Dawson has turned a few short sentences into a work of art. (For the story behind this site, read his blog post.) Corner Store is set large and bright with bumblebees peeping through the transparent text. FF Cocon—making its first appearance in Sites We Like—is a cheerfully rounded companion to Corner Store’s paintbrush-like swoops.

The site makes us smile, and we hope it does the same for you.

This week’s sites we like make us want to get up and get moving. Whether focusing on the court, the surf, or pair of wheels, they’ll get your typography flowing.

swl-vickers

Vickers Bicycles is all about classic style, which is neatly reflected in their font selections. Headers are set in Adobe Garamond, making nice use of its italics, and the product prose relies on the perpetual favorite, Proxima Nova. Even if you’re not in the market for a new bicycle, we think you’ll enjoy perusing the site.

swl-rookie

Rookie is a sports site that looks at the stories and people behind the scores and stats. They’ve paired the sturdy Futura PT Condensed with some beautiful photos for (we have to say it) a slam dunk.

swl-otter

If you’re looking for a new board or even want to learn to craft your own, Otter Surfboards is the place to be. Header text is set in
Raleway
, another one of your favorites, and the body text is Droid Serif. The attractive pairing puts the information you need front and center, leaving you plenty of time to get back to the beach.

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

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.