Archive for the ‘Graphic Design’ Category


Finding similar fonts using Identifont and Typekit

December 3rd, 2009 by James

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.


WordPress Typekit Plugin

November 16th, 2009 by Glenn

typekit-logoWhen 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.

The easiest way to use Real Fonts on your website.

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.


New Graphic Designer Portfolio Website

August 25th, 2009 by Glenn

Tracy Graffin has designed a number of websites that have been implemented on our platform. And none more important than her very own.

Tracy Graffin - Graphic Design - Brand Design

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:

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


Questions for Web Designers

May 3rd, 2009 by Glenn

Getting a good design for your website means asking the right questions. Of yourself and your web designer.

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


Screen Resolutions and Web Page Widths – April 2009

April 25th, 2009 by Glenn

I’ve noticed quite a sharp change in screen resolutions from the Analytics logs on various sites.

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:

Screen Width (px) % Requiring Horizontal Scroll
320 0.01%
800 0.6%
1,024 2.7%
1,280 38.3%
1,440 61.4%
1,680 75.7%
1,920 91.3%

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.


Designers will love What The Font for iPhone

March 4th, 2009 by Glenn

whatthefont-for-iphoneHear some music, record a snippet and your iPhone will tell you what song it is.

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 :)