A Guide to Webfonts and Typography

We’ve come a long way with web typography since the dawn of the Web. As web typography improves, web designers want the same level of control that print designers have. Designers want more options than just Verdana, Helvetica and Georgia, and they want all the control Photoshop or Illustrator affords them. So how do designers and developers work together to achieve this?

We’ve Grown a Lot Since the Beginning

For the early developers and web designers, the only way to re-create beautiful typographic designs was to cut images – PNGs, JPGs, etc. – and put them on your web page. Otherwise, we were limited to the very few basic web-safe fonts that came standard on computers of the day. This method posed many issues, as an image once made is not editable, not responsive nor particularly reusable. File sizes can be large, and images render text unsearchable, unselectable and unzoomable. A few years later, another approach that developed was to replace fonts with vector graphics, using JavaScript such as Typeface.js and Cufón. But again, this technique created problems with search engines and zooming.

Then, eight years ago, A List Apart published “CSS @ Ten: The Next Big Thing,” in which Håkon Wium Lie described the @font-face declaration and pushed for webfonts to be supported by browsers. Today, browsers support webfonts, and with the power of CSS we can make these fonts work for both developers and designers. Clients can now keep their branding alive in a digital setting without all the limitations of the past. We now have thousands of webfonts with which to work, and font services such as Typekit or Google Fonts hold the promise of making even more options available in the future. It’s no surprise that sites with custom fonts have grown 230% in the past 12 months alone.

So What’s a Webfont Anyway?

Desktop fonts usually come with a wealth of options included – weights and OpenType glyphs, for example – as well as many legal use restrictions. Webfonts, however, are fonts that have been licensed specifically for web use, only exist as code and are optimized for use on web pages using the @font-face declaration. They can be combined into “kits” that contain only the specific weights and special characters you need, in order to load and display quickly. Webfonts can be hosted on your site or downloaded from a service. You’ll need multiple font formats to support both modern and legacy browsers.

This example illustrates what your CSS code for @font-face embedding might look like:

