Two years of blood, sweat, and bezier curves. That’s what it takes to make your average font family. Two years of painstaking work in an under-appreciated and underpaid industry. Too many years to watch your pockets picked by an internet culture of open source, free distribution. It’s no surprise that @font-face scares the bejesus out of type designers. As a result, progress has been slow and attitudes more cautious about embedded type.

What is @font-face?

@font-face is a CSS rule pointing to server side font files. Instead of relying on system fonts, designers use whatever font they choose.

To the web designer, it means getting the desired look while saving hours that would have been spent setting up hacks and workarounds. To a type designer, it’s like handing your keys to a perfect stranger and hoping they won’t rob you blind.

Where will @font-face work?

• Safari 3.1
• Firefox 3.5
• Opera 10

What about Internet Explorer?

Microsoft has supported web embedding fonts ever since IE 4. Like everything with Microsoft, it’s not that simple. The more secure EOT (Embedded OpenType) format was being developed, but never really took off. The added complexity of creating an EOT file required a special tool (WEFT). It was a valiant effort to obscure font data and add a level of security. Many are still unconvinced, and wait for a better non-proprietary format. Until that time, the traditional TTF (TrueType Font) format and the newer OTF (OpenType Font) formats will not work in Internet Explorer.

Internet Explorers (6,7,8) make up around 40% of users, which means an alternate set of fonts and @font-face declarations, or you’ll be falling back to the font stack like usual.

How do you use @font-face?

1. Copy font file to your server
2. Define @font-face in CSS
3. Declare font in CSS

@font-face {
  font-family: MyFont;
  src: url(MyFont.ttf);
}

body {
  font-family: MyFont, sans-serif;
}

What about legal issues?

All major font foundries now append their End User Licensing Agreements to restrict web embedding. Nearly all commercial-use licenses do NOT give you @font-face permissions. From listening to the TypeCon 2009 Web Fonts Panel there appears to be a growing consensus that embedded opentype will emerge as the future of type on the web.

Fonts were not designed to mix and match. Sure, we can consult the Font Matrix and find an available font. But, tailored web safe typography has always been seen as a luxury. With the proliferation of desktop publishing software, computers are now preloaded with more system fonts than ever before. With greater choice comes greater control.

Where are we now?

There have been some great articles written about CSS font stacks. Designer’s know Gill Sans, Myriad, Tahoma, and Frutiger are not “Arial-based”. But, we live with it. We think that’s the best we can get. After doing some research, I’ve found there’s more than enough system fonts to have font styling the way you want it, without compromise. Below you’ll find a list of font stacks organized by the most popular typeface classifications.

Headline Font Stacks

1   Display Serifs (Delicate details. Best seen at large sizes)

font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;

2   Geometric (Low readability. Best seen large in short lines)

CAUTION: At best, 90–95% coverage over all systems. Drop back to Arial to prevent generics.

font-family: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;

3   Modern (High contrast. Thins may disappear at smaller sizes)

WARNING: At best, 70–80% coverage over all systems. Drop back to Transitionals (Georgia, Times, Times New Roman) to prevent generics.

font-family: Didot,"Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;

You may ask, “Where’s the slab serif stack?”. Besides Rockwell (50% on windows), there’s very little coverage. If you’d like to use them one, try one of the many font replacement techniques.

All stacks below guarantee best possible coverage (99%). This is an attempt to retain the same font styling on the most systems.

Sans– Serif Paragraph Font Stacks

4   Neo-Grotesque  (The granddaddy of sans serif. Even strokes, well balanced)

font-family: Corbel, Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", sans-serif;

5   Humanist (Slightly more varied strokes. Some serif features)

font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;

6   Set Small (Crystal clear at x-small. Looks great less than 11 pts)

font-family: Corbel, "Lucida Sans Unicode", "Lucida Grade", "Bitstream Vera Sans", "Luxi Serif", Verdana, sans-serif;

Serif Paragraph Font Stacks

7   Old Style (Unique historic character, often overlooked)

font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;

8   Transitional (The workhorses of the serif. Easy on the eyes. )

font-family: Cambria, Georgia, "New Century Schoolbook", "Century Schoolbook L", "Times New Roman", serif;

Monospace Font Stacks

9    Clear Code (The best monospaced fonts. Easy on a developer’s weary eyes)

font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;

10   I ♥ typewriters (Need I say more?)

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;

In my last article, “The Past and Present of Web Typography”, I’ve discussed alternatives to browser core fonts. Since font replacement for paragraphs is unrealistic, for the time being we have to make do with core fonts. If we’re forced to use these system fonts what sort of control do we have over setting them?

Web Typesetting Now

• Font Size (%, pixels, ems, pts)
• Limited Tracking (± 1 pixel)
• Leading (line height)
• Word Spacing

Web Typesetting of the Future

• @font-face (non-system fonts)
• Full justify w/ flexible spacing
• Accurate Tracking (to the decimal point)
• Consistent Leading (Baseline Grids)
• Ligatures (ex. Th, fi. fl, ff, ft, fh)
• Hyphenation and special characters *
• Fractions, super/subscript *

Print is dead. Did typesetting die with it?

For those migrating from the print world, you demand more control over typography. Progress in the web world is glacier slow much like getting a billion people to march in the same direction. It takes some major cajoling when even the best of us resist change. You may be surprised what tools are already available to the web typographer.

Tracking is “letter-spacing”

Tracking adjusts overall letter spacing. Letter-spacing may not be necessary in paragraphs. It’s often used in justified columns to even out spacing. Single pixel adjustments are the only way for cross browser support.

