Font Families for cross-compatible Typography

Typography has become one of the hottest topic in the web. People have stopped being afraid of using different and mixed fonts for their websites. There are a lot of sites having beautiful typography or even being totally type-based out there and web fonts are now virtually accessible to everyone.

While this is true, typography still remains a pretty unknown territory. Users tend to stick to what they already know that works and this leads to some of the oldest mistakes still being done, most of them having a purely historical root-cause. In this article we’ll go through the most commonly used font-families for websites and how we can do so they look as similar as possible on all machines out there.

Font families are a group of fonts used to display a block of text. If we’re not using web fonts, then the browser will render the text in the first font declared in the font family and if it is not installed it will fall back to the other fonts.

Here’s an example:

font-family: "Hoefler Text", Constantia, "Bitstream Charter", Palatino, "Palatino Linotype", serif;

For this declaration, the browser tries to find the font Hoefler Text and display the given text in it. If it does not find it tries to use Constantia and so on. In the end if none of the fonts is found it will display the text in the system’s default serif font.

Note: There are 2 main types of font: serif fonts, that have small curved endings on some letters and sans serif fonts that lack such endings.

The declaration above is good for the following reasons:

1. All fonts are similar: old-style serif typefaces with similar dimensions
2. They are found in most operating systems (Hoefler Text is found on Mac OS X, Constantia is found on Windows and Bitstream Charter is found on Linux)
3. The Fonts Palatino and Palatino Linotype have been given as web-safe fallbacks

The most common mistakes done when declaring font families are:

Improper Ordering of Fonts

Fonts that may superior or be preferred by some users are are declared as callback after some other font and may never show up.

Example:

font-family: Arial, Helvetica, sans-serif;

In this example Helvetica may never be used to render the website as Arial is present on most systems.

Useless Callback Declarations

Adding fonts after one that is present on virtually all systems.

Example:

font-family: Georgia, "Times New Roman", Times, serif;

All systems that have Times New Roman and Times installed probably also have Georgia, so declaring them as callback is useless.

Using non-similar Fonts in the same Family

Declaring callback fonts that are fairly similar, but not really, to the main font used.

Example:

font-family: Georgia, "Times New Roman", Times, serif;

Although Georgia and Times are both serif typefaces, they have different widths which would make the website look inconsistent on different systems.

Neglecting some Systems

The term web safe fonts is obsolete. It dates back from 1998 and is 12 years old. The web has evolved and what was good to know in ’98 no longer applies. While we are careful to use fonts that are available to any Windows user that has the smallest and oldest system, we tend to neglect other major systems like Linux.

Linux does not come with most of the fonts that are considered web safe. If you’ve ever used Linux for the desktop, you know websites on Linux look awful. There is the font compatibility pack, but not all users have it.

Despite all this Linux has alternatives for the most used fonts and while not identical, they are similar enough to give the website a consistent look. Codestyle.org have a long-lasting survey that shows the most common fonts on Linux systems.

With this being said, I will discuss these issues for the most commonly used  fonts from all types. Please keep in mind I’m no type expert and am writing this out of my own experience solely.

Transitional Sans serif Typefaces

Transitional sans-serif typefaces are modern designs based on early grotesque sans-serif typefaces. Examples include Helvetica, Arial, MS Sans Serif, Highway Gothic.

Here’s one of the most common mistakes:

font-family: Arial, Helvetica, sans-serif;

The reasons I find this wrong are many:

Fist of all, the reason why the order Arial, Helvetica is used is purely historical: In the early ’90s when Microsoft introduced their Windows system, they did not include the Helvetica font. Instead they chose to go with a cheaper alternative: Arial. In consequence, the popular Helvetica typeface started to fade away and Arial to be used everywhere, including websites. Some other manufacturers did choose to use Helvetica, including Apple. Apple also include Arial in their newest versions of Mac OS X and it also comes with Microsoft Office for Mac, why visitors using a Mac will probably never see the website in Helvetica. I personally find Helvetica to be a superior typeface to Arial and believe Mac users would like to see websites rendered in Helvetica rather than Arial. That’s why I find Helvetica, Arial to be a better order.

