WebspaceWorks Resources

Font Families & Web-safe Fonts: The Point of Penultimate Resort

As discussed in ‘Reliability of “web–safe” fonts’, the range of supposedly safe fonts available for web–design is limited to a handful, and they’re not really all that safe when considering the unix family of operating systems.

For each major platform there are additional commonly occuring fonts, and these can be used as the basis for breaking out from the typographic wasteland that remains common to many websites.

The tools, and the fonts already exist to do this… yet normal practice seems to be to ignore this potential and work within what amount to self-imposed limits. What’s needed is to extend the notion of safety such that it embraces platform specific safety as a preliminary element of being universally web-safe.

Web Typography: Opportunity Missed

CSS provides the ability to control the fonts used within a document through use of the font-family selector. The considerable creative power that this selector provides is often squandered in families that consist solely of members of the ‘safe’ set. Such blind adherence has lead to uniformity in website typography, and a situation that, without specific attention, results in unix-based visitors being left out in the cold of the generic fallback.

CSS font-family: Exercising Typographic Choice

The font-family selector should be exploited as a means of broadening typographic choice, not restricting it. In this context font-family can be thought of as a funnel, the width of which represents choice, narrowing towards a final backstop pairing of a web-safe font, followed by a generic (serif, sans-serif, cursive, monospace or fantasy).

A font-family needs though to maintain internal compatibility between all its members, including the specified web-safe fallback. This is not just a matter of matching serif with other serif fonts, sans-serif with other sans-serif, since different fonts within these main groupings may be incompatible on the basis of their specific characteristics.

Maintaining common characteristics for all members of a font-family is also beneficial in cases where different families are used for headings and body text. If each font-family were to be internally consistent, then it would not matter which pairing of header and body font were to result, since all could be expected to work reasonably well together.

Safe Sans-Serif Fonts

In this basic set of sans-serif fonts Verdana stands out like a sore thumb due to its larger x-height and width. It is not therefore a good companion font for the others included here because of these differences and the increased space requirements that may produce unwanted side-effects to line-wrap, body length and layout.

Of the fonts included above, only helvetica can be considered to be pervasive on unix systems. If more unix friendly fonts are included the picture changes somewhat, and if Geneva, a sans-serif font common to the Mac, is added, two distinct groupings begin to emerge.

Verdana, Geneva and Bitstream Vera Sans belong together, as do Arial, Tahoma, and Helvetica. Trebuchet MS and URW Grotesk T, because of their smaller x-heights, are perhaps a little more of a stretch, although Trebuchet MS remains a fairly comfortable fit with the second main grouping here.

Safe Serif Fonts

Choosing a serif font from among the ‘universally’ web-safe isn‘t all that difficult since there is almost no choice to make.

These fonts cover all platforms, but Georgia suffers from the same ‘odd-man-out’ issues as Verdana in the sans-serif case. It also doesn’t fall back well onto Times, which it would have to do in approximately 50% of unix systems if nothing else were done.

Adding some system-specific safe fonts increases choice, as well as providing better alternatives for fonts such as Georgia.

Here there appear to emerge three groupings: Times (the smallest), Georgia/Utopia (in the middle), and then the Bookman/New York/Vera set for which there is no ‘universally’ web-safe equivalent.

Safe Fonts in General

The general principle is to be not only aware of what the universally web-safe fonts are, but also what safe equivalents exist across all various platforms. There’s nothing to prevent ‘unsafe’ fonts being used as the initial member(s) of a font-family, provided they are compatible with the safer fonts specified as the fallback choices.

This first example starts with a relatively obscure font, then provides unix and Mac alternates, then Georgia as the universally safe option.

The second example starts with the Century Gothic font that is common on windows systems (>80%), then ‘degrades’ through Mac, Windows and unix alternates, before settling on Verdana as the websafe option.

Perfect equivalence between all members of a font-family isn’t always going to be possible, as evidenced by the second of these examples, but close matches of basic characetristics will be.

CSS font-size-adjust: Font Compatibility Pipedream

The font-size-adjust selector was intended as a means of adjusting display within a font-family such that, whichever font was actually used by a browser, it would be rendered to a common x-height. While fine in principle, it has never been widely implemented in browsers, only being available, at last check, in the Windows version of Firefox.

Another problem of font-size-adjust is that it corrects for height differences between fonts that are of dissimilar x-heights. This is going to be OK if the fonts in question are similar in their height/width proportions, but will play havoc if these proportions differ (e.g. URW Grotesk T adjusted to match the x-height of Verdana).

So, a partial solution at best.

Websafe Fonts: Typefaces of last resort

In many cases it seems that the starting point for webdesign is which web-safe font to use and to then end up using that font as the first choice for the design.

What the above suggests is that rather than compromising to a purely web-safe font-family, the web-safe fallback should be influenced by first selecting what the perfect font would be. A little ingenuity should then enable the rest of the font-family, addressing platform-specific needs, to be assembled between this ideal start and the safe end, while maintaining control throughout. Under this approach the sequence in which fonts would be specified within the family would be:

1. The Ideal Font
2. Nearest alternative(s)
3. Platform safe alternative(s)
4. Universally web-safe
5. Generic

While methods such as Scalable Inman Flash Replacement (sIFR) also exist, they are really best suited to use in headings, rather than body text. Even these techniques though can benefit from a more considered approach to the font-family since this is what they fall back to in cases where the replacement method won’t work.

Further Reading

Ampsoft’s Common fonts to all versions of Windows & Mac equivalents provides a useful cross reference for common font correspondence across the two main platforms.

Angelfire provides a list of Windows and Mac fonts for visual reference, but again limited in scope to those fonts common to these platforms.

Codestyle provides a more comprehensive font survey that covers all three main platforms, as well as giving a feel for how reliably fonts from one platform are represented on the others.

Technorati Tags: fonts, web-design, typography, web-typography, css, font-family

If you have any comments regarding this article, or would like to reproduce it in part or in full, we welcome feedback through our standard contact page.