Type study is an ongoing series of guest posts about typography on the web. In this article, Meagan Fisher dishes up advice on novelty fonts.

Ah, novelty fonts. They make up the majority of free fonts available on the web; usually they are pre-grunged-up and have exciting names like “fallen angel” or “cowboy whisper.” You used them liberally on your LiveJournal, but now that you’re a real designer you avoid them like the plague. Right?

Maybe not. When used well, decorative, display, or handwritten fonts can make the difference in a design. We’ll take a look at a blog design, and examine techniques for swapping standard fonts and novelty fonts to make the design more…well, novel.

The case study

I have a confession to make: I am a huge fan of dribbble. Whenever I have a spare second, am stuck for inspiration, or just need a little beauty in my life, I turn to the dribbble everyone feed. I’m amazed how many designers I’ve discovered who I wouldn’t have known about otherwise. For some time now I’ve wanted to create a blog that catalogues my favorites. Hence, bbballer.

The bbballer website, for starters

I whipped up this mockup rather quickly, and felt pretty good about it as an early design. However it’s relatively sparse in terms of imagery (with the exception of the winsome mascot), and I’d like to give it more personality.

Technique 1: A logo that isn’t really a logo

There have been plenty of times when I’ve wanted to give the title of a site a little added flair, while also ensuring that the text remained dynamic. If you’re crafting a theme or template, you can’t use static images for the blog name, but that doesn’t mean it can’t have style. Using a typeface with a little flamboyance sets the site name apart in situations where you can’t incorporate an actual logo. For bbballer, I decided to set the site title in the delightful FF Prater Script, a nod at dribbble’s scripty logo.

Close up of the bbballer logo

You’ll notice the site title has a subtle embossed effect; this detail is added using CSS3’s text-shadow property. The CSS reads as follows:

#header h1 {
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  }

Let’s break down that syntax, since text-shadow is used throughout this design in a variety of ways:

  • The first value, set to 0, represents the horizontal offset of the shadow.
  • The second value, shown here at -1px, represents the vertical offset. In this example I decided to set the shadow above the text, so it appears to be pressed into the page.
  • The third value, shown here at 2px, determines the amount of blur. Since I want the effect to be subtle, I chose to make the shadow fairly soft.
  • The fourth value determines the color of the shadow. I’ve used CSS3’s rgba property to set the color to a transparent black, so that the background shade will blend through.

Now that our site title is looking lovely, let’s give our headlines a little character as well.

Technique 2: Let your headlines do the talking

I love crafting interfaces that call for gorgeous photography, whimsical illustrations, or engaging videos, but sometimes media-rich designs can distract from the content. One way to maintain a minimal approach, while still injecting personality into the design, is to selectively use fonts with lots of character. Here I chose a font that fits the vintage athletic theme of the design: LTC Squareface.

Display fonts are meant to be on display; cramming them into body text or tiny headlines will create an illegible mess. So be selective, and use ornate fonts at larger sizes. The striking slab serif used in bbballer gives a nod to varsity letter jackets, but it’s only used once in the design to avoid overpowering the content. It’s also set at a large enough size for the reader to enjoy all those thick serifs.

The headline of the bbballer site, in LTC Squareface

You’ll notice that we’re using text-shadow once again; in this case we have a light shadow coming from the bottom of the headline. Again, this detail creates the illusion that the text is letter pressed, and adds an extra layer of visual interest. Here’s the markup for the text-shadow applied to headlines:

#masthead h2 {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  }

As you can see, here we’re using a sharp 1px vertical shadow, set in a transparent shade of white. It’s a simple addition that makes our headlines just a bit more interesting.

Technique 3: Amped up ampersands

One of my first assignments as Deputy Designer at SimpleBits back in 2008 was to help Dan Cederholm with a post about using the best available ampersand on the web. The goal of the article was to highlight the ampersands available with web-safe fonts. If I were given that assignment today, four years later, it would be a completely different undertaking. Today there are hundreds (if not thousands) of ampersands available via @font-face.

Even with the explosion of fonts available for use on the web, Robert Bringhurst’s guideline still applies:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful.

While researching this article I found many fonts which would rarely have an appropriate use in everyday contexts, but contain gorgeous, attention-worthy ampersands. These can be sprinkled throughout headlines to add elegance or playfulness to a design.

Bello, used in the ampersand

I’ve marked up my lovely ampersand using the technique recommended by Dan back in 2008. The ampersand is wrapped in a <span> which is given a class of amp. Then this <span> is styled by our CSS. Here are the styles from the example shown above:

#masthead h2 .amp {
  font-family: "bello-caps";
  font-size: 2em;
  color: #ae5076;
  }

Our ampersand is displayed in the lovely Bello Caps font, at a slightly larger size than the rest of the headline. It’s also rendered with bbballer’s signature pink, for a little extra pizzazz.

A note about semantics

After taking an informal Twitter poll, I’ve found that there’s some debate amongst web developers about the most semantically correct way to mark up an ampersand. It may be that there is no absolutely right answer, but here are a few approaches you might consider:

  • Jeremy Keith made the case for using <abbr> instead of <span> for markup, since some consider the ampersand to be an abbreviation. Ethan Marcotte concurs.
  • Mat Marquis suggests we use the <b> tag, since it is used for content that is “stylistically offset from surrounding text,” according to the W3C.
  • Jonathan Snook wrote an article for 24ways suggesting that we embed only a single character (in this case, the ampersand), rather than the entire font.
  • Drew McLellan also wrote a 24ways post about styling ampersands. His approach uses the unicode-range descriptor to style ampersands, thus negating the need for additional markup.

Whichever approach you settle on, be sure to choose an ampersand that fits the tone of your design. To help with the search for the best possible ampersand, I’ve used my Deputy Designer training and assembled over 200 of my favorite ampersands on Typekit. There’s a preview below, and you can view the full page as well.

A collection of expressive ampersands available on Typekit

Technique 4: Notable notations

Handwriting fonts are one of the trickier novelty fonts to utilize successfully. When overused they can be illegible and ugly. However, when incorporated selectively, handwriting fonts can make a design more usable, playful, and engaging.

One technique that’s been emerging in app and web design is the use of coach marks. These phrases, usually set in a handwritten font and paired with an arrow, can help guide a user through the setup process of an app, or draw attention to key content in a site. (Note: it’s important to consider how and why to use coach marks in a design; Khoi Vinh wrote an interesting post discussing the pitfalls of coach marks, which is worth checking out.)

One recent redesign which employs this technique is the Basecamp marketing site.

Coach marks on the Basecamp marketing site

Basecamp is using images to achieve this affect, but with font-face friendly handwriting and a few hand-drawn arrows, we can create coach marks that use dynamic text.

In the bbballer design I’m using this technique at smaller sizes, so I want to choose a typeface that’s clear and legible. At larger sizes a handwriting font that’s more stylized may be appropriate, but here we’ll use the simple Felt Tip Woman.

Along with the typeface, we’ll adorn these elements with hand drawn arrows. You can draw and scan your own, or use one of the many sets that are available freely. Here we see bbballer with coach marks added:

Coach marks on the bbballer web site

For a last little detail to reinforce the handwritten feel, we can use CSS3’s transform property to rotate these little notes a bit. It’s an understated way to set these elements apart, and adds to the slightly quirky feel.

The syntax for rotate transform reads as follows:

.notation {  
  -ms-transform: rotate(2deg); /* IE 9 */
  -moz-transform: rotate(2deg); /* Firefox */
  -webkit-transform: rotate(2deg); /* Safari and Chrome */
  -o-transform: rotate(2deg); /* Opera */
  transform: rotate(2deg);
  }

