Turn Key Blog. Things we've done and the things we love.

Our Junior Designer Carl went back to his roots when he visited Leeds College of Art’s ‘End of Year Show’…

Having been part of the show last year showcasing my own work, I knew how exciting and well-thought of this annual event is. Attracting a number of visitors, including professional designers, studios and potential employers seeking new talent, the event really lived up to my expectations.

The exhibition took place in the Blenheim Walk Building and each student had a dedicated space to display their portfolios from the past two years, all accompanied by some beautifully printed business cards.

With a passion for all things creative, I’m always keen to find new inspiration and love discovering the next generation of designers. In particular, the Graphic Design course provided some really inspiring fresh designs from brand identity to illustration. The work presented was of such a high-quality that some of it could’ve easily been mistaken as a professional’s.

Rosalind Stoughton really stood out. I loved the typeface she created called ‘Fonecian’ and the rest of her work showed a strong approach to print and finishes.

Richard Robinson was another striking creative. His 3D type work and illustrations particularly impressed me, especially the awesome ‘Marvel’ designs which were not only attention-grabbing but demonstrated strong technical skills.

Naomi Farrar ’s branding work across a range of print was also exceptionally well delivered and photographed.

I managed to get some lovely photographs of the students’ work including one student who gives Turn Key a run for its money with a new menu and takeaway box design for our client, Chaophraya!

Designer Paul Hainsworth loves… McBess

Often design is thought to be the work of computers and so it’s really refreshing to see someone holding on to more traditional felt pen illustration. McBess has an amazing talent of bringing out shadows and light using only one colour.

His distinctive black and white style is influenced by old cartoons such as Betty Boop and Merrie Melodies and his drawings often feature himself surrounded by surreal elements including food and musical instruments. His work has a truly nostalgic feel but with a fresh and modern twist.

See more of his work at  http://mcbess.com/

Creative Director Richard Colvill loves… the work of Graphic Designer Dana Tanamachi

Dana Tanamachi is a graphic designer and custom chalk letterer living in Brooklyn, New York. We love this style she has developed and so do the likes of Adidas, Ralph Lauren & Google to mention a few.

Our blog header has taken inspiration from her work!

See www.danatanamachi.com for more examples and follow her on Twitter

A friend recently asked me: “What are your favourite fonts at the moment?”

Back in my uni days there was one font that always had residency in my top five: Georgia. As a designer working mainly in the web environment, Georgia stood above the limited selection of web fonts available and I used it religiously.

However, a year or so on and Georgia has slipped way down my rankings. It made me think how much typography has moved on in the last few years and how we are no longer limited to a handful of web fonts. In fact, with CSS3 features, the potential of typography on the web is almost inline with print.

Hosted web font sites
There are many hosted web font services that allow you to use traditionally non-websafe fonts on a website. They’re all pretty straightforward, polished services with fallbacks for older browsers. Services such as Typekit have a range of fonts from different foundries, but each one has a different set of fonts so you may need to browse several sites to find what you need.

Apart from the monthly running cost of a hosted web font service and a sometimes limited range of fonts, the main disadvantage is that the fonts aren’t hosted by the developer. This takes control away from the developer and if the service ever went down, all the fonts across your sites would stop working.

Here’s a good resource which compares the features of various hosted web font sites: http://sprungmarker.de/wp-content/uploads/webfont-services/

Font-face
An alternative to hosted web font services is font-face. It’s been around for a while and though it’s surprisingly supported by IE, it has only become widely supported in the last couple of years. It does allow you to upload fonts but, unfortunately, the technology is classed as a font distributing service and is therefore illegal for most fonts with commercial licenses.

However, on my last couple of projects I’ve noticed that there are a number of high quality free fonts which are similar to popular commercial fonts. Some of these are good copies of the original, whilst others just pay homage to a classic, but all are free to use and legal for font-face use:

Didot
Avant Garde
Myriad / Frutiger – Vegur
Bodoni
Helvetica
Palatino
Garamond
Gotham
DIN
Bembo

Font Squirrel has lots of downloadable font-face packs so it’s easy to set up on your site. It even has a generator which converts uploaded font files to formats needed for font-face. From there, you simply copy and paste a snippet into CSS.

Font-face doesn’t work on older versions of Firefox and Safari, so make sure a suitable fallback is defined. This can be done by using a good CSS font stack. For example, if you’re using Avant Garde, then Example 1 (below) would ensure that when font-face isn’t supported, a similar font (Futura for Mac and Century Gothic for Windows) will display rather than just reverting to Arial.

Example 1
font-family: “Avant Garde”, “Futura”,”Century Gothic”, sans-seri;

Sometimes on PC browsers font-face type doesn’t appear antialiased. This can be fixed with the following CSS declarations:

-webkit-transform: rotate(-0.0000000001deg); text-shadow: 0px 0px 1px rgba(0,0,0,0);

Finally, there is a Javascript font replacement service called Cufon. It’s a solid cross browser as long as Javascript is installed, but the type it renders isn’t selectable. This makes it suitable for headers but not for body copy. Overall, Cufon is a useful script if the alternatives aren’t available.

Web Font Kerning
Kerning all letters initially appears to be a really simple CSS declaration. It even allows you to accurately convert the ‘tracking’ value in the Adobe type tools into CSS using this simple calculation:

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

However, WebKit browsers Safari and Chrome have problems rendering sub-pixels and because of this, they’re going to have problems if you’re trying to kern to a fraction of a pixel. So, it’s best to keep your kerning to whole pixels if you want the type to look the same in all browsers.

It is possible to kern individual characters with the jGuery plugin lettering-js , however, it’s only advisable to use this for headers as it can be time consuming.

With the development of web typography and CSS techniques, developers no longer need to be limited. Now we can design something as it would be printed and more often than not it can be done on the web. It may take a few modifications to achieve this, but nothing can be achieved without pushing a few boundaries.

Having said that, sometimes, when I’m sat at home designing a website, it feels nice to set the typeface to Georgia italic…if only to transport me back to simpler times and feed my nostalgia.

Summed up in one line. Nice.

More here.