We recently had a project where the graphic designer used a non web safe font (GothamHTF Bold Condensed) for 90% of the text in the Photoshop PSD file.

Whilst we were converting/slicing this PSD into a HTML/CSS website, we had several options for the non web-safe font:

1. Use images (exported from the Photoshop PSD file) to display the text on the website.
2. Use a standard web-safe font (eg Arial or Verdana) instead.
3. Use Typekit (in combination with our new Typekit for WordPress plugin) so the website could contain plain text that could be displayed in a non-standard font.

From a design point of view, option 1 is the best option. This means that the website’s text is accurately displayed in images in the same font. However from a search engine and usability point of view, this approach is far from ideal. Search engines wouldn’t be able to index the content properly, and also visitors that use screen readers wouldn’t be able to understand the content very well.

Option 2 is best from a technical point of view – the website’s content/text is easily accessible for visitors and search engines, however from a design/visual point of view this means that the website wouldn’t accurately match the design that the designer came up with.

Option 3 is probably the best solution from both a design and a technical point of view (the text would be readable by search engines and visitors, and the font would display in the correct font). However in this case there was a problem – Typekit does not have  the Gotham font family available.

So what was the next best solution? In this case we decided to try and find an alternative font that is available in Typekit (and is as similar to Gotham as possible).

Now came the next challenge – browsing the Typekit site for a suitable alternative font. This would have potentially taken hours, if it wasn’t for a neat suggestion from one of our associates, Dave Young.

He suggested that we used Identifont to help us find an alternative font. Using this service, we easily found a list of alternative fonts. It was then a matter of finding the best ones, and then searching in Typekit to see which ones are available in Typekit.

I think that Typekit is a really valuable service, and I think that they would really benefit to adding a “similar fonts” option to their site.

If you know of any other ways to solve this problem, feel free to drop us a note in the comments.

Finding similar fonts using Identifont and Typekit

When the team from Typekit announced back in May they were planning a new font service, it sounded really interesting.

But now they have released it. And what a release it is.

We’ve upgraded om4.com.au to use Proxima Nova as our base font. And the fancy handwritten font in this post is Bello Pro, the font du jour on typekit.com at the time this post was published.

Given how hard it was to use non web-safe fonts previously, Typekit have just hit this one so far out of the park it isn’t funny.

Update: 16/11 James has completed our Typekit Fonts for WordPress plugin and published it to the WordPress plugin respository.

We will be integrating Typekit in to our WordPress sites via a new plugin, and I’m sure there will be a lot of options for WordPress sites in the near future.

WordPress Typekit Plugin