Case Study: Chessington.com
Our first look at webfonts in the real world takes us on an English safari, through Chessington World of Adventure, and lashings of Grilled Cheese.
At MyFonts, we sometimes get to see where and how our webfont products end up, and it was while looking over the list of urls that customers had submitted that this project for Chessington World of Adventure by Semantic in the UK caught our eye.
Our list of early adopters features many agency and designer portfolios and a healthy number of blogs, many of them making inventive use of webfonts (you can see a few in our gallery). Projects for corporate and institutional clients, on the other hand, are harder to find. Corporate rebranding exercises typically have a longer lifecycle, and most organizations will likely wait for the next round of development before considering the advantages offered by webfonts.
In 2010, Chessington World of Adventure underwent a rebranding which specified Grilled Cheese (from Breaking the Norm) as headline font. Unavailable anywhere as a webfont at the time of the rebrand, when MyFonts went live with web licensing earlier this year, Semantic were able to take advantage of Grilled Cheese's new availablity for web to implement their client’s brand in the site redesign straightaway.
Chessington.com doesn’t use webfonts exclusively throughout. The main navigation has been built in Flash, and there’s plenty of instances of promotional graphic elements made with Grilled Cheese. But what is notable is how seamlessly the three methods and technologies knit together both visually and from a user experience point of view. Flash allows for rewarding user feedback in the main navigation, the images will tie in well with offline marketing activity, and news about offers and events can be dynamically managed thanks to the use of webfonts in the headlines, while remaining prominent and tightly integrated into the visual hierarchy.
We asked Mike Gillett, the designer leading the webfont charge at Semantic, for his thoughts on the project and webfonts in general.
Mike, I notice from your profile on Semantic’s website that your origins are in print, but that you worked for an IT company in the middle of the nineties. Does the emergence of type onto the web feel like you have come full circle?
Do you find yourself thinking like a print designer again, or is there actually no comparison?
It’s certainly true that, until recently, typography on the internet has felt like a fudge. Relying on graphics or Flash for any ‘interesting’ typography has been a real pain, not least because of the work involved in making subsequent changes. One of the biggest differences between the web and print has been the flexibility to modify a piece of work, even after it is published, but the extreme limitations of web typography (until now) has been a hinderance to that.
These new typographic technologies are, for me, great news because I hate having to 'fudge' solutions — and previous techniques (like SIFR, Cufón or Typeface.js) have always felt like a 'fudge'. It's hard enough tackling all the cross-browser bugs and rendering differences without having to worry about font-replacement code too. Web fonts are still a new technology and browser support is still tricky but I think everyone can see the potential for the future. Until recently it was one of those “it shouldn't have to be this hard!” issues.
You’ve used Breaking the Norm’s Grilled Cheese for headlines and navigation on Chessington.com. Was there a brief, corporate style guide or an existing campaign tie in specifying Grilled Cheese?
Chessington carried out a major rebrand for their 2010 season, replacing their old Knobcheese font with Grilled Cheese. We were given branding guidelines that gave us the look-and-feel — our job was to turn this visually complex style (patches, ropes, leather and stone textures) into a flexible, cross-platform web design. The branding guidelines were very much about print so we had to interpret and adapt those elements for the web.
Did you have to introduce the new typographic possibilities to your client, if not with this project, then earlier?
It’s only in the last six months that we have started using embedded webfonts in our site builds. Some of our clients use fonts that are not yet available as web fonts. It just so happens that I found Grilled Cheese was now available and so, for the 2011 season, we have adapted the website to use the web fonts.
Provided we can get the fonts to work with stability on the major browsers — IE (7+), Firefox, Opera, Chrome, Safari — it makes a lot of sense for us to use them. They make it much easier to update the site, reduce the amount of graphic elements required, and simplify the HTML code from an S.E.O. point of view. Our client was very happy to make the switch once he'd tried and tested it on a development server.
Does it surprise you that rebranding exercises are still so focused on print?
It’s fair to say that I have yet to see a brand style guide that properly caters for the web. You might get some hexadecimal RGB colour values alongside the usual CMYK values, but these are usually worked out as an after-thought in Photoshop and often appear too dark on a computer display. Logos usually have unrealistic ‘white space’ requirements and there’s rarely a version designed for low resolutions (eg. 72dpi rather than 300 dpi).
Fonts have always been well specified though, it’s just that we haven't really been able to implement them until now. Historically it’s been a case of using Arial, Helvetica or Verdana for body copy and, if absolutely necessary, graphics for headings. Now, for the first time, we can look at the font and, providing it’s available and suitable for on-screen display (legible), use it. We may have to adapt colours and sizes for on-screen use but it’s good to feel like we can keep more closely to the original brand spec.
What do you think it will take for branding agencies to dissolve the relationship between print and web altogether?
I do think agencies have been slow to realise the importance of specifying brand identities for web use but I’m sure this will change. Ten years ago most of the web sites we built were ‘online brochures’, supplementing the print advertising already in use. Now these websites are primary sales engines, and often the most cost-effective part of the business. Companies have to take their online branding seriously because, for many, it’s their first chance to make an impression with a potential customer. It’s all changed.
And, speaking of change, we are now experiencing another shift from desktop computers to mobile devices. These iPhone, Android and other devices are changing the rules again. Suddenly we have to design for both high-speed broadband clients and low-speed (3G feels mighty slow to me!), small screen clients. The mobile Internet is growing at a much faster rate than the ‘traditional’ Internet did. So, once again, we are going to have to make design choices about file download times and interface clutter. It takes me back!
Finally, nothing ever goes smoothly. Did you have to tackle any technical or creative hurdles implementing the fonts in the design? How did you get around them?
Unfortunately we have had to remove the ‘fall-back fonts’ from our CSS as this was causing major headaches in Internet Explorer. The browser would keep ‘forgetting’ the web font and reverting something else in the font list. Removing all the other fonts (a solution I found here) got around the problem. It’s not ideal but, again, we have not heard of any related technical issues thus far.
We launched the web font version of the site back in January of this year and I'm happy to say that we have not had any reports of technical issues thus far.
Semantic are a web design agency based in Southampton in the UK. Their client roster is orientated towards leisure and entertainment, influenced no doubt, by this team of five's policy of not leaving fun at home. Nick Warren (MD) and Mike Gillett (senior designer) founded the company in 1997 and grew through the dotcom crash to create a successful business focused on building “beautiful engines of commerce”. Contact them at www.semantic.co.uk.Back...
Posted 29 Mar, 2011 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
A Guide to Using Illustrative Type on the Web
Fonts designed to look as if they were drawn, written or printed by hand — as if, in fact,…
Getting Started with Font Stacks
A font stack is the instruction in a page of CSS code that tells a browser what fonts to display,…
Webfonts and Autotranslate
Webfonts offer greater control and visual consistency when using automatic site translation. With a…