Article Entry

On the Use of Web Fonts and Typesetting on the Web

Typography and Readability

Authored by
Jose Riveros
Display Face
Museo Slab by Jos Buivenga
Text Face
Meta Serif Web Pro by Erik Spiekermann, Christian Schwartz and Kris Sowersby
Filed under:
Design
Typography
Web

Main Content

Now that we are on the cusp of a not-so-small revolution in how the web is designed with the advent of type services and tools that will allow anyone, not just designers or typographers, the ability to set a specific typeface of their choosing for any given web site or project, there are many members of the type profession who are collectively holding their breath out of fear of what may come in terms of typographical excess. And what they fear most is not the treasure trove of choice and not so choice typefaces that will be made available over the next several years. No, what is feared most is the amateur. This newfound period of uncertainty will remind everyone of that erstwhile sojourn of experimentation, crass contortions and for some, garbage. But, as the designer Ellen Lupton points out, as she references the book Typography Now Two by Rick Poyner:

Ellen Lupton, “Typography in the 1990s,” Print, on-line edition (October 2009).

Twelve years later, Typography Now has become a fascinating piece of history, showing us what ambitious, forward-reaching design looked like at a time when the web was just finding its legs, print was digging in its heels, and digital tools had revolutionized our work flow.

And further:

Although some of the material in Typography Now Two reeks of grunge mannerisms and digital-effects mania, much of it still looks totally alive. This work was striving to define what was new for its time, and for many pieces, the freshness stamp has yet to expire.

Looking back, we can assuredly say that web design has survived the scourge of MySpace. It has outlived the provincialism of Geocities. It has survived the use of tables-based layouts. Reciprocally, typography survived the nineties and web typography will survive, if not flourish in, this upcoming period of uncertain self-indulgence by amateurs and astute craft by professionals—each vying to use and misuse typefaces, of all kinds, in the most pleasant and unpleasant of circumstances. Crimes of passion will be committed over the love of a typeface.

I

As evidence of one such crime, you can just look at the alignment of the body text on this web page. Here, I justify the text with clean hard edges on both the left and right sides of the centered column. Some would argue that this is an accessibility crime since it creates readability problems for certain users who find it difficult to read across words due to the open gaps of whitespace created when line length and type size are unbalanced. In order to overcome these architectural aberrations, the print designer has control over the measure of the text and the page’s textural color through the use of typesetting software. Unfortunately, for the web designer, typesetting on the web is far more limiting as there is no proper hyphenation control and a poor implementation of spacing controls for letters (kerning), characters (tracking) and words.

Further, there are certain designers who view the use of justified text as fundamentally contrived. This is, of course, an aesthetic argument; and although I do agree, to a limited extent, with this opinion, I much prefer this method of alignment over that of flush-left ragged-right where when uncontrolled looks downright unseemly. Within the context of the web, one way to implement justified text is through an egalitarian approach to design: where form and content are considered equally. Since I am both the author and designer of this personal site, I can write the body copy while, concurrently, keeping an eye on the line density of a paragraph. In addition, I use a simple script called Hyphenator which automatically hyphenates the text. Of course, this is not the most elegant approach and far from perfect, but it will have to do for now.

Examples of poorly formatted web pages using justified text are not hard to find on the web. Comparatively, there are a few exemplary designs out there, two of which are worth mentioning:

Jon Tangerine
Designer: Jon Tan
URL: jontangerine.com
The personal log of Jon Tan is an exceptional example of web typography and design.
screenshot of jontangerie.com

And:

Cynosura
Designer: Ray Glover
URL: weblog.cynosura.eu
The beautifully nuanced personal weblog of Raymond Glover featuring his work in U.I. design.
screenshot of weblog.cynosura.eu

It is without question that justified text serves a much more meaningful purpose in print than it does on the web—in its efficient economy of space and clarity of structure. Also, the reader of newspapers and books expects to see justified blocks of text while expecting a ragged approach in other printed matter and on the web. So yes, the use of this method of alignment can appear strained. Regardless, as evidenced by the sites referenced above, there is merit to its use online as it can look elegant and impactful.

II

Much is made of the importance of visual hierarchy in web design as it assists the user in navigating the page or website through the zoning of blocks of content. Relying on the Gestalt principles of perception, the web designer breaks up the page structurally, thereby creating a stepped architecture of elements with the use of typography. A system of reading is developed by emphasizing areas of varying importance, either by organizing entry points or by marking sections. The intent here is to provide the user with options on how to digest the content, as a whole or in pieces. The typographical designer uses contrast, weight, size, position or orientation as methodologies of order to mark these divisions. For some, the absence of a visual hierarchy on a page or website is viewed as a usability crime since it impedes readability.

Here, I do not believe the question should be: “How do we make the content digestible for the user?” What should be asked is: “What is the author’s intent?” This question is addressed by Robert Hullot-Kentor, the translator of the second English translation of Theodor Adorno’s Aesthetic Theory, as he discusses the book’s first translation:

