Most popular web fonts of 2012

Daniel Sabino

http://blog.webink.com/most-popular-web-fonts-for-2012/

Web = Sans, print = Sans + Serif? Can serif typefaces compete with sans on the web? Why this amazing difference in popularity?

James Puckett

My guess is that sans wins because many sites are using a sans web font for headlines and Georgia for copy. And because sans seems to be more popular for corporate identities right now.

Jackson Showalter-Cavanaugh

In general, sans-serifs have been more popular for a very long time. (See also: http://www.myfonts.com/bestsellers/). Websites in particular seem to love the safe sans (webfont) headlines paired with system font (usually serif) body. Nothing unsurprising here.

Kemie Guaida

I would venture to say the vast majority of sites use a sans for body copy. The common knowledge is that sans are more legible at low resolutions.

Laura Meseguer

My guess is the same, sans are more legible at low resolutions but also in small sizes

Thomas Phinney

Having been the one who compiled the list, I concur with a lot of the above comments.

Mind you, when I look at the next 10 or 20 most popular typefaces on WebINK, there are plenty of serif faces cropping up—though still less than half of that next group.

Deleted Account

This amazing difference is on one site, a site that has not a single serif typeface designed for the web, all having being repurposed from print... Maybe coincidence, but I know another web type site, where the popularity of serif vs sans in about even, due in part to the inclusion of good serif text faces for the web, being popular enough to be in the top ten.

Daniel Sabino

hum, good point. I would love to see a link showing the most popular ones from that web type site, please share with us when you have it.

Deleted Account

Fonts.com just released some new serif fonts just for this purpose recently, and it should be interesting to see how their font popularity changes. But the site I'm referring to is webtype.com/fonts/ then sort by popularity, where the order you find now started to form late last year.

This is not to say sans is not useful.

James Puckett

What and where are the new web serifs on fonts.com? Are they the same ones MT developed for e-readers? I tried finding them on Fonts.com but Monotype is still incapable of promoting anything made by a living member of their type team.

Deleted Account

Sorry, they are here: http://www.linotype.com/6991/etextfonts.html at Linotype...

James Puckett

Thanks for the link! I didn’t realize that they had finally released the entire series.

Deleted Account

I didn't mean to imply that these were all serif faces either, but they almost all are. . .

PabloImpallari

Completely agree with David that there are many "just converted" web fonts and not enough tailored designs.

In general, converted serif fonts will not look good for body text on the web, unless you use then bigger than 20px. And web designers does not like to set the body text so big (just in case the webfonts fail to load and the fallback font is shown)

Tailored designs will do look good when set at standard sizes (13 to 16px range), and they can become pretty popular pretty fast. For example Even's Merriweather and Sol's Bitter. Both are ranking pretty high on the GWF stats, having about 53 million views per week, each one.

Just "converting" is fast... while tailoring require extra work. So I applaud anyone taking the time and doing the extra work to tailor new webfonts.

The e-text fonts are a good step in the right direction, however to me, they looks like a halfway optimization. Why?
Because when set at 16px the standard MT Baskerville will produce a 7 pixels x-height.
eText Baskerville will increase it only by 1, producing a timid 8 pixel x-height.
While most tailored web fonts from the top foundries (Webtype, H&FJ, Typoteque, etc..) will produce a 9 pixels x-height, that seems to be the "de facto" standard.

Of course there more to it than making the fonts look bigger, but of all the optimizations (spacing, contrast, hinting, etc) that seems to be the more noticeable one. Or the one that makes the bigger difference.

Libre Baskerville (our tailored web version of ATF Baskerville) will also produce a 9 pixels x-height. And it's becoming popular pretty fast. The stats shows that it was requested 16 million times just last week, at it's increasing by 36% each week. Being among some of the fastest growing fonts on the directory.

In conclusion, I believe that there are still room for Serif fonts to become popular on the web, but they will need to be tailored for this new medium.

Because of the successful adoption of Libre Baskerville, we also have been working on Libre Caslon Text and Display, tailoring a Caslon for body web text, and another one for headers.

Jan Schmoeger

I apologise beforehand for this post: In the link mentioned, body copy is in sans-serif, the heading in serif. Does that not subvert the message just so neatly?

Deleted Account

Thanks for the link! I didn’t realize that they had finally released the entire series.

This is the entire series?

James Puckett

“Entire” was a poor choice of words. The last time I looked into it only the Baskerville family had been released, so this is a big step up.

Deleted Account

Oh I see. I thought they all arrived just now.

John Hudson

Pablo:

Because when set at 16px the standard MT Baskerville will produce a 7 pixels x-height.

Presuming that you are deliberately distinguishing here between px and pixels, surely the accuracy of this statement depends on the resolution, since px is no longer a device unit?

Deleted Account

Isn’t the x-height thing just bullshit?

It could be, but if that is the case it is really old. The execution of several of the RE serif faces followed the general proportions of 6-7 point ATF and Linotype serif text faces, which had enlarged lower cases, not just x height. I.e. they are really wide and openly spaced as well. There is a picture of one of these on our mini site, fontbureau.com/readingedge.

The two most unbullshitic things about masters for small sizes is that they appear larger small and appear confused large, and second, when in the presence of low resolution, they gather more pixels for any given pixel per em than your average master.

As for the Pabloian 7, 8 or 9 px x ht, I would hesitate to add an absolute l.c. pixel ht to a font spec for small masters to avoid forcing all small masters into a mold. 7, an odd number, can sometimes prove more readable than 8, if 9 is just too big for some kind of text style, but we will see as more people do them.

And of course, we will see how these effect web font popularity lists as they each have their own offerings of specialty text faces... I assume...

John Hudson

Pablo:

Because of the successful adoption of Libre Baskerville, we also have been working on Libre Caslon Text and Display...

eText fonts:

Baskerville, PMN Caecilia, Neue Helvetica, ITC Galliard, Palatino, Sabon

Observe the window closing.

John Hudson

David:

...most unbullshitic things about masters for small sizes is that they appear larger small and appear confused large...

I understand -- and of course agree with -- the first observation, but am wondering what you mean by 'appear confused large'?

Stephen Coles

I think he’s referring to the inherent horsiness of text-optimized type used at display sizes.

PabloImpallari

A sample of an extreme optimization, Petit Formal Script is a formal script that can be used as small as 14px


And will look like a horse if used big

Deleted Account

I want to see if it eats hay at 36 point.:)

