Redswish

Carefully crafted banter

Taking typography seriously

Typography
A typography post has been long overdue on Redswish. And just when I was getting geared up to get stuck into one, Craig Ward published a fine article in this months Creative Review on the shifting role of typography in advertising. I’m afraid if you’re not a subscriber you probably won’t be able to view the full article, so I’d most certainly recommend getting hold of this months issue because it’s one of the finest in months.

Craig’s article looks at how we can adopt great typography to portray our messages without the need for obvious visual hand-holding and the ‘witty juxtaposition of images’ to force an idea or message across very quickly, summing it up well with the final line “A picture may paint a thousand words, but conversely, with a thousand words, who needs pictures?”.

A recent article on Smashing Magazine featured some inspirational floral typography in both print and web that in some cases was breathtaking, and certainly didn’t need any distracting visual accompaniment. The typography really did speak/read for itself!

Typography on the web

It’s not just in print that typography has been pushing forwards. With greater adoption of technologies such as sIFR, cufón and @font-face we’re seeing a wider spectrum of typography usage on the web. Although it’s not always for the best. With this open access to all sorts of available font families the barriers begin to fall and the standards set in place to help ensure accessibility and legibility on screen can be disregarded. That’s before we start considering the legal implications of using anyone’s fonts left right and center!

Mark Boulton’s presentation at FOWD London looked at how it’s not about the fonts we use on the web, but how they’re used. This is very important to consider. Before we open the floodgates to all sorts of web-safe and web-unsafe fonts and flash replacement etc – are the default web-safe fonts really that bad?

Georgia is your friend. Really, it is. It took me a while to realise it though!

I may sound like I’m contradicting myself here, but the point I’m trying to make is about how, where and when typography is used on the web. In my opinion body copy and general headlines should stick to web-safe fonts. But feel free to go typocrazy with main headlines, banners, logos and general big bang visuals – hell we’re designers – let’s have some fun!

Taking typography seriously

Whether you’re a print designer or web designer or both – please never overlook the importance of typography. Imagery, colour, composition, copy, layout, usability, accessibility and cross-browser compatibility are all essential building blocks of the design process but typography should never by any means be considered the quiet kid in the corner, it should never be overlooked.

But hey – you already know that, right?

Bucking the trend

Design trends come and go. Some stick around for longer than others. Some typography predictions for design on the web (and print in some cases) in 2009 include letterpress/embossing, large font-sizes on intro copy, semi-transparency, handwriting fonts and organic/grungy typography. But for the love of god don’t take these for rules. Experiment, have some fun, try new and interesting approaches! In some cases look to the past for inspiration for the future.

As suggested by Mike Kus – “Buck trends & break conventions – look away from the web for inspiration and become a trendsetter.” I agree – do that.

A few typography resources for you. If you’ve got a couple of hours spare, spend it cruising through these links:

So what are your opinions? How important do you feel typography is to your designs? And any great resources or sources of inspiration you’d like to share? That’s why there’s a comments section – let’s hear from you!

Comments & Opinion

9 Responses. Have your say.

  1. Given that we do so much reading on the web, I think typography is of fundamental importance. I’m especially interested in the traditions we’ve inherited from printed media, which have been about improving readability since the invention of the printing press.

    Here are some cool resources I’ve found on my travels:

    The Elements of Typographic Style Applied to the Web

    Five simple steps to better typography (Mark Boulton)

    Typographical Scale & Rhythm (Iain Lamb)

    Beautiful Web Typography: 7 tips on de-sucking the web

    42 Amazing Resources for Inspirational Typography (SpeckyBoy)

  2. Pingback: CSS Brigit | Taking typography seriously

  3. frasi, on , said:

    95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

  4. Pingback: The week in links 12/06/09 - Craig Baldwin's Blog

  5. Pingback: Arbenting’s Weekly Inspiration and Best of the Web #9 | Arbenting

  6. nathan, on , said:

    Another resource I’d like to point you to, some great inspiration here as well:

    - http://sixrevisions.com/design-showcase-inspiration/30-creative-typography-art/

  7. Lovely article! I totally agree! It’s damn important but also hard to handle I guess. I mean, picking some colors isn’t easy either, but to use the right fonts you should really learn about typography. And I think a lot of designers didn’t. Including me and that pretty sucks!

  8. As you said, typography should never be under-estimated. I love it! To get into the perfect combination isn’t easy and it ultimately tests the person’s skills. Typography and Calligraphy both allows creativity to flow and provide us with a refreshing look and colors.

  9. nathan, on , said:

    Thanks Mark. That’s a great, principle point. We spend so much time reading on the web that typography should be of fundamental importance. The fact is that aside from serving a purpose to convey textual information – type should also be visually pleasing.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>