Study of Web Safe Fonts, Serif

Oct 03, 2015

While Google Fonts is becoming more and more commonly used, here I try to study web safe fonts. Even though on Google Fonts there are various typefaces are available, it is better to understand web safe fonts and how, and when, to use them. I’m planing to write this series for serif, sans serif and monospace & cursive. First in this article I write for serif typefaces.

Times New Roman & Times

Times New Roman was designed for british newspaper The Times in 1929, by Victor Lardent, advertising artist at The Times, supervised by Stanley Morison at Monotype. After the completion, Monotype had to license the font to Linotype due to that The Times was using Linotype’s typesetting machines. Since then Monotype use the font they just created as "Times New Roman”, and Linotype marketed as “Times Roman”, which is nowadays simply just called “Times.”

“Times New Roman” has been distributed by Microsoft since Window 3.1, 1992. “Times”, on the other hand, has been distributed by Apple for Macintosh since 1984.

Although Times is no longer used by The Times, their new replacements are always variants of it. Because of its adoption in Windows and OSX, Times New Roman and Times are both frequent in mass-market paperbacks in U.S.

Palatino

In 1950, Herman Zapt, German typeface designer and calligrapher, designed Palatino named after Giambattista Palatino, a master of calligraphy from the time of Leonardo da Vinci. It is based on classical Italian Renaissance forms. Nevertheless, where the Renaissance faces tend to use smaller letters with longer vertical lines with lighter strokes, Palatino has larger proportions, and is considered to be much easier to read. Palatino was particularly intended as a design for headings, but became popular for body text, overshadowing Aldus, which Zapf had expected to be used for this role.

Palatino Linotype

In 1999, Palatino was revised for Linotype and Microsoft with many newly designed characters including extensive support for Latin, Greek, Cyrillic and central Europe languages. It was the first western Open Type font.

Book Antiqua

Microsoft distributed a similar typefaces, Book Antiqua originally by Monotype, which is considered by Mr.Zapt to be an imitation.

Georgia

Georgia was designed in 1993 by Matthew Carter for Microsoft, intended to be as a serif font that would appear elegant but legible on low-resolutions screens. It possesses large x-height, open counters, high contrast between the regular and bold weights, ample letter spacing, and character designs that help distinguish commonly confused letter forms such as 1, I, and l.

The Georgia typeface is similar to Times New Roman, another revival of transitional serif designs, but with many subtle differences: Georgia is larger than Times at the same point size, and has a greater x-height at the same actual size; Times New Roman is slightly narrower, with a more vertical axis; and Georgia's serifs are slightly wider and have blunter, flatter ends.

Difference

hopivamt Times New Roman

hopivamt Times

hopivamt Palatino

hopivamt Palatino Linotype

hopivamt Book Antiqua

hopivamt Georgia

hopivamt Default Serif

Assuming that there might be some differences on which screen you see and under which light you are, from the example above you can see how each typeface is different from each other. The reason why I use "hopivamt" is that, in his interview, Matthew Carter says many combinations of letters could be derived from this word.

Since Times New Roman and Times are designed for newspaper, they have smaller width in order to meet the needs of economical space. They are also smaller in size even though the same font-size are set as others. Georgia, as it is intended, looks blacker than others and has blunter ends to avoid the disappearance on low-resolutions screens.

hopivamt Times New Roman

hopivamt Times

hopivamt Palatino

hopivamt Palatino Linotype

hopivamt Book Antiqua

hopivamt Georgia

hopivamt Default Serif

Now let's compare in the size of body texts. If you're not seeing this on high-resolutions screen, smartphone or retina display, the ends might disappear except Georgia. If you are, there is no problem to perceive them, even ends of Times New Roman and Times. Just as heading, still, Georgia looks blacker. In more proper sence, in serif fonts words tend to be displayed more grayish, Georgia is just an exception.

A few weeks ago, just for the curiosity, I checked what typefaces nytimes.com uses for their body texts. It turns out to be Georgia. (For reference, they use their own font for headings.)

My Opinion

Based on the examination above, you might by now think that Georgia seems best among web safe serif typefaces... maybe. Before finish, let me remind you that there is no best typeface in the world. If a situation changed, a typeface changed. It is no hard to imagine that the typeface for the most famous newspaper and for the washroom at JFK airport would have to be different.

But we design for web. We design to be read. So readability must be our priority. Since screens are becoming more and more dense, now it is ok to use Times New Roman, and since more people tend to read on smartphone devieces, which have smaller width, Times New Roman enables us to put more words in one line so that we can avoid too many line-breaks hell.

Otherwise, I say that it is safe, good, to stick to Georgia so that people can read your content on broader devices, for instance, company's PCs or home PCs.