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

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

Tracy Graffin - Graphic Design - Brand Design

Tracy’s website has many examples of her excellent Graphic Design and Brand Design work.

Some of the websites running on our platform that have been designed by Tracy include:

• Moombaki
• Nick Melidonis and Denis Glennon and Iconic Images International
• Sebastiano’s Outdoor Kitchens
• Ningaloo Holiday Homes
• FinFish and EnviroFinfish

If you want to work with a designer who can do ’simple and clean’ then you should talk to Tracy.

New Graphic Designer Portfolio Website

Ever since I read Seth Godin’s Big Red Fez I’ve paid a lot of attention to what he says about websites and web design (I paid attention to what he was saying about marketing well before that).

This post from Seth is short and sweet. And worth absorbing.

The First Question Every Web Site Designer Must Ask

Questions for Web Designers

The number of people using 800×600 resolution monitors or lower has got to the point where in most cases this segment can safely be ignored.

If you are designing for a minimum resolution of 1,024 px wide (which translates to a 984px wide web page layout, once you allow for scroll bars etc), perhaps 2 to 3% of your visitors might encounter the dreaded horizontal scrollbars. Not many. And if you are running a business website, are you that concerned with visitors who have such old technology?

Looking ahead, the next significant screen resolution to consider is 1,280 px wide. If you designed for this width, more than a third of your visitors would need to scroll horizontally – not good. So we are probably going to see 984 px width web designs the maximum width for a while.

Based on my set of stats, the following table shows the the main screen resolutions and the % of visitors who would need to scroll horizontally if you designed for this width:

Down at the 320px level we are looking at the iPhone platform, and different rules apply here. Designing business websites for the iPhone platform means using a separate website, quite possibly yourdomain.mobi, so buy your domain if you can.

Screen Resolutions and Web Page Widths – April 2009

See a font, take a photo, and your iPhone will identify the font that is being used (designers will love this).

It seems the iPhone wants to help make sense of the world for us.

Tweaky, but useful

Designers will love What The Font for iPhone