*** From the Archives ***

This article is from March 16, 2001, and is no longer current.

dot-font: New Fonts for the Web

1

dot-font was a collection of short articles written by editor and typographer John D. Barry (the former editor and publisher of the typographic journal U&lc) for CreativePro.  If you’d like to read more from this series, click here.

Eventually, John gathered a selection of these articles into two books, dot-font: Talking About Design and dot-font: Talking About Fonts, which are available free to download here.  You can find more from John at his website, https://johndberry.com.

FontShop is the latest important type foundry to try its hand at making so-called “Web fonts,” or digital typefaces adapted to the constraints and vagaries of display on computer screens. Some of these typefaces are designed for dramatic or decorative use at large sizes; some are designed for reading as text. All of the typefaces in the FF Webfonts package were originally created for use in print, and have been carefully hinted so they’ll appear as clear and accurate as possible on screen.

This FontShop graphic depicts the difference between regular screen fonts (left) and specially hinted Web fonts (right).

Adapting Fonts Across Media

No screen adaptation of a typeface designed for use in print will ever be as effective as a font designed expressly for onscreen use. In creating a new font for the screen, the designer almost has to start from the bitmaps, as Matthew Carter has said, and work from them toward the outlines (which will be used at larger sizes and when the font gets printed). The usual procedure is just the opposite—and all the compromises are made in the hinted screen font rather than the outline forms.

I’ve seen some bizarre screen renditions of digital fonts, from the days when the manufacturers assumed that fonts onscreen were just tools for creating layouts that would ultimately end up on the printed page. The screen versions of some of Monotype‘s older fonts, for example, seemed designed to exaggerate the characteristics of the individual letterforms, so that they would be easy to identify even at small sizes—regardless of whether the different letters appeared consistent, or even looked like they were the same size. They served that purpose, but they looked like hell on screen. (Monotype later took exactly the opposite tack, creating painstakingly fine-tuned screen versions of some of its best-selling typefaces for Microsoft to use with its Windows operating system.)

FF Webfonts

FontShop has chosen an interesting selection of its original type designs—”thirteen of the company’s most popular FontFont(tm) typefaces,” according to its publicity material—for its first foray into Web fonts.

The FF Webfonts package includes 12 typefaces and a set of symbols.

As FontShop’s best-known typeface, FF Meta might seem a likely choice for the Webfonts lineup, but FontShop decided otherwise. The company did choose another of Erik Spiekermann‘s highly functional type families, FF Info, which has already proved itself in such places as the information signage at the Düsseldorf airport. FF Info Web is a narrow, straightforward sans serif typeface; significantly, it has an italic and a bold as well as the regular (“Normal”) design, which should let it adapt to the most basic style-changing propensities of Web designers and users. To complement it, in a way, there is FF Sheriff Web, also very narrow but with serifs, and also available in regular, italic, and bold (or Roman, Italian, and Bold, as its styles are whimsically named).

FF Sheriff Web Roman

The other text face in the bunch is FF Typestar Web, a squarish, nearly monospace typeface like a particularly clear sans serif typewriter face. Although it has no italic (only Normal and Black), it reads quite well in text at small sizes.

FF Typestar Web Normal

The display faces are FF Kosmik Web (which uses only one of the three slightly variant sets of letterforms available in the normal version of this popular informal face), FF Trademarker Web (a brutally bold slanted roman), FF Market Web (looks like the sort of semi-cursive lettering you might find in the meat counter of a local grocery, done by hand with a marker), and FF Droids Web (like a wiring diagram). Also included is FF Dingbats Web (actually, it shows up on my font menu as “FF Dingbest Web”), which as you might expect includes some useful arrows and a host of cleanly drawn generic symbols.

FF Market Web

FF Droids Web

Using Your Web Fonts?

FontShop suggests that “Anyone who surfs the Web will find that using FF Webfonts as their default browser typefaces improves the appearance of text on screen,” but I don’t think I’ll be switching from my current choice, Verdana. Verdana actually looks its best at small sizes, whereas each of these adaptations of print typefaces has to achieve a certain size before it’s really happy. When I tried substituting some of the more text-worthy Webfonts for my standard fonts and viewed FontShop’s own site, the fonts looked good; but other sites don’t necessarily spec their text sizes large enough to take advantage of these fonts. Sheriff appears huge, because of its enormous x-height, but since regular HTML doesn’t provide any control over leading, the lines are so closely spaced that I find them hard to read. (If I were using Sheriff in print, I would simply add a little bit of air between the lines. The fact that this is hard to do online is one of the major typographic failures of HTML.) Kozmik, on the other hand, looks very tiny.

FontShop’s suggestion notwithstanding, the purpose of most of these fonts isn’t to take over as the font of choice for your Web browser; it’s to give designers reasonably good-looking renditions of their favorite typefaces for use in designing Web pages. Nobody would expect you to set the default font in Netscape Communicator to Trademarker or Market, for instance. (Droids certainly gives a unique effect, though. Try it, just for fun.) But if you’re designing pages, you can reliably use FF Webfonts in your designs by embedding the fonts themselves in your page.

Embedding Fonts

Font embedding has been a contentious question for several years. Many type designers resist the idea of letting anyone pass their fonts on electronically, because it essentially means giving away their intellectual property: Fred Nerd buys one copy of Great Big Font No. 346 and uses it in his Web page, embedding it so anyone can download it and see the page the way he wanted them to see it; Mary Typedesigner gets one tiny royalty from that sale, and never benefits financially from the ever-widening ripples of her font’s use on the net.

But without being able to embed the fonts they use in a Web page, designers have no way of ensuring that viewers will see the intended typefaces. Unless the designers want to use nothing but Times, Courier, and Arial or Helvetica, they have to gamble on what fonts viewers will have on their systems. Even the Microsoft giveaways Georgia, Verdana, and Trebuchet aren’t on everyone’s machine.

This situation pits the interests of type designers against the interests of graphic designers. Of course, very often these are the same people, wearing different hats.

I don’t know the details of the licensing arrangements that FontShop has with the designers of the various FF Webfonts, but obviously they have worked out an arrangement that compensates type designers for letting graphic designers embed the fonts in their Web pages. (And in PDF files. This is a significant point, since PDFs give designers much more control over layout than Web pages do. Indeed, ultimately this may be where so-called “Web fonts” come into their own.)

Of course, embedding a font tacks one more bit of heft onto a Web page, adding one more thing to download and straining our fragile bandwidth that much farther. But fonts are small, and we only have to download them once.

Interim Solutions

I applaud any effort to make type on screen more readable. The more companies make Web fonts available, the better. It’s a long, tedious, time-consuming job to hint a font properly for the Web—especially if you fine-tune every bitmap by hand. The results are worth it, for the reader’s sake, but these efforts will never pay for themselves on the ledgers. It’s a conundrum, an awkward situation that may persist until the day when screen resolution increases dramatically—or until we’re reading nano-ink on smart paper, and not worrying about pixels anymore.

John D. Berry is a typographer, book designer, design writer, editor, and typographic consultant. He is a former President of ATypI, and he is the founder and director of the Scripta Typographic Institute.
  • anonymous says:

    Very interesting, at least to me (an avowed typograpy dilettante).

    I think the next breakthrough will be quantum fonts that change the content of the text if you look at them…

  • >
    Notice: We use cookies on our websites to give you a great online experience. If you keep browsing, we'll assume you're ok with this. For more information, see our privacy policy. By closing this banner, you agree to the use of cookies.I AGREENo