The web has been alive with discussion on web fonts after yesterday’s announcement of the Google Font API. I wrote about it myself yesterday and here is just a quick sample of some of the more interesting articles and discussions:

• Real Fonts and Rendering: The New Elephant in the Room – Jeffery Zeldman, 24 Ways
• Google getting into the Web Fonts game? – Typophile Discussion
• Details on the new Google Webfont API – Paul Irish
• @font-face rendering flow chart – Typophile Discussion

Yesterday I commented on the legibility of the fonts in Google’s Font Directory on Windows with ClearType turned on. After seeing Miha’s awesome  font rendering chart, I can see that my run down of Windows font rendering is only partially correct: Windows XP on default renders in “standard” mode which allows for a limited anti-aliasing smoothing but only at large font sizes or for fonts with proper Windows hinting—unless you are using IE6 and then no anti-aliasing occurs and it’s pixels, pixels, pixels.

As Zeldman points out there are more issues between browsers as well, with each browser handling font hinting a little differently, but that’s a mess I’m not about to get into. What I will do is expand my review of Windows font rendering to cover what it looks link with standard mode and no anti-aliasing. Also for your convince, I’ve added screenshots showing what it looks like with each mode (each font name links to it’s corresponding screenshot):

Windows ClearType

Vista, Windows 7, Windows XP with IE7/8, XP with ClearType turned on

Windows Standard Mode

Windows XP default with Firefox or Chrome

Windows No Anti-Aliasing

Windows XP default with IE6

Again I didn’t bother creating a list for Mac. If you are working on Windows you can use Safari to see what the rendering will look like on a Mac. Macs render type in a more consistent manner: as it decreases in size at worst it becomes a little more anemic and fuzzy. In the main, if your type is legible on Windows it is legible on a Mac.

Conclusion

Now looking at all these Windows rendering styles you can see how varying typeface legibility is:  some fonts behave well across all rendering like Droid and others preform only good with one type of rendering like Inconsolata, which looks good in standard mode but terrible in ClearType and with font smoothing off.

The Droid Family is the only font in this set that I would use for body text. All others are only suitable for headers or display text. And I would avoid using Inconsolata, Tangerine, Josefin, and Cardo except at really large display sizes (36px or larger).

Oh what a happy day to be a Web Developer! Google has released their Google Font API and the Google Font Directory with a number of Open Source Fonts. Also released in cooperation with TypeKit is the WebFont Loader which helps the FOUT (Flash of Unstyled Content) which is an issue with how Firefox handles downloaded fonts ( for more on FOUT and why WebLoader is a good thing see Paul Irish’s Details on the New Google WebFont API).

All this is great as it make it a snap to use open source fonts, either the one’s Google hosts (fast download! easy!) or you use WebFont Loader to make it simple to add other Open Source Fonts such as some of the great ones offered by The League of Movable Type. If there are licensed fonts you want to use, I recommend looking into TypeKit‘s services.

CrossPlatform Rendering Issues in a NutShell

So now that the issue of web fonts is more or less solved, the next big issue is cross-platform font rendering. The best way to sum up the difference :

Mac: the goal of font rendering is to preserve the design of the typeface as much as possible, even at the cost of a little bit of blurriness.

Windows ClearType (Vista,Windows 7, anyone using IE7/8, and XP users smart enough to turn on ClearType): the shape of each letter should be hammered into pixel boundaries to prevent blur and improve readability, even at the cost of not being true to the typeface. It is up to the font designers to build ClearType hinting into the font—without it the font may become illegible at small sizes.

Windows no anti-aliasing (XP default): pixels, pixels, pixels.

much of the above was paraphrased from a great post by Paul Irish: Font Rendering: Respecting The Pixel Grid

In practice this means that Windows users tend to think type on a Mac looks blurry and Mac users think that type on Windows looks jagged and crappy. Also, and more important is that a font needs to be hinted for Windows ClearType renderer or else at sizes under 20px it becomes ugly and often illegible at smaller sizes.

For a more detailed breakdown of how fonts are rendered check out this awesome font rendering chart by Miha.

