Beautiful Typography with Twelve Fonts: Working the Constraint

The meeting happens on every project. The brand team presents guidelines built around a gorgeous proprietary typeface: licensed, distinctive, the visual voice of the institution. The web team explains what the web offers. Georgia, Verdana, Arial, Times: the short list of faces reliably installed on visitors’ machines.

Somewhere in the silence that follows, every web design negotiation begins. Ten years into the web’s typographic drought, it is worth writing down how we navigate that meeting. Our answer has become unfashionable, and we think it is right.

Why the constraint exists

The mechanics, for anyone who has wondered. A web page can request any typeface it likes, but the visitor’s browser can only render fonts installed on the visitor’s machine. Your beautiful licensed face lives on your designer’s machine, not your reader’s. The stylesheet’s font request falls through to whatever is there, which is why the dependable palette is the dozen-odd faces Windows and Mac ship by default.

CSS has long specified a mechanism, @font-face, for delivering fonts with the page. But browser support collapsed years ago amid a fight the type foundries won. Fonts are licensed software, and delivering one to every visitor is, from the foundry’s view, distribution without a license. The technology stalled on the business problem. More on the recent flicker of change below.

The workarounds, and the toll each charges

• Image headlines. Set the heading in the brand face, export a picture of it, place the picture. The toll: text that cannot be selected, searched, or resized. It cannot be translated, and assistive technology cannot read it without diligent alt text. A production step on every heading forever. And a workflow where editing a title means opening Photoshop. For a CMS-driven site, which is to say our entire practice, this scales somewhere between badly and not at all.

• sIFR. The cleverer workaround. JavaScript swaps headings with small Flash movies rendering the licensed face, with real text preserved underneath. Genuinely ingenious, defensible in narrow use, and we have shipped it. But the toll accumulates: a Flash dependency (readers of our iPhone notes will see where that is heading), rendering flicker, maintenance surface, and performance cost per heading. We have come to regret it on more than one project as the exceptions multiplied. sIFR is a garnish that keeps getting asked to be a meal.

The unfashionable answer: craft within the constraint

Here is the position we bring to the meeting now, with portfolio evidence behind it: typographic quality on the web lives overwhelmingly in decisions the constraint doesn’t touch.

Hierarchy: sizes and weights that make the page’s structure legible at a glance. Measure: line lengths in the comfortable reading range instead of spanning the monitor. Leading: line spacing generous enough to breathe. Whitespace, contrast, and restraint in the number of sizes and styles per page.

Georgia, set with care, reads beautifully. It was designed for screens by a master and it shows. The same Georgia set carelessly, in cramped lines at arm-span measure, reads like the web’s reputation. The typeface was never the variable that mattered most.

Run the test on the sites you admire. Strip away the brand faces in your mind and notice that the reading experience survives, because it was built from spacing and hierarchy, not from letterform exclusivity. Then run it on the sites that license everything and grid nothing.

The brand team’s goal, a site that feels like the institution, is achievable within the dozen faces. The visitors who never see the brand deck will never know what the headings ‘should’ have been. They will just find the site unusually pleasant to read, which is the brand impression that counts.

A working palette

Because the constraint reads grimmer in the abstract than at the workbench, the pairings we actually reach for. Georgia for reading text remains the quiet champion: screen-designed, warm, gracious at paragraph sizes. Arial or Helvetica carries interface elements and headings where a cooler voice suits.

Verdana, built for tiny sizes, still earns its keep in captions and dense navigation, though set large it sprawls. Trebuchet brings personality where personality is wanted. Lucida’s variants offer a different texture for institutions wanting distance from the defaults. And Times, poor Times, mostly signals ‘nobody made a decision here,’ which is itself a reason to make one.

Two families per site, three at the outside. One for reading, one for interface, deployed with the size-and-weight discipline above. The palette is small. The permutations, handled with care, are not.

One craft habit that elevates any of these choices: attend to the vertical rhythm. Consistent spacing between headings, paragraphs, and lists is the difference readers feel as ‘polished’ without ever naming it. A deliberate scale beats per-element improvisation. It costs a morning in the stylesheet and nothing thereafter. And it is available today, in every browser, license-free. Most of typography always was.

The flicker worth watching

Now the forward-looking note, filed with appropriate caution. Safari 3.1, released in March, quietly shipped working @font-face support. That is the first mainstream revival of font linking in nearly a decade, and the CSS working group’s discussions suggest others are circling.

The technology question is answering itself. The licensing question remains unsolved. Foundries have not changed their view of distribution, and openly licensed faces are still a thin catalog. But the direction has visibly shifted from ‘never’ to ‘eventually.’

And eventually has planning implications now. Keep your markup semantic and your typography in the stylesheet, and the day real web fonts arrive with licensing to match, adopting them is a CSS edit. Not a rebuild, not a Photoshop archaeology project. Sites built on image headlines will re-set every graphic. Sites built on styled text will change one declaration. Same future, very different invoices.

What we tell the brand team

So the meeting ends like this, more often than not. The licensed face lives in print, the logo, and perhaps a few sIFR’d display moments if the case is strong. The site’s working typography is built from the dependable palette, set with the care the brand actually deserves. And the markup stays clean against the day the constraint lifts, which, for the first time in our careers, we can say may be genuinely coming.

Patience, plus craft, beats hacks. It is not the answer that demos best in the meeting. It is the one that reads best for the next five years, and reading is what typography is for.