The new generation of web typography05.18.12   |   Posted in: Art & Design   |   By: Kellis Landrum
I love the internet. But as a design professional I can understand why a lot of my peers don’t want to touch it. Too many restrictions, too many technological barriers, too many hoops to jump through. I can’t deny any of this, accept to say that every year, almost every month, what we’re able to do on the web gets better.
For a lot of traditional designers, nothing about the web is more frustrating than a lack of good type options. I’m not talking about being able to use the House Catalog on your site. I’m talking about using basic traditional type with well drawn letters like Helvetica Neue, Trade Gothic, or DIN to organize and brand large volumes of information. Being able to use a good type face with a few different weights and widths can help you communicate in a way that’s clear and concise. It’s extremely useful to organize large volumes of information. And not so coincidentally, organizing and sharing large volumes of information is essentially the whole point of the internet.
Well here’s the good news, in 2012 a whole new world of typographic possibilites is opening up.
Web font’s have slowly started to trickle out, but they still haven’t made much headway on the large scale sites that need them the most. I’d really love to see Facebook, Google, Amazon, and especially Wikipedia start to take advantage of this. But alas, since I don’ have any of those to use as examples. I’m resorting to talking about a few projects I’ve worked on as examples. Roll your eyes now, but if nothing else click through to a few of the juicy type examples and see for yourself what we’ve got o work with on the web these days.
Font Site Sans (Helvetica Neue)
Did I mention everything’s easier with a few extra weights and widths? Did I mention I just want to get the same kind of control I’m used to in print? Well now I can. In fact I did. If you want to see this in action I did quite a bit of work with this on the new Hard Rock Hotel redesign. This is a massive amount of content between rooms, gaming, parties, concerts, etc. Could we have pulled of this kind or organization let alone branding with Verdana? Believe me I’ve tried. I’ve even come close. But while I could get the user experience “good enough” with a system font, it’s like riding the Tour De France on a fixed gear bike. Did I mention Verdana just gets uglier when you use it for headers? Right, lets move on.
I got this whole family for a whopping $17. If you design websites and don’t have a copy of this you should go buy one right now and start using it.
Yes, you’re reading right. Caslon. The same one you use in print has been licensed by Adobe to TypeKit.com. I did Photoshop comps for ShorewoodOvation.com with Adobe Caslon, and when we looked at the site in browser the typography looked AMAZING. Granted, Photoshop does a better job rendering type than (probably) any browser ever will, but the type in the browser looks astonishingly close to the comps.
Type does look slightly lighter/heavier at small size between IE, Safari, and firefox as you would probably expect. That said, the type still looks good at small size and the difference between all browsers and Photoshop virtually disappeared for headers or anything above 16px. If you know how to use serif type you love Caslon. It’s soooooo nice to get that classic look on the web. I see JCrew use this all the time in print, and If I we’re working on their site mixing in some Caslon is the first thing I would do.?The only downside? Typekit is subscription based. But if you get a subscription you can use all the font’s they offer across as many sites as you want. Personally I didn’t find a ton I thought were worth using, but at $50/year it’s affordable for almost any commercial project. There are a few noticeable absences of Adobe offereings on typekit (Trade Gothic, where u at?) but if they add more in the future this is a slam dunk.
If you hail from the “Let’em try and sue me” school of thought you can always try converting you’re old fonts to web fonts. This doesn’t work for all fonts (especially older ones), but I got quite a few of mine to work (just for testing purposes, please don’t sue me Adobe legal team). I wouldn’t recommend this for commercial projects, but if you want to try it for your own personal purposes you can use Type Kit’s generator.
There are a few other notable offerings worth linking to. If you’re going to design Photoshop comps it’s a good idea to make sure your fonts are in a format Photoshop can work with BEFORE starting design.
If you have any personal favorites, be sure to link to them in the comments!