Snooping web fonts made easy

Sure, you can find out all you need to know about fonts on a web page by inspecting the code with Firebug or the likes, but the WhatFont bookmarklet makes font snooping super easy.

WhatFont is a clever little script by Chengyin Liu, a Computer Science student at University of Illinois. You add the bookmarklet to your web browser and once activated it tells you what fonts are used on a web page by hovering over the text in question.

WhatFont bookmarklet

But wait, there’s more!

WhatFont bookmarklet

When you click, a little window opens up with information about the font stack, size, line-height, colour and even the web font service provider. Sure, you can find out all you need to know about fonts on a web page by inspecting the code with Firebug or the likes, but the WhatFont bookmarklet makes font snooping super easy. And hey, if you want to tweet about the font discoveries you make, there’s a button for that too…

Good Google web fonts

Having trouble finding the best Google web fonts for your next website design? Chad Mazzola wants to help you out…

Google web fonts is a great initiative providing a simple and free way of adding real fonts to your web design projects. I have been using their service for a while and the only complaint I have is that finding the right font among the 400+ typefaces can be challenging. Apparently Chad Mazzola of Cambridge, Massachusetts (not England) has encountered the same problem, so he has kindly taken it upon himself to help us out.

There are currently over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look.

Beautiful web type is a growing showcase of the Google web fonts Chad finds most deserving. You can click each specimen to find the font in Google’s directory.

Google web fonts

Google web fonts

Google web fonts

Nice site: Cast Iron Design Company

Cast Iron Design Company has not forgotten the reason we designers got all excited about the prospect of web fonts in the first place: the ability to use real fonts for typographic design instead of replacing text with images…

I don’t often feature websites on here. I guess the whole web font “revolution” of the last two years has sent designers into a flurry of experimentation and the results are often a little underwhelming.

People like Jason Santa Maria and Trent Walton have been nudging us in the right direction, showing us the power that this culmination of typographic awareness, innovation and browser support holds. As we all know, with great power comes great responsibility, and in exploring this new frontier, best practices have been something of a grey area.

But hey, let’s not forget the reason we designers got all excited about the prospect of web fonts in the first place: the ability to use real fonts for typographic design instead of replacing text with images!

Without analysing the design of Cast Iron Design Company‘s website, I simply want to commend them on taking advantage of this ability. The design duo from Tucson, Arizona has made liberal use of web fonts (via Typekit) and CSS3 techniques throughout.

I was a little disappointed though, to find that the header design (which differs from page to page) makes use of image replacement instead of real fonts. Come on guys, you have taken it this far, now how about those headers?

*throws down the gauntlet…*

Cast Iron Design Company

Cast Iron Design Company

Cast Iron Design Company

Cast Iron Design Company

To see it for yourself, go to Cast Iron Design Company.

Web Typography for the Lonely

Web Typography for the Lonely is an ongoing collection of experiments and writings on, you guessed it, web type. Each entry features a demo and write-up explaining how the result was achieved.

Do you find your relationship with typography more fulfilling than any other? Do you remember complex lines  of Javascript off by heart but forget your best friend’s birthday? Do you feel that CSS3 just may be your soul mate?

If you answered yes to any of these questions the chances are you may end up lonely… but don’t despair, there’s a website for you: WebTypographyfortheLonely.com

Web Typography for the Lonely is an ongoing collection of experiments and writings on web typography and the possibilities of standards-based web design. It aims to inspire the web community by pushing the boundaries of what is both possible and practical in web standards in a manner that is compelling and exciting to the visually-minded creative.

Web Typography for the Lonely

Created and maintained by Baltimore based designer Chris Clark, each entry features a demo and write-up explaining how the result was achieved. Check it out!

Jason Santa Maria rethinks his website

Who would launch the tenth anniversary redesign of their website on a Friday afternoon? Well, probably only Jason Santa Maria. His twitter bio sums up his unfortunate predicament: “Designer by day, designer by night.”

Who would launch the tenth anniversary redesign of their website on a Friday afternoon? Well, probably only Jason Santa Maria. His twitter bio sums up his unfortunate predicament: “Designer by day, designer by night.”

Based in Brooklyn, New York, Jason has positioned himself as the godfather of modern typographic resources – here are a few of the offices he currently holds:

  • Co-founder of Typedia, which as the name suggests is an online encyclopedia of typefaces
  • Creative director for Typekit, a subscription-based service offering hosted web fonts
  • Lecturer for the Interaction Design program at the School of Visual Arts in NYC
  • Creative director for the online web magazine A List Apart
  • Co-founder/designer of ALA’s publishing wing A Book Apart

The other projects and events he is involved in are innumerable, so instead of trying to figure out whether Jason has a clone army or just never sleeps, go over and take a look at the latest incarnation of jasonsantamaria.com.

The previous version of his website/blog introduced the concept of a custom design for each article as opposed to having entries conform to a rigid template, but this posed an unforeseen problem:

In order to post something, I felt it couldn’t be short or just a quip on a topic, it had to be substantial. I fell into a design trap I unknowingly set for myself. – Jason Santa Maria

Here’s a screenshot of the new home page design which allows posts of various lengths to co-exist in one stream. It features one of my favourite fonts Chaparral for most of the text:

Jason Santa Maria website redesign

Personally I don’t think he is breaking new ground with this less-is-more offering, but when Jason Santa Maria redesigns it is always worth sitting up, taking a good hard look and perhaps even a leaf or two from his book…