As you can see, we’re using vendor-prefixes to ensure that this effect appears in as many cases as possible. The syntax is fairly straightforward; simply use CSS3’s transform property, along with the type of transform you’d like to apply. There are a number of transform functions available, including scale, rotate, and skew. In this case, rotate is the most appropriate. After the transform value, state the number of degrees the element should rotate. Here we’re using a subtle two degree rotation. With this technique in place, your design has an added level of personality and warmth.

Technique 5: Fun forms

Oftentimes forms on the web can feel impersonal; handwritten fonts are a great way to bring some character to a simple contact form. By applying a handwritten web font to our form’s input and textarea fields, we remind users of the good ol’ days when people still wrote each other notes. Perhaps using this technique will remind the author of their humanity, and discreetly encourage them to be polite in their message.

I first noticed this technique on the gorgeous Foundation Six web site:

Handwritten forms on the Foundation Six website

Adapting this style for bbballer, our form might look something like this:

A handwritten form on the bbballer website

You’ll notice that in both cases the input font size is set to be fairly large, which is important for legibility. This technique may also be too difficult to sustain for long forms, so I’d recommend reserving this style for quick interactions.

So there you have it! Five techniques for using once cringe-inducing novelty fonts. Perhaps you are now inspired to broaden your range of go-to typefaces; at the very least you’ve found a great excuse to spend the afternoon browsing type. Now if only we could find a way to use Comic Sans unironically.

Meagan Fisher

Meagan Fisher is a web designer living in Brooklyn. In her seven year career, she has partnered with legendary design firms such as SimpleBits, Happy Cog West, Hoefler & Frere-Jones, and MetaLab. She writes about web design at Owltastic.

Type study is an ongoing series of guest posts about typography on the web. In this article, Ethan Marcotte dishes up advice on font size.

Yes, it’s true. This is a blog entry about sizing text for the web.

…look, I know you’re still out there. I can hear you breathing.

Sure, sizing text isn’t the most glamorous topic. What’s more, it can get downright contentious, with camps forming around their favorite units of measurement. The truth is, each approach has its own unique strengths and limitations. So below, let’s dive into a few popular methods, discuss them with a bit of equanimity, and wrap up this little essay with a better understanding of our options for font-size.

Our old friend, the pixel

Let’s dive in with a quick little demo. To start us off, I pulled a short passage from an old, favorite book, marked it up in some basic HTML5, and applied some light CSS. If you’d like, you can view my little page.

Now, sharp-eyed reader that you are, you’ve probably noticed the markup’s as modest as the design:

<article>
  <header>
    <h1 class="main-title">
      <img src="dorothy.png" alt="" />A Brief Excerpt from <cite>The Wonderful Wizard of&nbsp;Oz</cite>
    </h1>
    <h2 class="byline">by <a class="person" href="#">L. Frank Baum</a></h2>
  </header>

  <div class="article-body">
    <p><b class="caps">The Lion hesitated</b> no longer, but drank till…</p>
    …
  </div><!-- /end .article-body -->

  <footer>
    <p>Words by …</p>
  </footer>
</article>

Our page is essentially one big article element, which contains:

  1. A header to house the headline (h1.main-title) and byline (marked up oh-so-imaginatively as h2.byline).
  2. The primary text is contained inside a div with a class of article-body.
  3. Finally, a footer element rounds out the copy with some attribution.

Nothing too fancy, right? Well, the styling’s just as unassuming. Now, since this is an article about font sizing, let’s not worry our pretty little heads about layout. Instead, let’s focus on the fonts:

