@font-face: The Potential of Web Typography

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

CSS:

•  text-decoration (overline / underline)
•  font-size
•  font-variant (small-caps)
•  text-transform (uppercase / lowercase)
•  letter-spacing
•  font-weight

CSS Pseudo Elements:

•  :first-line
•  :first-letter

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.