John Hudson

inherent horsiness of text-optimized type used at display sizes

Or the awkwardness of a Clydesdale in a box designed for an Arabian? I thought that might be what David was angling at, but wasn't sure if he was referring to the look of small size-specific type scaled to display size, or suggesting something about its readability.

Deleted Account

Frode:

It is low-res, yes, but is it necessarily small...

I designed RE small-first, low-res second. It's tricky but fun.

John:

small size-specific type scaled to display size

You said it better than me, but ya, is that not the reason there are 1,000's of display faces for every text face? It's much easier to decide what the text might look like, but when it scales up, people start to argue, and before you know it this year's whole top ten is derived from a single ancient text face, or something.

Thomas Phinney

> a site that has not a single serif typeface designed for the web

That is not quite literally true. We have a few of those, as well as a bunch more that were designed for both screen and print, and superhinted for screen use.

That said, David Berlow’s approach to original typefaces for screen use has produced fabulous results.

Deleted Account

Thanks, but this was not original, I was just following Matthew Carter's Verdana idea, and everyone else who made specialty faces for small sizes.

Daniel Sabino

fffo.grahambird.co.uk/

Stephen Coles

I wonder when that chart was last changed, Daniel. It’s pretty out-of-date. Webtype currently carries fonts from 10 foundries, for instance, and Typekit now offers desktop use.