@craigmod

@font-face — what it is exactly?

B @font-face is a CSS rule implemented in Firefox's latest 3.5 browser release. It allows web designers to reference fonts not installed on end user machines.

(NOTE: John Daggett has written a lovely primer article on @font-face. It serves as a fine reference into the nitty gritty of @font-face implementation and usage.)

Fine typography has always been one of the stumbling points of web design. Limited at most to a handful of cross-platform specific fonts, web designers have often found it necessary to hack their way into typographically nuanced territory. Technologies such as sIFR and Cufon utilize Flash and Javascript techniques to achieve typographic variety, but often at the expense of clumsy technological implementation. @font-face brings with it the hope of a standard, cross-platform, cross-browser, lightweight method for referencing font-files not found on end users' computer. In other words: it allows web designers to store fonts on their server and reference them in CSS, regardless of what fonts the user browsing the page has installed.

Trying to bring taste and skill into a branch of artistic endeavor which had sunk to the lowest possible depths.

— Dorothy Abbe

Achieving nuanced type with @font-face

D By focusing on the true basics of typography: font-size, line-height, font-variant, column width, and letter-spacing, one can create truly stunning effects using @font-face.

Here's a list of universally available, fundamental CSS properties upon which great typography can be constructed:

This demo page uses these CSS properties in combination with smart @font-face choices to create a nuanced layout. Some combinations and tricks we find particularly useful include:

Small caps

• When applying small-caps via the font-variant property, it's often more visually appealing to also apply text-transform: lowercase or uppercase to the block. This ensures uniform visual weight independent of who or what generates the text. Also, depending on the font in question, you should take time to track the letter-spacing out an appropriate amount.

first-line Pseudo Element

• Using small-caps on the first line of a new section is a fairly classic typographic standard. The above small-caps notes work great in combination with the first-line pseudo selector.

Text Decoration

• CSS offers the ability to overline or underline text using the text-decoration property. Unfortunately there's no control over the distance between the text and the decoration. The CSS border attribute allows for more control while achieving a similar decorative result. When you use border in combination with padding, you can control precisely how close the visual effect is to your text.

By mixing a well-considered selection of fonts with the above CSS properties and thoughtful semantic markup, you can achieve beautiful, nuanced results.

Nothing exceeds like excess.

— Ed Fella

Most of all it's about taste and restraint. Great typography is built on choosing the right family of typefaces for the job.

What we'd like to see added

A Here are some typographic controls we'd love to see implemented in the CSS specifications:

Baseline-shift

• It's sometimes necessary to nudge the baseline of certain glyphs in a line. We'd like to have control over this as a CSS attribute and to be able apply it selectively through span tags and classes.

Hyphenation

• Having granular control over hyphenation would instantly and drastically change the perceived visual texture of online typography. (You can read about the current state of the hyphenation specification on the W3C homepage.)

Numeral selection

• Most contemporary typefaces are offered with both lining and non-lining numerals. Having access to these alternate characters would be great.

And more wistfully …

• We'd like to see more control over OpenType-specific features such as contextual alternates, fractions and swashes.

The fundamentals

• We'd much rather see a solid, well-considered implementation of hyphenation than any more drop-shadow controls. We implore those producing the CSS specifications to consider pushing for strong, consistent implementations of these less flashy, fundamental typographic building blocks.

It just so happens that the implementation of some of the above advanced font CSS features and more are presently being discussed on the W3C mailing list.

Where are the fonts?

C The main issue foundries have with @font-face is that it exposes the files containing the font data for anyone to download. There’s no digital rights management currently associated with the way @font-face works. Foundries currently only have two options: to blindly trust that professionals will pay for their fonts even if they are openly accessible. Or to wait for some DRM solution to shield the font files from restricted access.

Web designers are clamoring for an elegant solution they can begin to implement that doesn’t break EULAs. We see this as a tremendous opportunity for small foundries that have the guts and foresight to take a chance — dare to trust professional users and change their EULAs. If foundries are truly worried about piracy, perhaps glyph-limited web specific editions of some of the faces is a viable, stop-gap solution.

Most recently, Typekit has made waves in the online design industry by announcing a solution to the @font-face piracy problem. You can read more about this on their blog. Judging by the sheer number of comments, the foundries that move into this market early stand to profit greatly.

Piracy will always be a problem but foundries that provide a simple, easy path to legal font usage will have a big competitive advantage.

Closing remarks

E Until now we've lacked access to an elegant, widely implemented technical solution for referencing font files in CSS. We urge designers, agencies, foundries, distributors and misfits alike to review the possibilities that @font-face offers. Exciting things are afoot in the online typography world — we're on the cusp of a convergence between the nuance of print typography and the dynamic nature of the web. A universal, strong implementation of the @font-face rule has opened the floodgates for foundries to find ways to embrace this emerging market. We may still be stuck with Verdana and Georgia for the meantime, but hopefully not much longer.

The Discussion

Got something to add? Join in on the @font-face discussion over at mozilla.org.