A List Apart

CSS @ Ten: The Next Big Thing

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.

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:

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.):

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.):

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:

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:

“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:

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!