Geekfindr: Web Fonts edition
Continuing on with my design theme this weekend… there are no shortage of times when I’m faced with needing to figure out what fonts to use and in white size, weight, etc.. to use them. Often, to some degree there isn’t that much involved, but every now and again you need to get a little more nitty gritty. Historically, for me, this has been a trial and error sort of approach, change some facet, reload the page, evaluate, rinse, repeat.
Fortunately, again the web comes to my rescue. I’ve been using two resources. The one I came across first is really nice, a tabular chart of common fonts across mac and windows. It shows them to you in normal and bold and gives you the names of the family for each platform. It’s perfect for when you want to pick your font-families because it gives you a view of them all at once. However, the thing I like most about it is that at the bottom of the page there’s a series of links for browser/platform combos of screen captures of that table so you can see exactly how these fonts appear for everyone. This has come in pretty handy for me.
I’d been using that for a bit, but felt that itch again because it was limited in how it showed the text of the font and importantly how the font appeared at different sizes. So the hunt began again and I came across TypeTester, a web2.0 style font viewer. There’s a lot to like about this. First you can set all sorts of parameters, not just font, size and weight, but leading, tracking, colors, etc.. Also, it let’s you pick three sets of these and shows you the results side by side so you can easily compare the differences between what you’ve chosen. You can set the text it uses for it’s sample elements, which defaults to some lorem ipsum gibberish. As the cherry on top, once you’ve figured out what you want to use it will show you the css used to generate it so you don’t even have to reverse engineer what you’ve done.
These two tools together give you all the typographic info you could want. I usually use the WindowsMacFonts first as the broad stroke to determine what I want to use and then finetune using TypeTester. If you do a lot of work on the web and find yourself twiddling fonts a lot, I think you’ll definitely save yourself a bit of time checking out those two sites.
