The best web and mobile typefaces of 2011 are…

In our yearly roundups of what was awesome and what sucked about 2011, we cannot overlook one of our favorite verticals for nerding out: typography.

The past year has brought quite a few interesting developments in web and mobile typography. As a plethora of technologies make typography on the web a lot better year over year, we are able to grow in the typefaces and tools we use.

And as mobile devices, operating systems and displays improve, we get to have more fun when designing for smartphones and tablets, too.

Here are a few of our and others’ picks for the best mobile and web fonts of 2011, including a few freebies you can download right now.

FontShop’s pick for best new web face: Sero Web

16 fonts | $509.00

Sero Web brings legibility and distinction to the table. This face, which spent seven long years in development, combines elements of an American grotesque and humanist sans serifs. Fit for a pro, the face comes in eight weights and includes an expansive set of characters as well as Cyrillic and Greek characters.

Our pick for best Google Web Font face: Cabin

8 fonts | FREE

A lovely humanist sans, Impallari’s Cabin is set up to play nicely with your website, too. Cabin features modern proportions, optical adjustments and some elements of a geometric sans serif.

Web Font Awards pick for best web typography: Malabar on Das Fork

6 fonts | $351

Malabar has been commercially available for at least a year, but it sprang to life in 2011 on the website of German agency Das Fork. Its angular serifs and strong strokes were designed (and later tweaked for the web) by Dan Reynolds, who received multiple awards for the face from the Type Directors Club.

FontShop’s pick for best mobile face: Good Mobile

4 fonts | $199

Clear and legible but still playful enough for larger headlines, Good Mobile brings developers and designers a sturdy cast of characters for smartphones and tablets. Specifically optimized for use in iOS applications, Good Mobile features upright forms with straight-sided gothic/grotesk strokes. FontShop said this face has become its own go-to for mobile work.

Our pick for best open-source face: Ubuntu

16 fonts | FREE

Four Ubuntu fonts made an appearance in the October 2010 release of Ubuntu 10.10. However, in April 2011 additional fonts and expanded language coverage were introduced. Since then, the full Ubuntu font family has become a pleasing choice for digital media, as it is manually hinted for clarity on desktop and mobile screens. This sans serif is free-as-in-freedom as well as free-as-in-beer, which gives us even more reasons to love it.

Our pick for best mobile face: Roboto

8 fonts | FREE

We loved this humanist-grotesk hybrid so much, we wrote an entire post about it. Others aren’t so appreciative, calling Roboto a “four-headed Frankenfont”. But even its critics give props where props are due: Google’s taking the time and resources to develop a mobile-specific face earned the company universal kudos. And the face looks great on the company’s Android devices.

Our pick for best slab alternative for Web 2.0 startup logos: Weston

2 fonts | FREE

STOP! Step away from your go-to slab serif, you cheeky startup designer, you. Take a moment to consider Weston, a rounded slab with a friendly and playful personality, for your next logo project.

Our picks for best all-caps display faces: Ostrich Sans and Dock11

Ostrich Sans: 6 fonts | FREE
Dock11: 1 font | FREE

These two faces we’re throwing in the mix just for fun. On the skinny side, we have Ostrich Sans, a long, slender face that brings versatile variations for logos and web headlines. On the heavier side, we bring you Dock11, a deliciously thick geometric sans that has the necessary weight to make a substantial impression.