Robert Hullot-Kentor, “Translator’s Introduction,” Aesthetic Theory, by Theodor W. Adorno, Universtiy of Minnesota Press (1996): xiv-xv.

Diametrically opposed to the course the book took in its various drafts in Adorno’s own hands, a process that led in the final version to the rejection of the division of the book into chapters, the 1984 translation arrived on bookstore shelves divided into numbered chapters with main headings and subheadings inserted in the text. Paragraph indentations were distributed arbitrarily throughout, completing the image of a monodirectional sequence of topic sentences that could be followed stepwise from chapter 1 through chapter 12. This subordinated the text’s paratactical order to a semblance of progressive argumentation that offered to present the book’s content conveniently. This devise provided a steady external grip on the book while causing it to collapse internally. For in lieu of any argumentative structure in the text itself, because it contains no homogeneous substance that can be followed from start to finish, the flaring clarity of paragraph indentations only produced a contrast by which the simulated paragraphs appeared murky in their refusal to parse into stages of thesis and evidence.

And further:

The original paratactical text is concentrically arranged around a mute middle point through which every word seeks to be refracted and that it must express. The text cannot refer forward or backward without disturbing this nexus through which the parts become binding on each other. The linear argumentative structure imposed on the text by the translation thus dismissed the text’s middle point as a detour and severed its nexus. Compulsory unification serves only to fragment: the imposed structure set whole passages adrift whose suddenly evident isolation required further apparatus to span them. Therefore, transitional phrases were interpolated such as: “as we saw” or “as we said” or “let us remember.” The narrative persona that was projected into the text at these points and elsewhere was credible insofar as it seemed to substantiate an argumentative model of knowledge and its transmission. But this further contributed to muffling a text that, by its own standards, succeeds only insofar as what is particular in it begins to speak for itself.

Adorno is a severe and direct writer whose writing is difficult to penetrate, not just due to the translation of his German, but because of the complexity of his ideas. And it would be uncommon to find a writer of his kind writing on the web today. The purpose of this example is to make certain the acknowledgment of the primacy of the author (as web auteur) over the user (as on-line reader). It is often stated that the web designer designs from the content outward. Therefore, it would be a misreading to then apply an external scaffolding of structure upon a text which does not seek to be fragmented and unfair to make claim the notion that a page sans a visible hierarchy renders the page unreadable. These signposts, or points of entry, are there for the reader at the discretion of the author—because it is her pleasure.

III

The argument over legibility has had its wars and skirmishes over the years, and although I am not looking to pick at the faded embers of burnt carcasses, I would like to approach the critical issue of typeface rendering on the web; more specifically, how certain fonts are rendered in Windows. Currently, the mechanism by which individuals and type services are serving web fonts for display on websites is the @font-face CSS declaration. This rule which has been around for a while has made it possible for designers and web authors to use a custom typeface, not usually installed on a user’s computer, for a webpage or site. Its use is a benefit not just for personal sites, like this one, but for corporate sites where it can be used in support of consistent branding between the company’s print materials and web presence. Unfortunately, it has also exposed the problems with font rendering that can be encountered when viewing a site in Windows.

I won’t go into specifics on why the problem occurs, as it has been discussed elsewhere, nor will I engage in an Apple/Microsoft argument over whose font rendering philosophy is more appropriate for the web. What I would like to emphasize is that even if you do make the right choice of selecting a typeface for your site, your selection may be undermined by how poorly it renders on a Windows computer. An example is the beautifully redesigned Bobulate which uses Skolar as its typeface:

Bobulate
Designer: Jason Santa Maria
URL: bobulate.com
The personal site of Liz Danzico is an extraordinary repository of thoughtful commentary and documented experience.
screenshot of bobulate.com using Safari and windows standard cleartype

Editor’s Note: As of the fall of 2010, Typekit has greatly improved the rendering quality of Skolar on the Windows platform.

The above screenshot was taken in Windows XP using Safari 4.0 (with ClearType selected in the Control Panel). It’s quite evident that the letters of the typeface are smeared making the text almost illegible. Thankfully, Apple provides the option to change the font smoothing under Edit→ Preferences→ Appearances. By choosing the Light option under the drop down menu the rendering is corrected, as so:

screenshot of bobulate.com using Safari and light cleartype

Pretty dramatic difference, no? The problem here, of course, is that most users will not make the necessary change to the font smoothing of this browser in order to correct the rendering. This creates a dilemma for the designer or author of a site. Usually, legibility problems occur when a poor aesthetic choice—a decorative font chosen for the body text—is made by someone uninformed in web typography, sometimes known as the amateur. This is not the case here. Skolar was chosen with a meaningful purpose: “It was designed with ‘scholarly and multilingual publications in mind. It incorporates a subtle personal style, neither neutral nor conspicuous,’ exactly what Bobulate portends to do.” So, the designer had to make a critical decision; accept that the text is illegible for some Windows visitors using Safari while accommodating the remainder of the audience.