body {
  font: normal 16px/24px adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

.main-title {
  font: normal 30px/36px abril-display, Palatino, Georgia, Times, serif;
}

.main-title cite {
  font-size: 42px;
  line-height: 50px;
}

.article-body {
  font-size: 18px;
}

.caps,
figure,
footer {
  font-size: 14px;
}

From the outset, it’s obvious the page relies heavily on Adobe Text Pro set on the body, with TypeTogether’s elegant (and new!) Abril Display prettying up our .main-title headline. And with those defaults established, the rest of the CSS is dedicated to specifying a few different font sizes: five rules, five different font-size values, each set in pixels. And that’s basically it.

Easy, right? I think that’s half the appeal of the mighty pixel, actually: just how easy it is to use. We can transfer a few pixel values from Photoshop into CSS, and — voilà — your work’s nearly finished. But efficiency aside, I think there’s something appealing about the promise of control that comes with declaring a few quick pixel values, a control that’s so darn appealing to us designers. But for all its strengths, px isn’t the best game in town.

In fact, there’s one well-known drawback to sizing type in pixels: Internet Explorer’s “Text Size” tool (still) won’t resize any text set in pixels. Now, it’s true that many desktop browsers, including more recent versions of IE, include some form of page zoom, which can magnify the size of your entire design, including its text. But older versions of IE are, alas, still out there.

Moreover, exploring alternatives to the venerable pixel might result in some real, practical benefits. Ever built a menu that allowed the user to dynamically change the size of text on a page? I’ve worked on a few, including one that launched recently. If your design’s universally set in pixels, each text size “level” would require you to redeclare sizes for every px-based element of your design. So it’s very possible that on some projects, pixels simply won’t scale. (Pun unfortunate, but intended.)

Now that I’ve stepped off my soapbox, let’s take a look at a slightly more proportional alternative, a unit of measurement that does play nicely with resizing: namely, the em.

Becoming context-aware with ems

Because I’m a sucker for nostalgia, let’s revisit our body rule. Here’s what we’re currently working with:

body {
  font: normal 16px adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

Before we start getting more proportional, let’s tweak it ever so slightly:

body {
  font: normal 100% adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

Catch the difference? All we’ve done is change the font-size value to 100%, setting our document’s base type size to the browser’s default, which is usually 16px. As a result, we’re left with a flexible baseline, a point of reference from which we can size our text up or down using relative units of measurement—specifically, the em.

It’s worth mentioning that some folks prefer setting the body to a font-size of 62.5%, as this gives us a relative baseline of approximately 10px—which can make relative font sizing much, much easier. Richard Rutter, author of the original 62.5% technique, wrote a fantastic article for A List Apart recommending 100% as a better baseline, one that ensured more consistent cross-browser results.

But I digress. Regardless of what your baseline preference might be, our job at this point is to convert our pixel-based font-size values into their em equivalents. To do so, we’ll need to do a teensy bit of math: we’ll simply take the target pixel value we’ve already set, and then divide it by the font-size of its containing element — in other words, its context. The result is our desired font-size, but converted neatly into relative terms, which we can then drop directly into our CSS as ems.

In other words, relative font sizes can be calculated like so:

target ÷ context = result

Let’s take a quick example. Remember our main headline?

.main-title {
  font: normal 30px/36px abril-display, Palatino, Georgia, Times, serif;
}

In order to turn the headline’s 30px size into an em-based value, we need to define it in relationship to its context — that is, the font-size of the body element. Let’s assume our font-size: 100% is roughly equivalent to 16px. So let’s plug our .main-title’s target font size (30px) and its context (16px) into our formula:

30 ÷ 16 = 1.875

Boom. 30px is 1.875 times greater than 16px, so our font size is 1.875em.

Now you may recall that the book’s title was wrapped in a cite element inside our main headline, and sized a bit larger than the text that preceded it:

.main-title cite {
  font-size: 42px;
}

If we want to convert that 42px to ems, it’s important to note that our context has changed. Since we’ve set a font-size on our .main-title headline, the font-size of any elements within need to be expressed in relation to that value. In other words, our cite’s target value of 42px needs to be divided not by 16px, the body’s font-size, but by the 30px we set on our headline:

42 ÷ 30 = 1.4

And that’s it. With a little bit of contextual awareness, we’re left with a proportional font-size for our .main-title headline, as well as the cite inside it:

.main-title {
  font: normal 1.875em/36px abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
  line-height: 50px;
}

(I personally like including the target and context values as comments in my CSS, usually off to the right of the relevant property. I’ve found it makes revising these relative values much easier, especially since the origin of a value like 1.875em might not be immediately apparent.)

Sizing text proportionally simply requires a little contextual awareness. And that applies to setting our document’s line-height, too. For example:

.main-title {
  font: normal 1.875em/36px abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
  line-height: 50px;
}

The line height in both rules — 36px for .main-title, and 50px for the cite within it — are still in pixels, which means the line-height values won’t scale along with their respective relative font-size values. Presumably because they hate freedom.

But thankfully, we can quickly move those pixel-based values into something more proportional. But this time, our context is the font-size itself, our target the pixel-based line-heights. So with that in mind, let’s do a little bit more math:

36 ÷ 30 = 1.2

50 ÷ 42 = 1.2

There we are: both .main-title and the cite within it have a line-height of 1.2. And since the two elements share the same line height, we can actually just set the value once on the higher element, and let its descendants inherit it:

.main-title {
  font: normal 1.875em/1.2 abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18; 36 / 30 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
}

That is, as the kids say, that. What’s more, we don’t actually need to add units to the line-height, as Eric Meyer’s covered so ably before. Instead, we can leave that proportional value in place, sans pixels, percentages, or ems.

But yes! Context rocks! And armed with that knowledge, we can turn to our remaining pixel-based rules:

.article-body {
  font-size: 18px;
}

.caps,
figure,
footer {
  font-size: 14px;
}

As before, with some simple math and an awareness of a given element’s context, we can turn those values into oh-so-flexible ems:

.article-body {
  font-size: 1.125em;  /* 18 / 16 */
}

/* figure and .caps are children of .article-body, so their context is 18px */
figure,
.caps {
  font-size: 0.777777778em;  /* 14 / 18 */
}

/* The footer's context is the body element, so we'll use 16px here */
footer {
  font-size: 0.875em;  /* 14 / 16 */
}

And with that, we’ve successfully moved our page beyond the pixel. The design’s identical to the original px-based version, but considerably more flexible, proportional, and accessible.

Meet the rem

The em is powerful voodoo indeed, but it’s not without its limitations. Obviously, it requires an awareness of an element’s context, which can be unwieldy at best. What’s more, it can complicate moving modules within your design, as their font-size might be tied to a specific position in the document’s hierarchy. So for especially complicated, content-heavy sites, this could potentially require some work.

Thankfully, there’s been some traction on improving our old friend the em. Introduced in the CSS3 specification, the rem behaves much like the em: it’s a relative unit of measurement, sizing text up or down from a baseline value. But the rem is sized relative to the root of your document—in other words, the value set on the body element.

Here’s what our CSS looks like, once we switch everything over to rems:

body {
  font: normal 100%/1.5 adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

.main-title {
  font: normal 1.875rem abril-display, Palatino, Georgia, Times, serif;  /* 30 / 16 */
}

.main-title cite {
  font-size: 2.625rem;  /* 42 / 16 */
}

.article-body {
  font-size: 1.125rem;  /* 18 / 16 */
}

.caps,
figure,
footer {
  font-size: 0.875rem;  /* 14 / 16 */
}

This is still relative font sizing, so we’re still using our target ÷ context formula. But now, our context is 16px throughout the CSS. That’s right: no more tracking various context values, worrying about which element’s inheriting which font-size value and going slowly mad. And as someone who hates math, this consistency is kind of exciting.

Sadly, support for the rem is still evolving. Firefox 3.6+, Chrome, Safari 5, and IE9 all support the rem. (And IE9+ even resizes text set in rems!) Unfortunately, while support’s broad, that doesn’t mean it’s universal. So if you’re supporting a significant number of browsers beyond that list, you might need to declare a fallback in pixels:

body {
  font: normal 100% adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

.main-title {
  font: normal 30px abril-display, Palatino, Georgia, Times, serif;
  font-size: 1.875rem;  /* 30 / 16 */
}

.main-title cite {
  font-size: 42px;
  font-size: 2.625rem;  /* 42 / 16 */
}

.article-body {
  font-size: 18px;
  font-size: 1.125rem;  /* 18 / 16 */
}

.caps,
figure,
footer {
  font-size: 14px;
  font-size: 0.875rem;  /* 14 / 16 */
}

Sexy? Maybe not. But this hybrid approach leaves us with resizable text in rem-compliant browsers, with a pixel-based fallback for older ones — a match made in heaven.

Pixels, ems, and rems—oh my!

Whether you prefer slinging px or em, or have started dabbling in rem — each approach has its unique drawbacks and strengths, its own unique contributions to the project you’re working on.

Pixels afford a high degree of precision, but at the expense of versatility. And while ems offer us both the control we crave and the accessibility we need, there’s a certain amount of overhead with the contextual math involved. I hope better browser support means rems offer a way forward — but personally, those px-based fallbacks don’t feel like an appropriate trade-off. Hopefully, we’ll be able to move past those fallbacks soon.

Ethan Marcotte is an independent designer/developer who’s passionate about web standards, gorgeous design, and how the two intersect. He’s perhaps best known for starting that whole “responsive web design” thing, and even wrote a little book on the topic.

Type study is an ongoing series of guest posts about typography on the web. In this article, we hear from Russ Maschmeyer on a nifty trick for creating a responsive 3D text effect.

While perusing the Lettering.js website, I saw this example post by Trent Walton. When I saw that dynamically-generated graphic and the words “My site is responsive,” I assumed those letters would fold and unfold like an accordion to accommodate any browser width. Suddenly all seemed right and good in the world.

Trent Walton’s inspiring blog post.

Alas! As I pushed and pulled on my browser’s window pane, the graphic folded not. But what a great idea! Why hadn’t it been done? My life had new purpose. The result was foldup.js.

Foldup.js works with jQuery and Paravel’s Lettering.js to create an adaptive folding and unfolding effect for headlines, body copy, or any other text deemed worthy. Let’s walk through how to use it.

Example

Before we begin, let’s see it in action; the demo works in Safari, Chrome, Firefox, and Opera, but not Internet Explorer. (Think of it as an experiment.) Be sure to stretch and squish your browser’s window pane to really get the full effect.

The demo, at a wide browser width.

The demo again, but at a narrow width; the letters fold like an accordion.

Getting started

The goal is to get this working with as little HTML as possible, so, we’ll start very simply:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div id="page">		
      <p class="stranger foldup">Hello World!</p>
    </div>
  </body>
</html>

We’ve created an <html> document, added a generic style sheet called style.css, and created a <div> element which will become our page within the browser window. Finally, we’ve included some paragraph content that we’d like to fold up, and added a class of foldup to that paragraph. This will allow us to identify which elements on the page we actually want to fold up.

Adding style

We’ve got our content marked up, so it’s time to add some CSS so that our letters and words look and behave properly.

First, we’ll set the body background to orange (#ffa500) and declare our font stack — featuring Brevia, plus some appropriate fallback fonts. Next up, we want to set up a responsive, centered page to put our text in. We’ll give our #page element a width of 80% and center it with margin: 0 auto.

body {
  background-color: #ffa500;
  font-family: brevia, helvetica, verdana, sans-serif;
}

#page {
  width: 80%;
  margin: 0 auto;
}

Next, we’ll style the element to be folded up. In this case, we’re going for large, uppercase, and center-aligned for our folded letters.

.foldup {
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
  color: #FFF;
}

Now for the fun part. Lettering.js will dynamically wrap each word in its own span and label them sequentially (e.g. .word1, .word2, .word3, etc.). We can then use the child selector (.foldup > span) to style every span element within .foldup without having to know how many there are going to be. We’ll also set a display property of inline-block to keep long words from breaking into two lines and use margin: 20px 10px to set both the line height (20px) and the word spacing (10px).

.foldup > span {
  display: inline-block;
  margin: 20px 10px;
  border-radius: 12px;
}

Lettering.js will also wrap each letter of each word in its own sequential span element. We can reference these new child letters using another child selector: .foldup span > span. We’ll again set display to inline-block; next, we’ll set the width for each letter to 1.5em to make sure they have a consistent width which adjusts appropriately to the font size. We’ll also set the top and bottom padding to .2em and set position: relative; the latter allows us to adjust the vertical position of the letters with our JavaScript for the accordion effect. If you also wanted to add a background texture to each letter, this would be the place to do it!

.foldup span > span {
  display: inline-block;
  width: 1.5em;
  padding: .2em 0;
  position: relative;
}

The last three lines of CSS combine child selectors and pseudo selectors to round the corners of the first and last letters in each word; if there’s only one letter in the word, it rounds both the left and right side of the single letter.

.foldup span > span:first-child { 
  border-radius: 10px 0 0 10px; 
}

.foldup span > span:last-child { 
  border-radius: 0 10px 10px 0; 
}

.foldup span > span:only-child { 
  border-radius: 10px; 
}

Making it happen

Now that we’ve got our content and style prepped, it’s time to make it dynamic. First, let’s add our script files to our HTML document, like so:

<!-- Add Typekit Fonts -->
<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- Add jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Apply our foldup plugin to our text -->
(function(){
  var foldEverything = function(){
    $('.stranger').foldup();
  }
  $(document).ready(foldEverything);
  $(window).resize(foldEverything);
})();

<!-- Add our foldup plugin to this page -->
<script src="js/foldup.js"></script>

The first two <script> elements enable our Typekit fonts (where the “xxxxxxx” is your kit ID). The third <script> element adds jQuery. The fourth <script> element applies the foldup effect to our .stranger element. The final script element adds our foldup.js.

Now let’s dive into the foldup function. Thanks to the help of Typekit’s David Demaree, the plugin is set up with some default parameters that you can change when initializing the function:


(function(){
  var foldEverything = function(){
    $('.stranger').foldup({
      containerWidth: 0.8,  // Width at which the effect begins working
      startColor: [255, 165, 0],  // Card starting background-color
      lowlightColor: [172, 111, 0],  // Card will dark to become this color
      highlightColor: [255, 194, 83],  // Card will lighten to become this color
      minShadow: 0.3,  // Lightest shadow, 1= darkest, 0 = no shadow
      maxShadow: 0.4  // Darkest shadow, 1= darkest, 0 = no shadow
    });
  }
	
  $(document).ready(foldEverything);
  $(window).resize(foldEverything);
})();

You can use all of these or just a few to customize how your foldup looks.

So, how does the foldup plugin actually work? Well, we start by figuring out how much the browser window is currently squished by comparing the current window width against our threshold for beginning the effect; then we determine how far past that threshold we are. Based on that, we dynamically adjust the values for the CSS3 translation properties, skewY and scaleX.

To change the color, we determine how far past our threshold we are and set our current color values for the highlight and lowlight based on how much we’ve squished our window. The more you squish, the closer the starting color gets to the highlight and lowlight colors.

For the shadow, we’re grabbing the span which wraps the whole word, setting the background to black, and then varying the shadow from sharp to blurry by adding a black CSS3 box-shadow which increases in size the more we squish.

When you put it all together it creates the rather convincing foldup effect!

Get the source

Well, that was fun, wasn’t it? If you’re not in the mood to recode this from scratch, I’ve put it all up on github (thanks again to David Demaree for his helpful suggestions). I hope this has thoroughly inspired you to try your hand at creating your own dynamic lettering work using Typekit, CSS, jQuery, and Lettering.js.

Russ Maschmeyer — also known as Strange Native — is an Interaction and
Product Designer at Facebook. He’s also 1/2 of dontfeartheinternet.com, a resource dedicated to teaching web design basics to even the most tech averse.

Type study is an ongoing series of guest posts about typography (and related disciplines) on the web. In this article, Pictory’s Laura Brunow Miner shows us how to use smart editorial to keep the focus of a distracted reader.

I don’t have a formal design education, but I’ve found common sense and psychology go a long way when designing for readers on the web (or anywhere else). In my eight years of publication design I’ve learned that the basics of editorial structure come down to pretending your reader has a short attention span. (They do.) A scattered reader might not be your ideal consumer, but it’s your most likely one — and understanding that can help you turn an occasional reader into a regular one.

Basics of editorial structure

Remember that thing I said about short attention spans? Or did you skim that part? No judgment. Everybody skims, so it’s the job of the designer to make it easy for a reader to dive back in at any point.

Maybe you don’t think this is necessary. Maybe you think, “If I make my content good enough, people will read it.” But think back to the television series Arrested Development. Remember how they subverted the classic “scenes from the next” and “previously on” segments into funny, non sequitur gags? Instead of, say, catching the viewer up or pulling them into the plot? This was fine for the rabid fans (and later, DVD viewers) but alienated anyone who tried to pop in for an episode. And it’s one of the reasons that a fantastic show was cancelled.

It’s easy for content creators, who spend their time immersed in a topic or publication, to lose sight of what it’s like for someone just discovering their work. That’s why focusing on specific strategies can be helpful. In magazine speak, we call the time-honored ways of catching reader attention “points of entry.” I’ll share a few of them here:

The headline is king

Your headline or title is your first chance to gain someone’s attention, and usually has the highest priority in a design hierarchy. This could mean that it’s in the top left, largest, or in the boldest font; in general, you just want to lasso the reader’s eye with your headline. If you’ve got budget for an illustrator, even better.

Beyond the design of the headline, you should also consider wording. You’ll want to try to accurately and concisely sum up your content, but it’s also helpful to imply a conflict (actual or metaphorical), contradiction, question, or other intrigue in your wording. For example: “New Life in the Face of Destruction” or “A Violent, Beautiful City.” (Note: There’s a difference between intrigue and sensationalism, and while inflammatory or accusatory headlines get a lot of short term attention, they undermine your integrity in the long run.)

Headline example from Pictory, with text 'Secrets of inspiring women'

Headline from a Pictory showcase. The word “secret” in a headline is an overused but effective method of gaining reader attention.

Decks for supporting information

A deck is a line that appears directly after your headline, and with a hierarchy generally lesser than the headline but greater than the body copy; it’s an optional opportunity to fill in your reader on the nuts and bolts of the content. The reason the deck is a high visual priority is that you’re a lot more likely to nab a skimmer with an informative one-sentence summary of the piece than any length of body copy. For example, the Pictory showcase headline “The One Who Got Away” needed no further explanation: it’s intriguing, relatable, describes the content, and has a bonus benefit of being a common phrase that people search for. But a title like “Local Legends” benefits from the supportive deck of “NPR and Pictory team up to share your stories of neighborhood heroes”; the latter helps clarify the intent of the photo essay.

Example of a deck from Pictory

Decks help people skimming your site understand your content at a glance and land on content that interests them.

Subheads, pull quotes, and image captions, oh my!

Subheads, or titles for each paragraph like the one directly above, don’t just summarize and break up blocks of content, they also act as another potential landing strip for your skimming reader. Pull quotes, or oversized repeats of a sentence or two of interesting content, do the same. A pullquote could be a similar size or even bigger than your deck (sometimes even dramatically large in a gorgeous font like LTC Bodoni), but should be tucked into the middle of your piece rather than at the beginning. This placement helps keep the deck higher up in visual priority.

Your reader may not think he is interested in your main topic, but may find something grabbing in a word or phrase in the subhead or pullquote. Similarly, it may seem unnecessary to caption a photo if it’s in support of your article, but this offers another point of entry into your topic from another direction.

Example of a pull quote from Pictory

Pullquotes aren’t just good for the reader — they’re also a fun way for the editor to share her favorite gems from a piece.

Example of a photo caption from Pictory

Image captions, like the one you’re reading, offer the reader quick, satisfying insight into what they’re looking at, without them having to re-read or search body paragraphs for the relevance.

Social media FTW

Designers of print magazines have to think about newsstand draw. Those of us with online publications have to think about pulling people in through social media. Many publications use Tumblr to showcase bite-sized pieces of a larger work, Twitter as an unofficial RSS feed of latest content, and Facebook to engage in interaction with the readers. In any of these cases, using the same rules as in headlines (implied conflict or a question) is a good way to grab attention.

A tweet from Pictory, with text:'Pictory of the day: A startling sight on the streets of NYC at night'

Sharing bite-sized pieces through Twitter and Tumblr is a great way to support your publication’s main content.

It’s difficult to be objective about your own work, and impossible to see content you’ve put a lot of time into with fresh eyes. But putting care into your points of entry can help someone who is new to the content stay focused — and maybe even lead to loyal new readers.

Editor, designer, and photography lover, Laura Brunow Miner is founder of Pictory and Phoot Camp.

Last Thursday in New Orleans I attended a glass gilding workshop with John Downer and Leonard Otillio, part of TypeCon 2011. It was excellent, and I cannot recommend the experience highly enough. As a web designer, it felt great to use physical materials. And to be around John and Leonard, such careful stewards of their craft, was an education I could abstract; it’s easy to see opportunities for similar craftsmanship in the subtle and practical details of web typesetting.

During the workshop I picked up a few sign painting terms that were new to me, and relevant to web designers as browser support for CSS text-shadows becomes more widespread. Check out these various shading techniques on the demo page I made to accompany this post. Each of my examples uses multiple text-shadow values, which is pretty well supported (and even possible in Internet Explorer), but I encourage you to design with progressive enhancement in mind.



Bello Pro with a relief shade

h1.drop .relief {
  font-family: bello-pro, serif;
  font-weight: 400;
  background-color: #3a50d9;
  color: #e0eff2;
  text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
  }

The drop shade is a technique with which web designers are already familiar. There is a clear separation between the text and its shadow. It is as if the text is made of cut paper, floating above a surface. With a relief shade, there is a visible gap between the letter and its shadow. A relief shade can be achieved using two text-shadow values — one nearer to the letterform, and matching the background color. If the background is something other than a solid color, this won’t work.


Freight Sans Pro with a two-toned close shade

h1.close {
  font-family: freight-sans-pro, sans-serif;
  font-weight: 900;
  background-color: #fff;	
  color: #202c2d;
  text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px #808d93,
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -6px 7px #808d93,
    -7px 6px #cdd2d5,
    -7px 8px #808d93,
    -8px 7px #cdd2d5;
  }

With a close shade, the text shadow is connected to the text, which appears to give the letterforms thickness. Sign painters often include lighting effects too, varying the hue and value of a shade’s colors depending on where the hypothetical light source is positioned. This can be a particularly cool effect on storefront signage when the close shade is in sync with natural sunlight the sign receives. The close shade above uses diagonally staggered text-shadows in two different colors, so that the letters appear to have dimensional lighting applied.

I use the same staggered text-shadow technique for the printer’s shade below, with one small difference: toward the middle of the stack of text-shadows, I add a subtle blur. This smoothes out some of the LCD striping artifacts, and gives the type a painterly look.


News Gothic STD with a slightly blurred, two-toned printer’s shade

h1.printers {
  font-family: news-gothic-std, sans-serif;
  font-weight: 400;
  font-style: italic;
  background-color: #edde9c;
  color: #bc2e1e;
  text-shadow:
    0 1px 0px #378ab4,
    1px 0 0px #5dabcd,
    1px 2px 1px #378ab4,
    2px 1px 1px #5dabcd,
    2px 3px 2px #378ab4,
    3px 2px 2px #5dabcd,
    3px 4px 2px #378ab4,
    4px 3px 3px #5dabcd,
    4px 5px 3px #378ab4,
    5px 4px 2px #5dabcd,
    5px 6px 2px #378ab4,
    6px 5px 2px #5dabcd,
    6px 7px 1px #378ab4,
    7px 6px 1px #5dabcd,
    7px 8px 0px #378ab4,
    8px 7px 0px #5dabcd;
  }

A printer’s shade, to the right and on the bottom of letters, is something sign painters only occasionally use — because shades on the right sides of letters generally take more brush strokes to achieve. This is not a problem for printers (or web designers), and for that reason we don’t avoid it. But most styles of sign painting shade (see every other example in this post) appear to the left and on the bottom of letters.

Heirloom terminology like this helps us remember where we came from. Although browsers have only just begun to support CSS3, graphic design mechanisms like text shadows aren’t a new thing. We have boundless precedent on which to rely, if we know where to look for inspiration.

This is part of a series of guest posts on web typography. Today’s post was written by Brendan Stromberger.

Let’s face it: kerning on the web kinda sucks. Kern.js, however, is a nifty new tool out to make kerning less of a chore.

Screenshot of kern.js

Kern.js is a simple javascript bookmarklet that adds powerful functionality to Paravel’s first-rate Lettering.js. Rather than having to guess-and-check CSS and make repeated, tedious adjustments, Kern.js allows you to kern letters like you would in a desktop app like Photoshop — simply and visually. It then generates the CSS for each individual letter, which you can plug directly into your stylesheet.

If you don’t know about the wonder that is Lettering.js, you’ll want to first take a look at Trent Walton’s article about it. For our purposes, Lettering.js breaks up any text-containing element into individual letters — conveniently giving a unique class name to each individual span element. With Kern.js, we can tweak the styles of each of those span elements to make your words look perfect.

Screenshot of example page using Kern.js

To show how it works, I’ve whipped up an example showcase page featuring the ubiquitous Hellenic Wide, Stud, Atrament, and Chennai. To get started, drag the Kern.js bookmarklet to your bookmarks bar, visit the example page, and click the bookmarklet. A new panel will appear at the top of your page, letting you know that Kern.js is loaded and ready.

At this point, you can click on any header element (h1, h2, and so on) and Kern.js will then split the contents of the clicked header into individual spans with unique class identifiers. (It is highly recommended that you provide ID attributes for each header element you want to kern.)

From there, click on an individual letter to kern it; it will become highlighted, indicating that you may now move it by either dragging the letter to the left and right with the mouse, or moving it incrementally with the left/right arrow keys.

Screenshot of example page, with "A" selected for kerning

Let’s take a look at the example page and start tweaking these letters. For this example, our changes are going to be small and subtle. Here, I’ve adjusted the spacing around the “A” in “San” and most of the letters in “FRANCISCO.” Tweaking the letters a bit at a time and seeing them update automatically in the browser makes this easy. Once you’ve made your changes, click “Finish Editing.” Kern.js will provide you with the styles to add to your stylesheet. Here’s the adjustment css for my example page:

#san .char2 { margin-left: -0.033em }
#francisco .char2 { margin-left: 0.093em }
#francisco .char3 { margin-left: 0.093em }
#francisco .char4 { margin-left: 0.056em }
#francisco .char6 { margin-left: 0.037em }
#francisco .char7 { margin-left: 0.037em }
#francisco .char8 { margin-left: 0.037em }
#francisco .char9 { margin-left: 0.056em }

At this point, just add the provided CSS to your stylesheet (making sure Lettering.js is already active). Click the “toggle adjustment” button on the example page to see the before and after.

The ability to easily kern letters on the web also opens up some exciting new ideas for designers to play around with. When you combine kerning with varying opacities, rotation transformations, colors, and other exciting CSS3 properties, you can make some really spiffy designs.

Kern me example

Brendan Stromberger is a designer in the Bay Area with a lovely wife who can now tell the difference between Arial and Helvetica.

This is part of a series of guest posts on web typography. Today’s post was written by Dan Mall of Big Spaceship.

Choosing a typeface is an art. It requires a sense of taste, style, genius, and dumb luck.

But it’s also a science. We can apply logic and history in a way that points us in the right direction and deters us from poor choices. The right typeface can inspire interfaces, but what inspires those typographic decisions in the first place?

Enter stereo-typography, the art of using stereotypes to inform your type choices. Designing with stereotypes makes those initial choices a bit easier. Big = loud. Small = quiet. Smooth = elegant. Irregular = experimental. Look for typefaces whose letterforms embody a characteristic you’d like to subconsciously communicate.

Let’s look at a few examples:

photo of runway model
Photo by jsrcyclist

Looking for a fashion-inspired typeface? Find one that exemplifies the qualities of a typical runway model: tall, thin, and sassy. Faces like Ronnia Condensed, Kaffeesatz, or FF Dax Compact could be the right fit.

photo of bridge
Photo by F H Mira

The Industrial Revolution produced a wonderful array of metalwork—strong and sturdy architecture designed to be functional, but which can’t help but be beautiful, too. For workhorse headlines, check out slab serifs Chunk, Adelle, Kulturista, and Quatro Slab.

photo of modern furniture
Photos by Urban Jacksonville and *NEXT* design for your modern home

Postmodern furniture fans: listen up. Postmodern forms that are self-supporting and ergonomic need copy—and typography—that complement. Look no further than P22 FLLW Eaglefeather and Galette.

futuristic computer terminal
The work of Mark Coleran

Website from the future? That HUD for your robot web app? Play up those angular and hard edges with Mashine, Purista, and BD Brick.

photo of office
The 37signals office in Chicago

Want that grassroots, on-the-ground, crowdsourced, honest feeling? Avoid bold and black weights; opt for thin and light weights with large open counters and tall x-heights (they often feel more informal). Check out Raleway, FF Enzo Web, and P22 Underground Thin.

Stereotype-ography is a great way to reinforce the art direction of what you’re designing. While we have yet to find the magic formula for finding the perfect typeface, stereotype-ography is a really useful part of the equation. No matter what the context, there’s a typeface for the situation. It’s up to you to find it.

Dan Mall Avatar

Dan Mall is a Senior Designer at Big Spaceship and former Interactive Director at Happy Cog. He blogs at danielmall.com.

Today’s post was written by Jay Fanelli and Nathan Peretic of Full Stop, creators of United Pixelworkers, a t-shirt storefront for a fictitious union of web designers and developers.

When you look at United Pixelworkers, most of you probably think: that’s a terrible site.

OK, maybe you don’t. But if you look closely, there are in fact criteria by which it is a terrible site, or at least a site that flouts some of the basic tenets of progressive, standards-based web design. The one megabyte CSS file challenges even the fastest connections. The locked layout exceeds the widely accepted 960-pixel boundary. Disable JavaScript and the Typekit font is lost, the live countdown vanishes, the page no longer glides gracefully at the navigation’s behest, and, oh yeah, there is no way to actually buy a shirt.

And yet, we think it’s perfect for our users (or damn close). Notice we didn’t say all users. You see, we knew two things before we moved a pixel on this project: One, our audience is comprised almost exclusively of web designers and developers using late-model computers with big screens, the latest browsers, and fast connections. Two, United Pixelworkers is a side project for us, a labor of love to which we can devote limited time. We knew our users and we knew our limitations. Each visual and functional decision we made had to be based on those factors.

Let’s talk about some of those decisions.

Detail of the header from United Pixelworkers
Fig. 1: All-American

Union made

With its cement-colored pixelbricks and distressed red and blue banners, United Pixelworkers’ aesthetic is an homage to the “Made in the USA” gritty union heritage of Pittsburgh, our hometown. We needed a typeface that fit that visual vocabulary. Enter Hellenic Wide, a 19th-century western font experiencing a surge of popularity (to say the least). Super-extended with enormous slabs, Hellenic Wide is surprisingly suited to a staggering variety of styles, including: mid-century modern, concert posters, vintage letterhead, Seventies electronic components, its actual intended use as a western font, or, how we’re using it, as an industrial workhorse.

The previous iteration of the site paired the quirkiness of Hellenic with the austerity of all-caps Futura Bold. This time, we redesigned our logo using a modified version of Hellenic’s inline variant, flipping the script and making it the dominant font on the site. Typekit made that a convenient choice.

Detail of text in Hellenic Wide on United Pixelworkers
Fig. 2: Hellenic Wide in the wild

About those tassels

For years, HTML websites had little choice but to appear cold, sterile, and lifeless with their curt image swaps and abrupt color changes — particularly compared to decadent Flash sites of the time. Advances in CSS, however, have entrenched delight at the same foundational level as balance, proportion, color, and typography in standards-based web design.

Designing delightful interactions for an audience of designers is petrifying. We knew we needed to come up with something novel, over and above the experience of the first Pixelworkers site, and navigation is a convenient place to introduce novel interactions. We’ve all seen navigation that changes color, moves, fades, or grows, but we’ve never seen anything quite like our “tassels.” Truth be told, they were an accidental discovery. A love child of the multi-colored inline logo and the repeated ribbon device used throughout the site, the tassels were too visually busy for use as a background for text, but when combined with a graceful color fade, were perfect as an added bit of navigational flair.

Detail of the navigation tassles on United Pixelworkers
Fig. 3: Fancy tassels

That fade-and-move interaction would have involved JavaScript only a few months ago. Now, transitioning any CSS property in Safari, Chrome, Opera, or Firefox is merely a few lines of CSS — except, unfortunately, for background images like we were using. The simple solution was to nest another element within each navigation item. As you hover, the inside element gradually appears, moving from zero to 100 percent opacity.

The flyout tassels were comparatively simple to implement. Each link receives a background image that is almost completely obscured by the elements it contains. On hover, the background image is translated left, again relying on CSS Transitions for the easing. That’s it.

Here’s the relevant CSS for the position change (the full source can be seen at this demo):

a {
  background:url("tassles-red-blue.png") no-repeat 20px top;
  -moz-transition-property: background-position;
  -moz-transition-duration: 0.5s;
  -webkit-transition-property: background-position;
  -webkit-transition-duration: 0.5s;
  transition-property: background-position;
  transition-duration: 0.5s;
}

a:hover {
  background-position: left top;
}

And for the fade:


a .nav-background {
  background: url("ribbon-lined.png") no-repeat left top;
}

a .nav-background .background-hover {
  background: url("ribbon-lined-hover.png") no-repeat left top; 
  opacity: 0;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-property: opacity;
  transition-duration: 0.5s;
}

a:hover .background-hover {
  opacity:1;
}

Navigation that stays with you

The original United Pixelworkers site featured a lot of content on a long scrolling homepage. To assist the user in moving around, we included a simple fixed position menu that followed the user down the page. For the redesign, we wanted to retain a piece of that heritage. We devised a double-layer model, where a light grey content layer floats above a static dark grey navigation layer. The top layer scrolls independently, and the navigation dynamically updates depending on which part of the page is displayed. The jagged pixel edges add some textural interest and reference the blocky junctions dividing the page sections in our previous design.

Detail of the layered edge from United Pixelworkers
Fig. 4: Double-layer for quality

Locking the navigation layer in place was easy, but dynamically updating the navigation involved more effort. In the end, we set a timer to check the page location every 100ms (based on John Resig’s advice that attaching behavior to the window scroll event is a “very, very bad idea”). We then compare that to a few page zones automatically calculated based on the visible page sections. Once at least two-thirds of the viewable area is inside a zone, we update the navigation.

Finally, because the active state of the navigation is determined by your position on the page, clicking to view a new section updates the navigation automatically as the page scrolls.

It’s worth pointing out here that fixed navigation is problematic on mobile devices and small windows. With that in mind, we feature test for fixed position support and reset the navigation position to static when appropriate. Similarly, an @media query verifies that a minimum browser height is met before enabling the fixed position navigation. A little responsive web design goes a long way.

Standards-based design rightly advocates diligent effort toward accessibility, performance, usability, beauty, mobile-friendliness, and more — but each project also demands unequal emphasis on certain criteria, sometimes to the point of ignoring one or more facets. For United Pixelworkers, we needed to build a website that would capture the attention of jaded web designers without completely forsaking our client responsibilities. Our decisions, therefore, skewed dramatically in the direction of the new and shiny with little attention paid to the flexibility or portability of the experience, or browsers well past their expiration dates.

Thanks for reading. Now go buy some t-shirts.

Full Stop Avatar

Jay Fanelli and Nathan Peretic are the co-founders of Full Stop, a web design and development shop in the City of Champions: Pittsburgh, Pennsylvania. They blog at http://www.fullstopinteractive.com/blog.

This is part of a series of guest posts on web typography. Today’s post was written by Josh Brewer of Twitter.

As 2010 came to a close, I had the privilege of working on Twitter’s Year in Review. I took the opportunity to experiment with typographic choices that could shape the design and message of each post. During the process, I was reminded that everything we do on the web should degrade as gracefully as possible. Even if the desired fonts are not available, the fallback experience should convey the spirit of the design and support the intended message.

In preparation for this article I created a simple website for a fictitious company, HRDWRKCO.

Screenshot of HRDWRKCO

While there are times when designing in the browser is the right way to start a project, I have found that properly setting your type in Photoshop (or your preferred design software) will save you time in the long run. You will have already done the difficult work of determining font-size, line-height, and letter-spacing, and you will have addressed how the text will relate to other elements on the page.

Pairing fonts

From the beginning, I knew that I wanted HRDWRKCO’s main quote (by Phillip Glass) to be set in Quatro, an ultra black display face with some beautiful details (just look at that “K”). Choosing the right font to pair with Quatro required a bit more thought. I wanted something lighter, slightly condensed, yet still legible.

Initially, I looked at a few of my go-to condensed fonts like Proxima Nova Condensed and Meta Web Pro Condensed. But neither of these quite fit the style and contrast I was looking for; that’s when I discovered FacitWeb. FacitWeb is a strong sans-serif with a large x-height, open counters, and a slightly condensed style, especially at the lighter weights. Certain letterforms echoed the unique style of Quatro, while others provided just the right amount of contrast.

Together, FacitWeb and Quatro made a great pair; but what about the fallback scenario?

Finding the right fallback fonts

As challenging as it can be to combine the right fonts, finding a the right fallback fonts can be even harder. Fortunately, the folks over at Code Style have surveyed fonts across different platforms and assembled a list of dependable web safe fonts. They keep this list up-to-date — it’s a great resource for anyone designing on the web today.

Code Style reports that the heavy sans-serif Arial Black is installed on more than 98% of Windows systems and 95% of Macs. With that knowledge in hand, I jumped over to Photoshop and copied the text set in Quatro, changed the font to Arial Black, and overlaid the two for comparison. I was pleasantly surprised to see how well Arial Black worked as a fallback.

Overlay of Quatro and Arial

Using this overlay approach allowed me to directly compare the line-height and spacing, as well as the letter-forms of the two fonts, and quickly see if anything felt out of place. While Arial Black doesn’t have some of the personality and uniqueness of Quatro, the overall shape of the letterforms was similar and it reinforced the tone set by Quatro: sturdy, dependable, and hardworking. I felt confident that even if Quatro wasn’t displayed, the fallback font choice would still convey the spirit of the design.

I then repeated the same process for the body text. I ran through the default set of sans-serif fonts. Arial could have worked, especially in conjunction with it’s heavy cousin, but it lacked the character I was looking for. Verdana — especially at smaller sizes — is certainly an excellent fallback. However, Verdana is quite wide, and at this size, it did not provide the contrast I was looking for. Then I took a look at Tahoma, and using the overlay technique again, I was able to quickly identify that it had very similar letterforms and the condensed feel I was looking for. Tahoma made for the best fallback choice for FacitWeb in this instance.

Don’t forget mobile

Typekit works hard to serve web fonts on mobile browsers. Currently, there is support for Mobile Safari on the iPad and iPhone/iPod Touch (4.2 and higher), as well as on Android devices (2.2 “Froyo” and higher). However, it’s important to note that the basic set of fallback fonts we have grown accustomed to on the web are not always available on these devices.

iOS Fonts is handy resource for identifying which fonts are installed on iOS devices. For Android devices, there are three default system fonts — Droid Serif, Droid Sans, and Droid Mono — which you can use as fallback fonts. Given that, my font stack looks something like this:

font-family: "quatro-1", "quatro-2","Arial Black", Verdana, "Droid Sans", sans-serif;

Diving into the markup

Once the font stack was settled, the next step was to mark up the page and set the text. I knew from past experience that Lettering.js was the tool of choice to give me the control I needed to bring this layout to life. (To get up to speed on Lettering.js, check out Trent Walton’s post or the Lettering.js website). First, I marked up the quote:

 
<blockquote class="glass" cite="http://www.netflix.com/Movie/Glass-A-Portrait-of-Philip-in-Twelve-Parts/70081091">
  <p>You get up<br>early<br>in the morning<br>&<br>you work<br> all day<br> That’s the only secret</p>
</blockquote>

Next, I wired up the JavaScript so that Lettering.js could do its magic. Lettering.js has options to wrap by line, by word, and by character. I am using each of these options where needed in order to achieve this layout.

$(document).ready(function() {   
  // Lettering.js
  $(".glass p").lettering('lines');      
  $('.line1').lettering('words').children('span').lettering();
  $('.line2').lettering(); 
  $('.line3').lettering('words');
  $('.line5').lettering('words').children('span').lettering();
  $('.line6').lettering('words').children('span').lettering();
  $('.line7').lettering('words');
  $("h1 span.brand").lettering();     
});

At this point, I began to work line by line, word by word, to kern a few of the letters that needed it.

A few tricks up my sleeve

The :before and :after pseudo-selectors are essential in bringing a few of the finishing touches to life. In the masthead, we have the company’s word-mark, which is also set in Quatro. In order to achieve the effect on the “o” in “Co”, I used Lettering.js to target the letter “o”, adjust the font-size, and align the top of the letter to the cap-height. Then, using the :before pseudo-selector, I added a small border that was positioned absolutely and aligned to the baseline. Voilà!

h1 .brand .char8:before {
  background: white;
  content: "";
  height: 5px;
  width: 17px;
  position: absolute;
  bottom: 1px;
  left: 6px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
  

Then there is the treatment of the ampersand in the middle of the quote. In the past I would have used a background image and an extra span to achieve this effect. However, using the :before and :after pseudo-selectors we can create borders on either side of the ampersand with just a few lines of CSS:

.glass .line4:after {
  content: "";
  border-top: 8px solid rgba(255,255,255,0.6);
  top: 20px;
  left: -1px;
  width: 190px;
  position: absolute;
  z-index: -1;
}

.glass .line4:before {
  content: "";
  border-top: 8px solid rgba(255,255,255,0.6);
  top: 20px;
  right: 0;
  width: 190px;
  position: absolute;
  z-index: -1;
}
  

Once I had set all the text, it was time to focus on the fallback font styling. Fortunately, Typekit worked with Google to create font events. Font events give you control over how your site is displayed while fonts are loading or when they are inactive by adding a class to the html element. I quickly added the “Toggle fallback font” button and wired it up with one little bit of jQuery goodness:

$(document).ready(function() {  
  // Fallback toggle button 
  $(".fallback-flip").click(function(){
    $("body").toggleClass("wf-inactive");
  });      
});
    

This allowed me to quickly see how the fallback font stack would render. By having a simple button that toggled the .wf-inactive class, I was able write all the CSS needed to make sure things rendered correnctly in case Quatro and FacitWeb didn’t load.

Check out the demo and give it a spin! I hope this example gives you a taste of what is possible, as well as some practical techniques that inspire you to push the boundaries with web fonts.

Avatar for Josh Brewer

Josh Brewer is a designer at Twitter and co-author of 52 Weeks of UX.

This is part of a series of guest posts on web typography. Today’s post was written by Frank Chimero.

Workers of the web are familiar with establishing a hierarchy through markup by using tags like <h1> and <em>, but what of the aesthetics of it? On the web, a large chunk of our content is text. This means it’s important to understand how to reinforce this hierarchy typographically. A clear understanding of hierarchy results in more beautiful, meaningful, and communicative designs that better serve their audience.

I’m going to address these concepts with an example that slowly builds complexity by introducing new visual elements. With each step I’ll add a new tool to support the hierarchy. I think you’ll be surprised to learn how much of this behavior is native, and how flexible the solutions can become as more tools are added.

Text referring to an event, with all lines set in the same font and size
Fig. 1

To begin, I’m not using any typographic devices to establish the hierarchy: it’s all one typeface in one size and weight (fig. 1). The only thing communicating hierarchy is the order in which the text is presented. This isn’t realistic for most design work, but it’s a great place to start.

The same text, broken up into four chunks
Fig. 2

Above we have the same typeface and type size, but we’ve started to introduce some clarity to the information by chunking it into logical groups (fig. 2). Again, we’re establishing hierarchy by the order in which the text is presented.

The same text, but reordered and with the headline set in bold
Fig. 3

Next, let’s emphasize the most important element with a weight change (fig. 3). Notice that when we have at least two graphic devices working, we no longer need have to have our most important piece of information on top in order for it be read first. Above, “Design Lecture Series” and related text has moved to the top to serve as an umbrella for the content below: it’s descriptive meta-content that describes the whole, but it’s not the most important text.

Again with the same text, this time with the headline enlarged
Fig. 4

Next, we introduce a new type size to the hierarchy (fig. 4). The increased size shows the reader where to begin reading. Varying the vertical spacing provides a bit more structure.

The same text again, with the main headline enlarged and moved to the left
Fig. 5

Now let’s add some variety by varying the alignment and spacing, and introducing multiple sizes and weights (fig. 5). The overall trend has been to increase contrast: we use tools such as weight and size to emphasize the most important content, while simultaneously employing those same devices to make the subservient content recede.

The same text, with color and revised layout
Fig. 6

Next comes color, which we are using to guide the eye around the composition (fig. 6). Above, graphic elements (such as lines and shapes) are also added to emphasize certain blocks of content. Largely, the same rules that applied to the type also apply to these elements: color and heavier weight denote greater importance. We can also balance the composition with graphic elements by creating directional tension (pushing left versus pushing right) and by creating tension with the edge of the page by bleeding off. All together, the effect first brings your eye in, then takes it logically to nearby elements, then lets it jump to other areas by following the color around the composition.

In practice, proper typographic hierarchy surfaces at the micro-level—inside of the smaller, building-block elements of a design—and at a macro-level—the design of the full page. Let’s look at some real-world examples.

Detail of New Yorker site
Detail from newyorker.com

The New Yorker’s featured article carousel manages a basic micro-level hierarchy issue: imposing a structure to title, author, description, and meta content. Here, the hierarchy is established through two different typefaces and changes in size and color. Note how the meta content is placed on top even though it’s less important than the title: the hierarchy is communicated through manipulation of the size and color of the text.

Detail of Creative Mornings website
Detail from creativemornings.com

On the Creative Mornings website, a simple hierarchy challenge is multiplied four times over. Clarity is added by color-coding each city, and complex information is chunked together. Inside each chunk of content, a hierarchy is established with size and weight, as well as graphic elements. The most pressing information, that of the upcoming lecture, is reversed out on a color field to give it the highest importance. Type size is also used to establish hierarchy, and a typeface change is implemented to emphasize more important information, such as the speaker name. Variable spacing is also used to deemphasize the “More Info” links below the lecture details. Pertinent information about the event organizer is given the lowest priority by being placed at the bottom with the least amount of contrast. (Although, hierarchy still exists in this block by setting the organizer’s name in bold and setting their title with a smaller, all-caps treatment.)

Screenshot of awritings.com
Detail from awritings.com

José Manuel Riveros’ awritings.com makes great use of hierarchy on the layout level. The two columns, as typical on the web, have widths to match their importance: dominant content in the wider column, supporting content in the narrow column. But inside each column, titles, sub-titles, metadata, and content merge with design elements such as rules to reinforce the hierarchy. Most changes between the styling of text feature only one or two modifications—such as change of size, weight, or color—but by handling these modifications in a smart fashion, the hierarchy is clear while remaining simple and pleasing.

Proper hierarchy is a foundation for excellent type, whether on the screen or the page. I’d suggest that most great examples of fine typography are merely designs that have wise typeface choices, savvy use of space, and a clear hierarchy that’s echoed through the structure and presentation of the text. Communicative, fine typography is of the utmost importance, and it is encouraging to think that by understanding a few simple precepts and their thoughtful application, clarity in communication is within anyone’s reach.

Avatar for Frank Chimero

Frank Chimero designs and draws, writes and thinks. He makes pictures about words and words about pictures. He is working on a book entitled The Shape of Design.