The second reason is neither Helvetica nor Arial can be found on most Linux systems. Instead, most Linux systems have the font Nimbus Sans L, which is based on Helvetica and is almost identical to it. If you want a font that is more similar to Arial you can use Liberation Sans.

With this in mind, the correct declaration for this family would be:

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

Here’s how this looks on all 3 operating systems:

Humanist Sans serif Typefaces

Humanist sans serif typefaces have wider proportions and are designed to be calligraphic and legible.

The common mistake:

font-family: Verdana, Arial, Helvetica, sans-serif;

Humanist sans-serif typefaces, like Verdana, have larger x-height and wider proportions than grotesque typefaces like Helvetica and Arial. This would make the website look inconsistent on a system that does not have Verdana installed. And most systems that have Helvetica and Arial do have Verdana so the declaration is redundant. Instead I would use Geneva as a callback font, that is much similar to Verdana, and DejaVu Sans as the alternative for Linux. Bitstream Vera Sans is also a humanist sans serif typeface but I find it more similar to Lucida Grande than Verdana.

This is the correct declaration I propose for this family:

font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;

Here’s how this looks on all 3 operating systems:

Here’s another example of a font family:

font-family: "Lucida Grande", Verdana, Arial, sans-serif;

While Lucida Grande and Verdana are both humanist sans serif typefaces, If has smaller x-height and narrower proportions. This does not make it similar to Arial, however.

The reason a callback font is required for this font is that it is present on most Mac OS X systems but on few Windows systems. The alternative to it on Windows is Lucida Sans Unicode, which is virtually identical. On Linux, a font that I found fairly similar is Bitstream Vera Sans. It’s not exactly similar in character design, but has about the same letter spacing, which makes it more similar than DejaVu Sans.

The correct declaration for this would be:

font-family: "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans",sans-serif;

Here’s how this looks on all 3 operating systems:

Old-style serif Typefaces

These typefaces, like Georgia, Palatino and Garamond date back or are inspired by typefaces from the middle ages. Transitional serif typefaces, like Times New Roman and Times are descendant from the old-style typefaces and are the ones found in some books and newspapers.

The common mistake:

font-family: Georgia, "Times New Roman", Times, serif;

Georgia has wider proportions which makes it not similar to the Times font. And anyway, Georgia is available on most Windows and Mac systems, so giving Times as a callback font is virtually useless. However neither Georgia nor Times is available on most Linux systems, but the alternative I have found is URW Bookman L.

The correct declaration for this would be:

font-family: Georgia, "URW Bookman L", serif;

Here’s how this looks on all 3 operating systems:

Here’s another example:

font-family: "Palatino Linotype", Georgia, serif;

Although both old-style typefaces, Georgia is not similar to Palatino in character design. Palatino is the original name of the typeface, still preserved on Mac systems. On Windows it has been given the name Palatino Linotype. On Linux a very similar font called URW Palladio L is available.

The correct declaration I propose for this font family is:

font-family: Palatino, "Palatino Linotype", "URW Palladio L", serif;

Here’s how this looks on all 3 operating systems:

Monospace Typefaces

The common mistake:

font-family: "Courier New", Courier, monospace;

This declaration is pretty good except it lacks the Linux alternative which I found to be Nimbus Mono L. So the correct declaration would be:

font-family: "Courier New", Courier, "Nimbus Mono L", monospace;

Here’s how this looks on all 3 operating systems:

The Wrapup

Grotesque sans serif typefaces:

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

Humanist sans serif typefaces:

font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;

font-family: "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans",sans-serif;

Old-style serif typefaces:

font-family: Georgia, "URW Bookman L", serif;

font-family: "Courier New", Courier, "Nimbus Mono L", monospace;

Monospace typefaces:

font-family: "Courier New", Courier, "Nimbus Sans L", monospace;

The reason I believe it has come to these simple mistakes is that people do not know the basic differences between fonts, like humanist, grotesque, old-style or transitional. If such differences were know, finding good callback fonts would be much easier.

Hope this helped in building better font families.