Best Web Safe Fonts Ever

In preceding three articles, Study of Web Safe Fonts, Serif, Study of Web Safe Fonts, Sans Serif, Study of Web Safe Fonts, Monospace & Cursive, I explored the web safe fonts so far. Now we shall perhaps be more likely to see with a comprehensive view which those are best.

The Importance of Web Safe

Have you ever used Google Fonts before? The answer is probably yes. They have many nice and cool fonts, so you might ask what is the point of using the web safe fonts. The short answer to this question is its size.

According to Web Fonts Performance: Making Pretty, Fast, as of 2012 an average font served by Google Web Fonts is ~35kb with gzipped. But usually you need a bold weight as well, so the total file size would be about 70kb. In addition to this, you may come to be in want of another font type, for instance, you want a serif typeface if you use sans-serif one already, and vice versa.

However, you couldn't find a font that goes along with your primary font, so you decided to pick one out of Google Fonts, regular and bold again, which makes the size of fonts over 140kb in total. For worse case, you might need italic styles, too.

Thus, I conculde that as designer we must fully understand the web safe fonts and what and what typefaces make the greatest typography on web. Here are my suggestions to construct one website with one or two font families.

Arial & Arial Black

My first suggestion is Arial along with its black style. It is universally known that Arial was made to compete with Helvetica and is very similar to it because both are designed based on Grotesk typeface.

The reason I suggest Arial over Helvetica first is that it is widely available with 3 styles. Plus, most poeple, who are non-designers, are familiar to this font since it is the default sans serif typeface in Microsoft's Word, which might result that they feel comfortable to read it. In addtion Google uses Arial for its texts on search pages.

The easiest way, or probably best, to design with this typeface is using regular style for body texts, bold for important texts, and black for headings or very important parts.

Helvetica Neue

Helvetica Neue supposedly has seven weights available in OS X on web, but only five weights are so; there is no black (font-weight:700;) and there is no difference between thin and light (200 and 300.)

And yet, it is still appreciated that the font has ultra light stroke by default and makes designers being able to represent subtle difference on design by typography. This is why it is beloved by a lot of designers. Or that is because while both Helvetica and Arial are very legible sans serif typeface, some designers see Arial as an imitation of Helvetica.

In the term of comfortableness, Facebook uses Helvetica for its texts of posts and Twitter uses Helvetica Neue for its texts on web. So most people are already as much familiar to Helvetica family as to Arial without knowing it.

Lucida Grande & Monaco

This combination is for Apple lovers. Both Lucida Grande & Monaco are designed by Kris Holmes, not only by her though, and have been shipped since the first version of Mac OS X.

Lucida Grande has been used throughout Mac OS X as a user interface font from 1999 to 2014, until the release of OS X Yosemite. This is why Lucida Grande has wider letter spacings than other typefaces in order to meet the need of readability on screens, imagine that monitors in 1999 had much less resolutions. This causes unlegibility on paragraphs, but we can set letter-spacing:-0.5px to optimize the spacings, that is what I'm doing here.

Surely, Monaco is not designed to pursue legibility, thus I suggest you to use it for headings or to represent some difference from your other contents.

Verdana & Tahoma

Verdana and Tahoma are designed by Matthew Carter for Microsoft, optimizing the result of rendering on low resolution screens.

This combination performs best when you target Windows users because it is no hard task to imagine that at work place people still use PCs before 2010 or earlier. Tahoma, compared to Verdana and the other sans serif typefaces, is narrower and has wider letter spacings, so it suits being used as headings.

And Verdana is good for body texts. After you observe this typeface right after Arial and Helvetica, it feels as if it is really bigger (acturelly it is.)

Georgia & Tahoma

Georgia is also designed by the same designer as Verdana and Tahoma's, Matthew Carter, for Microsoft. Hence these two typefaces go well together.

It is studied that serif typefaces are more legible than sans serif typefaces. This result is no surprising. Sans serif typefaces occured after the Industrial Revolution, but the development of serif typeface dates back to the second century A.D. or earlier. Human have much longer history with serif fonts than sans serif's. So probably Georgia is more preferable than sans serif fonts for being body texts.

Here I suggest Georgia for body texts and Tahoma for headings but you can also use Georgia as headings since its strokes are thicker than other serif typefaces. If you do so, it would be better to set Verdana as body texts.

Are other typefaces bad?

Of course not, it is not that simple. Let's take an example of Times New Roman and Courier.

Times New Roman was desgined to be narrower and smaller to satisfy an economic purpose of newspaper. With this font you can lay out more letters than usual within the limited space. This is good because each year more and more people are starting to read on smartphones, which has only 320~540px width. The bad side is that there is no fonts related to this font out of web safe fonts. Thus you need to construct your site only with it and the final design could be little dull.

I personally like Courier family because of its comfortableness although I haven't used it for production before. This font was designed for IBM's typewritters, hence it represents some old fashioned taste. This font might suit slow-lifeness websites.

Afternote

It was my ambition that the deep understanding in the web safe fonts helps us comprehend typography more accurately. Before finish I'd like to remind you that there is no absolutely best typeface on earth. Typefaces depend not on its form, but rather on how they are to be used. I hope that you find this article useful when you decide which font to use and pick up one that suits the intention of your design.