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:
- Use images (exported from the Photoshop PSD file) to display the text on the website.
- Use a standard web-safe font (eg Arial or Verdana) instead.
- 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.