What does this mean for the typefaces in the Google Font Directory?

So if you are a Mac user without a Windows box around you’ll mostly want to know which fonts are ugly/illegible at small sizes. I’ve taken a brief look at the fonts Google offers on my Windows PC here at work and came up with the following list. Note that some of these typefaces are meant as display only so they shouldn’t be used small anyway:

UPDATE: for a more complete chart with screenshots including Windows Standard Mode and no anti-aliasing check out Comparing Open Source Fonts – Part 2

Open Source Fonts Appearance With Windows ClearType

Open Source Fonts Appearance With a Mac

You’ll notice that I haven’t compiled a table like I did for Windows. That’s because Mac font rendering stays true to the font; thus, you can assume that display type fonts look bad at small sizes and fonts made for body text are good down to at least 12px. Also if you are on a Windows box you can easily see what it looks like on a Mac:  Download Safari and turn on it’s font smoothing (Preferences > Appearance > Font Smoothing > Light or Medium) which makes the font rendering behave (mostly) like a Mac.

*Inconsolata is a good example of a font not hinted for ClearType which looks ugly on Windows below 24px and becomes illegible at 14px; however, on a Mac it looks good even at 11px.

I’ve been using Posterous for a bit now and I really like it. Though I do hope they make an upgrade to the bookmarklet so that tags are easier to include when posting ‚Äî their current solution for this is rather kludgey.

Posterous is interesting as I’ve also learned how I use it, which is different than how I use my other means of sharing things I have found on the world wild web:

• My Delicious links I use primarily for myself. As I use multiple computers it’s a means to store all the links I may want to keep in a easy to search place that is independent of any machine. Basically, I add links to delicious with little care if anyone else finds them interesting.
• My Google Reader shared items is basically just for sharing nifty blog reads with others, and I only use it while reading things in Google Reader. I mean I guess I could use the Note in Reader bookmarklet to share items while websurfing, but for some reason it doesn’t seem like the right use.
• So now I’m also using posterous which you can see at links.catcubed.com. Which I’ve found is perfect for grabbing little random web snippets that I find here and there; namely, pictures and video I want to share.

Posterous is also nice as it allows you to autopost back to your blog or twitter or facebook or whereever — though as I hate the idea of posting everything everywhere, I wish the bookmarklet had more fine-grained control over this.

I’ve found through use of posterous that I don’t use it really often so I’ve decided to let it autopost to my Catcubed blog; this way they will find their way into my rss stream which I want. However, at the same time as I don’t want the front page of CatCubed to be cluttered with random shared links, so I’ve set up¬†I’ve set up wordpress using the Advanced Category Excluder plugin to exclude all uncategorized posts from the front page. This seems like the easiest solution as all I need to do is add a category as a tag and it’ll no longer be uncategorized and thus will showup on the front page.

Anyway, I bet you don’t care about any of this, but I find it useful to write about my process.

I for one don’t understand all the uproar about the new Google Shared feature. I posted my shared items as a list on my public blog from day one of using Google Reader, and I have enjoyed followed the shared items of others like Scott Beale of Laughing Squid. I was really happy to see the shared feature expand as suddenly new interesting articles popped up from friend’s shared items. And when I first saw mention of the uproar on Daring Fireball, I was confused.

I mean what did these people think the word “Share” meant? Sure your shared items were very slightly obfuscated behind a unique url, but come on folks! It says right there “Your shared items are publicly accessible.” How can one ever assume from that statement that it was private? Without password protection (even then it’s suspect) your actions are there to find like anything else you do online — get used to it.

It amazes me that a lot of people still assume that they are anonymous online. Well as a certain terrible ad campaign might say, “welcome to the social.” It’s web 2.0 baby! We are now in the era of kids getting expelled for posing as gangbanger wannabes on myspace, cyber-bullying on facebook, and copywrite battles on flickr. You may be home in your underwear surfing on your laptop posting as jackalope1, but for all intents and purposes you might as well be in town square wearing a paper bag on your head while shouting at a security camera with a megaphone.

There are ways to be private online, but you gotta work for anonymity these days — always start with the assumption that nothing you do online is private.