Most popular web fonts of 2012

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?
«1

Comments

  • James PuckettJames Puckett Posts: 1,303
    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.
  • 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.
  • 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 MeseguerLaura Meseguer Posts: 3
    edited May 2013
    My guess is the same, sans are more legible at low resolutions but also in small sizes
  • Thomas PhinneyThomas Phinney Posts: 612
    edited May 2013
    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.
  • 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.
  • D. Epar tedD. Epar ted Posts: 663
    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 PuckettJames Puckett Posts: 1,303
    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.
  • D. Epar tedD. Epar ted Posts: 663
    Sorry, they are here: http://www.linotype.com/6991/etextfonts.html at Linotype...
  • James PuckettJames Puckett Posts: 1,303
    Thanks for the link! I didn’t realize that they had finally released the entire series.
  • D. Epar tedD. Epar ted Posts: 663
    I didn't mean to imply that these were all serif faces either, but they almost all are. . .
  • PabloImpallariPabloImpallari Posts: 481
    edited May 2013
    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 SchmoegerJan Schmoeger Posts: 280
    edited May 2013
    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?
  • Isn’t the x-height thing just bullshit? If that was the case, the designer could just set the font slightly bigger.
  • D. Epar tedD. Epar ted Posts: 663
    Thanks for the link! I didn’t realize that they had finally released the entire series.
    This is the entire series?
  • James PuckettJames Puckett Posts: 1,303
    “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.
  • D. Epar tedD. Epar ted Posts: 663
    Oh I see. I thought they all arrived just now.
  • John HudsonJohn Hudson Posts: 913
    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?
  • John HudsonJohn Hudson Posts: 913
    edited May 2013
    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 HudsonJohn Hudson Posts: 913
    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 ColesStephen Coles Posts: 683
    I think he’s referring to the inherent horsiness of text-optimized type used at display sizes.
  • A sample of an extreme optimization, Petit Formal Script is a formal script that can be used as small as 14px
    image
    image
    And will look like a horse if used big :)
  • Thanks for toning down the Berlowese, David :) You are absolutely right that changing one variable requires adjustments of all. But does the screen require all of these? It is low-res, yes, but is it necessarily small? There are other reasons for adjusting width, space and apertures than just size.

    Looking at Pablo’s image, I wonder what the other scripts would look like if he just enlarged their size. Longer ascenders/descenders and thus more leading required, yes? But do we have to set all text solid on the web?
  • edited May 2013
    The magic circle argument: Set a caption variant smaller, and it will look bigger!

    To me, a caption variant mainly makes sense in the context of a large family with multiple masters. That said, I still think we can pick up a thing or two from past technologies. What David is citing is old wisdom, but the screen is a not an old medium.
  • D. Epar tedD. Epar ted Posts: 663
    edited May 2013
    I want to see if it eats hay at 36 point.:)
  • That would be the horse d’œvre.
  • John HudsonJohn Hudson Posts: 913
    edited May 2013
    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.
  • D. Epar tedD. Epar ted Posts: 663
    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.
Sign In or Register to comment.