Editor’s Note: Since the publishing of this article, I have gone through several typefaces for the body text, including Fedra Serif A, Chaparral Pro and now Meta Serif Web Pro.

Poor font rendering is not just limited to Safari on Windows as inconsistencies are readily apparent across browsers for various reasons. And regardless of a designer’s preference for the Mac as a development environment, or as a consumer product, the potential audience for most websites will most likely be milling in front of a Windows PC. Therefore, it becomes problematic when your selection of a typeface, either for body text or headings, is rendered with jaggies or smearing. For this reason the typographical choices I made for this website are done in avoidance of such complications. Which is why I have chosen FF Meta Serif Web Pro for the general purpose body text throughout the site (including this article) and why I use Cufón to display most of the headings.

IV

One of the hindrances to readability on the web is the noise factor which is forced upon the user by content heavy sites. In many cases a user is bombarded with blinking ads, sidebars, google adsense, and a cacophony of ancillary content. This causes a discordant experience for the user because as a reader she is distracted from accessing the meaningful content on the visited page. Frustrated, her reading experience turns into a struggle and in defeat she quickly scans the text, gets whatever the gist is, and then moves on. As an aid to the reader, Arc90 developed a bookmarklet, aptly named Readability, which allows the visitor of a website to remove the clutter surrounding the main content and change the layout of the web page. It has become a popular tool for web readers which is so useful at its purpose that David Pogue called it: “The single best tech idea of 2009….” At first glance, this could be viewed as the answer to the problems of readability on the web:

Mandy Brown, “In Defense of Readers,” A List Apart Magazine, (February 17, 2009).

What each of these readers has in common is an ability to create solitude under circumstances that would seem to prohibit it. Reading is a necessarily solitary experience — like dying, everyone reads alone — but over the centuries readers have learned how to cultivate that solitude, how to grow it in the least hospitable environments. An experienced reader can lose herself in a good text with anything short of a war going on (and, sometimes, even then) — the horticultural equivalent of growing orchids in a desert.

Despite the ubiquity of reading on the web, readers remain a neglected audience. Much of our talk about web design revolves around a sense of movement: users are thought to be finding, searching, skimming, looking. We measure how frequently they click but not how long they stay on the page. We concern ourselves with their travel and participation — how they move from page to page, who they talk to when they get there — but forget the needs of those whose purpose is to be still. Readers flourish when they have space — some distance from the hubbub of the crowds — and as web designers, there is yet much we can do to help them carve out that space.

Beyond the fact that this bookmarklet is a tool of neutralization, as a declaration of avoidance of bad web design and as an act of defiance against the author’s intent because it decontextualizes the content’s meaning, what its popularity tells me is that the web reader is asserting herself. In her pursuit for the pleasure of the text she seeks the quietude of the page with whichever tool, application or device meets her needs—whether it’s a sliver of javascript, an iPhone/iPad, a Kindle or a future iteration of the tablet PC. In accordance with Mandy Brown’s defense of readers, the true answer to readability on the web is great web design, strong typography and the web author’s willingness to accommodate her readers.

Epilogue

Late last year the Long Island newspaper Newsday redesigned their website at a cost of $4 million and subsequently put the website behind a pay wall. In the three months since the website became subscription based, the newspaper had managed to attract a total of thirty-five subscribers. The redesign was such a disappointment that Newsday soon thereafter asked its readership for their opinions on how to improve the website in an on-line survey. I guess when you have exhausted all viable options, the last resort is to use up that lifeline. Imagine if the director James Cameron had sent out a request for suggestions on how to finish his latest and greatest from the CGI industry. He would have received thousands of opinions on how not to finish the film. Or, gasp, imagine if Steve Jobs sent out a survey seeking ideas on how to improve his latest gem, the iPad. To say it would amount to a clusterfuck of opinion would not be understating it.

As our visceral digital experience continues to be redefined, with the web being just a part, by individuals with a strong vision it would be foolish for content creators not to gleam lessons from what is happening. The film Avatar has earned Cameron $2.6 billion in worldwide gross receipts and Apple has earned $42 billion in revenue (via John Gruber). What is evidenced here, of course, is the primacy of authorship. Cameron dictates the relationship with his audience by giving them no choice, but to go to the movie theater. Consumers are willing to forgo choice by allowing Jobs to define his own product’s design. We are led to believe that what the web user wants is choice, options and the ability to access information immediately. As readers continue to seek the quiet corner of the web to read and as they continue to find means to simplify their web experience, web authors have an opportunity to define that experience for them. With editorial design supported by the typographical tools and services now available, the web-based author as creative director can provide the safe haven that readers long for.