A List Apart

Menu
Issue № 244

CSS @ Ten: The Next Big Thing

by Published in CSS, Typography & Web Fonts · 117 Comments

A note from the editors: This historically important article, while now outdated, predicted the age of web fonts.

CSS is ten years old this year. Such an anniversary is an opportunity to revisit the past and chart the future. CSS has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look right—and CSS3 proposes additional properties requested by designers.

Article Continues Below

Many CSS properties, both old and new, deal with text: they describe text color, position, style, and direction. This is all very good—after all, text fills most of our screens. But in order for properties to reach their full potential, we need a good selection of fonts. And fonts are sorely missing from the web.

Consider the fine designs in the CSS Zen Garden. What makes them so exciting to look at? In part, it is the variety of fonts. Fonts convey design messages and create effect, and while in traditional print design there are a plethora of fonts available, fonts have been in limited supply on the web. Web designers depend on ten or so universally available fonts for their designs, and are reduced in large part to using Verdana and Arial over and over again. A typical CSS Zen Garden design, on the other hand, uses a hand-picked font to render text and aligns the glyphs to a pixel-perfect degree…and then uses that text as a background image.

A background image!

There are many reasons why background images should not be used to convey text. Images are expensive to transmit and hard to make. Imagine trying to translate a web page into 15 languages and having to produce a set of images for each language. Additionally, the quality of printed web pages suffers as images don’t scale to the resolutions offered by modern printers. Using background images is currently the only way designers can use their favorite fonts on the web. But shouldn’t web designers have access to a wider selection of fonts and be able to use them without having to resort to creating background images?

There is a way: web fonts. Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.

A brief history of web fonts

This is not a new idea. In 1998, CSS2 described a way to link to fonts from style sheets, and both Microsoft and Netscape added support for web fonts in their browsers. However, neither vendor supported the most widely used font format, TrueType. Instead, they each picked a different, little-used format with few tools to support it (EOT and TrueDoc, respectively). And so web fonts disappeared from the designer’s toolbox.

Better news

It’s a pleasure for me to announce that web fonts are back! Here are some recently generated examples that show how a familiar document can be rendered when TrueType web fonts are available:

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

The PDF (and image) examples shown in this article have been produced by Prince 6, a web-to-PDF-through-CSS renderer. (The Macintosh version must be installed via Terminal. Instructions are included in a ReadMe file. —Ed.) Prince is currently the only program that supports TrueType web fonts, but it provides the proof of concept we need to begin thinking seriously about web fonts—and to begin advocating for their implementation in common web browsers. Before we get to that, though, let’s take a look at the code beneath these examples.

(Disclosure: I’m on the board of YesLogic, the company behind Prince. Being on the board is a neat way of pushing for your favorite features to be implemented.)

The examples are coded in HTML and CSS only; no images are involved. CSS3 multi-column layouts and rounded borders have been added for good measure, but they are not essential to the designs. Each example uses four different web fonts. The style sheets point to web font files which are fetched before the documents are rendered.

Web fonts: the code you’ll use

Here is a simple example of how to use web fonts (Line wraps marked » —Ed.):

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/ »
  kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Those familiar with CSS syntax will recognize the last line. The@font-face construct may not be familiar, however it’s easy to explain: as the “Kimberley” font is requested, the font file is fetched from the specified URL. The syntax is described in the CSS2 specification.

To avoid long lists of @font-face declarations in the style sheet, they can be hidden using @import (Line wraps marked » —Ed.):

@import url(http://www.princexml.com/fonts/  »
larabie/index.css) all;
h1 { font-family: Goodfish, serif }

The TrueType files used in the examples above are designed by Ray Larabie. He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.

Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use. Below are some examples that use his fonts:

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Getting more complicated

When browsers start supporting web fonts, designers will be tempted to adjust more properties than just font-family. In the examples shown above, line-height, letter-spacing, word-spacing, and absolute positioning have been tweaked. This adjustment of other properties works well when the specified fonts are fetched from the web. However, it may have unexpected results in browsers that don’t support web fonts, and web designers should always be make sure their pages degrade gracefully.

The most obvious way to ensure graceful degradation is to specify a list of similar font families. For example, Ray Larabie’s “Primer Apples” is a charming, stitched font. You can see it used in this example:

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

“Primer Apples” has no obvious replacement in the list of fonts normally used on the web. However, the font metrics are quite similar to the ubiquitous “Trebuchet” font which can be specified as an alternative (Line wraps marked » —Ed.):

font-family: "Primer Apples", "Trebuchet MS", »
  sans-serif;

In a legacy browser without support for web fonts (or multi-column layouts or rounded borders), the second example will look like this:

Screenshot of web page without support for web fonts.

The stitching is gone, but the degradation is graceful.

A proposal to the W3C: a media query for web fonts

To further limit degradation, it would be useful to have a media query for web fonts. Consider this example:

h1 { 
   font-family: "Trebuchet MS", sans-serif;  
   letter-spacing: 0.1em; 
}@media all and (web-fonts: "truetype") {
  h1 { 
    font-family: "Primer Apples", sans-serif;  
    letter-spacing: 0.2em; 
  }
}

As a result of the media query in the example above, the actual letter-spacing will depend on whether web fonts are supported or not. It is also necessary to specify, in the media query, that support for TrueType is required. The “web-fonts” media query is not in the W3C’s current Media Queries specification and it has not been implemented by anyone. But it’s a great idea, and very doable.

What does this mean in the real world?

While Prince offers a neat proof-of-concept, common web browsers must also add support for web fonts in order for them to become the next big thing. So why haven’t they done so already?

The arguments against web fonts are mostly legal. Fonts are intellectual property and therefore, the argument goes, cannot be published on the web. Although the legal status of font shapes is uncertain, font names are probably covered by copyright law. As such, fonts are similar to copyrighted images and text. To publish copyrighted material on the web, you need permission from the copyright holder. There is a lot of text and images on the web because copyright holders allow it, even encourage it. Likewise, many font designers (including Ray Larabie and Dieter Steffmann, whose fonts I use as examples in this article) allow their fonts to be freely used on the web.

The best argument against web fonts, however, isn’t legalities—it’s aesthetics. Do we want to wade through web pages displayed in third-rate fonts put together by designers who once used the <blink> tag and created backgrounds with animated GIFs? Probably not. Once web fonts are available, make sure you use a browser in which author style sheets can be turned off. (Another disclosure: That would be Shift+G in Opera.)

Aesthetics also provide a strong argument for web fonts. There are many beautiful and interesting fonts that can improve aesthetics and increase visual variety on the web. Just as I am sometimes stunned by beautiful book designs, I want to be overwhelmed by beautiful web pages. And, I don’t want those beautiful pages to be made up of background images.

You can help!

Two things must happen before web fonts can take web design to the next level. First, we must ensure the validity of the approach. Is the subset of CSS2 that has been implemented sufficient? Do we like the CSS code? The best way to help is to play with the existing implementation and report back on your experience.

Second, we must convince browser makers to add support for web fonts. This can be difficult. Browser vendors have lots of specifications and well-intended improvement proposals to choose from. Some of them are also busy fixing bugs. In order for new functionality to make it onto the roadmaps, a compelling story must be told, and a critical mass of developers must voice their support. We can make it happen.

CSS has been around for ten years, and is likely to be around for another decade. Let’s finally give it some fonts to work with!

117 Reader Comments

Load Comments