Tag Archives: Web Fonts

Hey look, new fonts

I’m sure by the time you read this, 5 years from now, I will have changed things 8 to 10 times since writing this, but as of right now… hey, look. Same old site design, but with new fonts!

One new font, actually: Work Sans, in three weights. It’s a great new, no-nonsense but aesthetically pleasing sans serif font that is free which makes it extra nice. (Though I do not begrudge font designers the right to compensation for their work.)

This one initially got my attention by way of a blog post by the great Khoi Vinh. I figured, if he likes it, it’s worth noting.

Yes, it’s… yet another redesign

I’ve redesigned this blog more times than I can count. Many of those redesigns have been incremental tweaks, to be sure, but still, there’ve been probably dozens of times that I’ve completely torn it down and rebuilt it, more-or-less from scratch. This is one of those times.

I’ve also (finally) wised up a bit. Usually when I post these redesign announcements, I don’t include a screenshot… as if this is the last time I’ll ever redesign the site. I wish I could go back to some of those earlier posts and see what the site actually looked like when I announced the changes. I can remember most of them, even from the pointless ramblings I composed to commemorate their creation. But it would still be nice to see them on the outside of my brain.

There are some big changes in this version. Most significantly, I’m using two (relatively) new technologies as both key components of the underlying structure and also as inspiration for the design itself. They’re created (or at least inspired) by some amazingly talented people in this field, so they deserve recognition.

First, the fonts are being delivered by Typekit. Finally, web designers have more fonts at their disposal than Arial, Georgia and Verdana. (Yes, there are some others, but these three are the most excessively used.) There are some awesome people behind Typekit, but I especially want to call out founder Jeffrey Veen and creative director (and probably the best web designer on the planet) Jason Santa Maria.

Next up, we have a responsive web design using CSS3 media queries. (Yes, that’s probably the most boring possible link about one of the coolest technologies out there right now in web design.) I think we have Ethan Marcotte to thank for devising this brilliant use of CSS3 media queries to dynamically adapt web page layouts to the size of the browser window. At the very least, he named it and helped spread the word with the aforelinked A List Apart article and his new book.

In short, by employing CSS3 media queries to adjust the page layout to an appropriate width and number of columns (and smartly resizing elements within), it’s possible to easily adapt a web page’s presentation to suit the capabilities and dimensions of a number of screens. Just take a look at this site on your 27-inch iMac and then on your iPhone (or your roughly equivalent non-Apple devices) to see what I mean. I’m sure I’m not doing Ethan’s work justice, either in my description or in my application of it here, but I’m excited about the potential regardless.

It’s a great time to be a web designer!

Update: I went for less than 48 hours with Futura PT Light as my primary font for body text here, despite knowing it was too light and, perhaps, too geometric for good body type. Finally, at a friend’s prodding, I resorted to the inevitable: Proxima Nova. I love Proxima Nova. It’s the primary font I use in all of my business materials (and in my logo itself). I had envisioned a kind of ’50s retro school textbook concept with this site redesign, and Proxima Nova, a 21st century font, doesn’t fit that description, but… man, it just looks so good. So, now it’s here.

On IKEA’s sad validation of Verdana

IKEA 2010 catalog, set in... GAACK! VerdanaAny use of a font is a validation of its aesthetics, and since I find the aesthetics of Verdana appalling, I am sad to see it get validation from the likes of IKEA.

I feel like I got a bit of a scoop here, because I first noticed the use of Verdana at IKEA about a month ago. At the time I thought it was a fluke — I saw it on one of their vertical banners, posted near the cafe, and it appeared to be a locally-produced sign advertising some particular regional specialty they were temporarily adding to the menu. It looked like someone at the local store had tried to design a banner to match the corporate standard, but was ignorant of the nuances of fonts, and used Verdana because they either didn’t have Futura or couldn’t tell the difference (gasp!)… or both.

But then earlier this week I was leafing through the 2010 IKEA catalog that was sitting on our coffee table, when it struck me that the whole bloody thing was set in Verdana. How could this be?!

As I said, I feel like I got a bit of a scoop here, because I mentioned this observation on Twitter three days ago, and only now is it showing up on Daring Fireball via lonelysandwich via Hunk-O-Mass via jhn brssndn via hellaposer via Typophile. And apparently Typophile does not yet have the bandwidth to handle being “fireballed” and “sandwiched” (and… uh… “34ed”… yeah, that’s it), since I can’t get it to load right now.

I feel like I’m in good company though, because these guys are echoing my longstanding sentiments towards Verdana. From Gruber:

I have never seen Verdana look good in any way other than in small sizes on-screen.

And, even more on-the-money, from Lisagor:

Sure, Gruber uses it tastefully, but at anything larger than 11pt, it feels to me a bit squat and dopey. Friendly and readable, but a little bit simple, in the way you’d say a person is simple, but only behind his back.

Well played. Part of IKEA’s rationale is that “they want to be able to give the same visual impression both in print and the web.” Well, that can be done without resorting to this abominable solution. Especially with the imminent ascension of @font-face.

Here’s hoping 2011 will bring a return to sanity.