p {
  letter-spacing: 1px;
}

Leading is “line-height”

Leading (space between the lines) in CSS is called “line-height”. Small increments (.05) are accepted. Of course, the math is easier with round numbers. Traditionally, line height is set in ems.

p {
  line-height: 1.35em
}

CSS Font Stacks Explained

Think of the font stack as building in a fallback plan. Lets say you want to use Garamond on your website, but you know Garamond is installed on very few computers. If it doesn’t exist on your system, the runner-up takes its place, and so on. If no fonts are found, the browser default (serif, sans-serif, monospace) is called. As shown below, Georgia will be used if neither Garamond or “Times New Roman” is found. Note that fonts with multiple word names need to be enclosed in quotes.

p {
  font-family: Garamond, Georgia, "Times New Roman", serif;
}

Full Paragraph Style in CSS

p {
  font-family: Garamond, Georgia, "Times New Roman", serif;
  font-size: 100%;
  line-height: 1.3em;
}

Full Paragraph Style in CSS (Shorthand)

p {
  font: 100%/1.3 Garamond, Georgia, "Times New Roman", serif;
}

*php-typography (Also available in a wordpress plugin) enables more advanced typesetting options. Some of which include automatic hyphenation, special characters (…), em dashes(—), en dashes(1900–2000), fractions (½), superscript (3²) and many more.

How do you get the most out of paragraph text? Have any tips/tricks? Comment below.

The core four: Georgia, Verdana, Arial, and Times. Familiar to most, as the web safe fonts. All solid choices for maximum compatibility. Nearly all of computers show them accurately (as shown below).

Update: Type designer Rod McDonald provided corrections to my sloppy wiki-research.

Times New Roman

Being in the spotlight for just short of a century, Times New Roman became ubiquitous. Designed for the British Times newspaper in the early 30’s. It’s popularity in book publishing and wide use paved its way into the digital age.

Rod says: Times New Roman was originally designed for The Times of London by the renowned typographic historian Stanley Morison who employed Victor Lardent to do the final drawings. The fonts were produced by the British Monotype company.

Georgia

Matthew Carter is one of this generation’s most prolific and best known type designers. His work has changed the face of the web. Subtle variations in x-height, weight, and size makes it better suited for screen presentation.

Rod says: According to Matthew Carter, Georgia owes much of its design to the old British Scotch Romans and to his own Miller typeface. Carter made the serifs considerably heavier to ensure they would ‘hold up’ at small sizes on screen.

Verdana

Another Matthew Carter creation. This time a sans serif. Much like Frutiger. It’s exceptionally easy to read at small sizes.

Rod says: Matthew Carter’s Verdana is similar in design to Walter Tracy’s 1959 Adsans which was originally designed for use at very small sizes in the classified section of newspapers. Another influence on the design was Carter’s 1977 Bell Centennial, designed for use in US telephone directories.

Arial

The result of Microsoft’s prevalence, and of the original and ever popular, Helvetica.

Rod says: Arial was developed by Monotype for IBM in 1982. The design was based on the old Monotype Grotesque range and was originally called Sonoran Sans. In 1993 Microsoft asked Monotype to provide them with a TrueType sans for their new Windows 3.1 OS. Monotype reworked Sonoran Sans and renamed it Arial. Shortly after its release false stories began to circulate that Arial was simply a ‘knock-off’ of Helvetica.

Want to use another font?

With pressure from designers for more choice, developers have taken up the cause. As a result, font replacement was born. After a web page loads, HTML tags (usually headings) are replaced with either vector outlines or images taking on the dimensions, overlapping, and replacing the original heading.

The following are essentially workarounds as browser technology is slow to adapt and font foundries are weary of internet distribution and piracy. Font replacement on a large scale (body text) is unwieldily by its resource hungry nature. But, for headings, they work splendidly to enhance the look of your site. Here are a few of the most well known…

sIFR 2.0 (or sIFR 3beta), The most popular font replacement. In part, because it’s the only way for the heading to remain selectable. You need flash installed in your browser to see anything, and it’s notoriously difficult to setup. (requires Javascript and Flash)

FLIR or Facelift Image Replacement ( Pronounced fleer ) transforms type into an image. Because the result contains none of the original curve information, it allows you to bypass most EULA web embedding restrictions. The only drawbacks I’ve encountered have been its lackluster support for special characters (typographer quotes, em dashes, etc.), and loads a bit slower than the others. (requires Javascript and PHP)

Cufón is a no flash solution, like FLIR, but loads incredibly fast. Fonts are embedded into a javascript file where the outlines are extracted. Because of the possibility for reverse engineering, this method goes against many EULA agreements. Check your font’s fine print before using. (requires Javascript)

Typeface.js, much like Cufón, extracts and merges fonts into a javascript file. The main difference is that typeface.js only supports TrueType fonts, and detects file permissions. So, good luck for any font that isn’t free. (Requires Javascript)

Looking for a simple solution? Typekit uses CSS’s @font-face, hosting the font files for you (for a small membership charge). Choice is limited, however, as only a select few foundries participate. Implementation is as simple as pasting in a single line of javascript code. Because the fonts are securely hosted by Typekit, font stealing cheapskates will have to look elsewhere.

It’s a Step Forward, but…

In 5 years time, let’s all hope either Microsoft will get its act together with its EOT font format or there’ll be a web Opentype format that everyone agrees upon. But, until that date there’s many a workaround to employ.

Anything I missed to mention? Something to add? Please share below.