@font-face {
   font-family: Gotham; src: url(Gotham.eot'); /* IE9 Compatibility Modes */
   src: url(Gotham.eot?') format('eot'), /* IE6-IE8 */
   url(Gotham.woff') format('woff'), /* Modern Browsers */
   url(Gotham.ttf') format('truetype'), /* Safari, Android, iOS */
   url(Gotham.svg#svgGotham ') format('svg'); /* Legacy iOS */
}

Webfonts enable your website to display searchable, editable, resizable, dynamic HTML text in a font other than the handful of “web-safe” options we’ve had to rely on for years.

Tips for Choosing Webfonts

Test-drive your font choices and look at them in context. Most webfont providers allow you to preview the font in a sentence or paragraph. Test at the sizes and fonts you think you want, and make sure legibility survives.

Screenshot of Google Fonts preview screen

 

Second, if possible, use the real webfonts in your designs. Creating Photoshop mock-ups with a different desktop-only version of the font will not accurately portray what the real thing will look like once it is on the Web. The slight variations might render unexpected differences. If you are using a service such as MyFonts, Fonts.com, Font Squirrel, Google Fonts or others, each typically provides free access to desktop (or “mock-up”) fonts for subscribers.

Third, test cross-browser. Fonts can render differently, even if only slightly, in weight or letter spacing, depending on the combination of operating system, browser and screen size. Some services will show you screenshots of their fonts in different browsers. Take advantage of this to relieve unexpected headaches along the way. To see a difference, view the example below:

Screenshot showing how a font appears in two different browsers. One version appears to be washed out.

Gaining Control with CSS3

So these webfonts we have loaded in your site…now…what else can we do with them? Initially, we can use media queries to provide different-sized fonts for different devices and reading distances to improve the legibility of designs. We can also use the power of CSS to control paragraph proportions using font size, letter spacing, line height, etc. To play with these features yourself, try Universal Typography’s tool. We can also use OpenType features such as alternate letters, ligatures and small caps. CSS to include these would look like:

/* Alternate characters */
-webkit-font-feature-settings: "ss01";
-moz-font-feature-settings: "ss01" 1;
font-feature-settings: "ss01";

/* Common ligatures (ff, fi, ffi, fl, ffl, fj, …) */
-webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga" 1; font-feature-settings: "liga";

/* Small caps */
-webkit-font-feature-settings: "smcp";
-moz-font-feature-settings: "smcp" 1;
font-feature-settings: "smcp";

However, with CSS3 we can do even more. We can use transforms and text shadows to create effects such as this, in fully selectable and editable type:

Logo for a comics store called Secret Footquarters.

Example from: http://practice.typekit.com/lesson/using-shades/

For this effect, the CSS would be:

text-shadow: 0 0.005em #2d3958, 0.005em 0 #2d3958, 0.005em 0.01em #2d3958,
0.01em 0.005em #2d3958, 0.01em 0.015em #2d3958, 0.015em 0.01em #2d3958,
0.015em 0.02em #2d3958, 0.02em 0.015em #2d3958, 0.02em 0.025em #2d3958,
0.025em 0.02em #2d3958, 0.025em 0.03em #2d3958, 0.03em 0.025em #2d3958,
0.03em 0.035em #2d3958, 0.035em 0.03em #2d3958, 0.035em 0.04em #2d3958,
0.04em 0.035em #2d3958, 0.04em 0.045em #2d3958, 0.045em 0.04em #2d3958,
0.045em 0.05em #2d3958, 0.05em 0.045em #2d3958, 0.05em 0.055em #2d3958,
0.055em 0.05em #2d3958, 0.055em 0.06em #2d3958, 0.06em 0.055em #2d3958,
0.06em 0.065em #2d3958, 0.065em 0.06em #2d3958, 0.065em 0.07em #2d3958,
0.07em 0.065em #2d3958, 0.07em 0.075em #2d3958, 0.075em 0.07em #2d3958,
0.075em 0.08em #2d3958, 0.08em 0.075em #2d3958, 0.08em 0.085em #2d3958,
0.085em 0.08em #2d3958, 0.085em 0.09em #2d3958, 0.09em 0.085em #2d3958,
0.09em 0.095em #2d3958, 0.095em 0.09em #2d3958, 0.095em 0.1em #2d3958, 0.1em
0.095em #2d3958, 0.1em 0.105em #2d3958, 0.105em 0.1em #2d3958, 0.105em 0.11em
#2d3958, 0.11em 0.105em #2d3958;
transform: rotate(-9deg);

It looks complicated, but the reality is that with modern CSS processors such as SASS or LESS, you can create mixins and variables to make building the CSS easier.

We can also create drop caps, flipped and rotated type, gradients, borders and more that create beautiful results in the most modern browsers. Going even further, with JavaScript plugins such as Lettering.js, we can even achieve down-to-the-letter control. Start with a simple title such as:

<h1 class="fancy_title">Fit to Scale</h1>

Then add the JavaScript to target the title’s class:

<script>
  $(document).ready(function() {
    $(".fancy_title").lettering();
  });
</script>

JavaScript magic happens, and you get individual letters surrounded with spans as a result:

<h1 class="fancy_title">
  <span class="char1">F</span>
  <span class="char2">i</span>
  <span class="char3">t</span>
  <span class="char4"> </span>
  <span class="char5">T</span>
  <span class="char6">o</span>
  <span class="char7"> </span>
  <span class="char8">S</span>
  <span class="char9">c</span>
  <span class="char10">a</span>
  <span class="char11">l</span>
  <span class="char12">e</span>
</h1>

You can then take these and manipulate the CSS of each letter to achieve results like this:

screenshot of website showing Fit to Scale

Example from: http://trentwalton.com/2011/05/10/fit-to-scale/

As you can see, with the power of CSS3 and the availability of webfonts, we can now take typography on the Web much further than ever before. As CSS improves in the coming years and more browsers support more effects, the options will soon be extensive. Developers can now work with designers to create those beautiful typographic designs that enhance client branding yet still maintain accessibility, responsiveness, reusability and quick rendering.

Resources

Meaningful Microinteractions