Examples of Beautiful Typography

Emma.Axelsson  

tate.org.uk

This might be because I spent half of my time in high school on their website and archives for my art classes, but I feel like the typeface the Tate use on their website is embedded in my brain. So much so, that when I’ve seen their billboards and ads in tube stations, on posters, and so on, I know it’s them before I’ve even read the whole message. There’s something open about its design, it’s almost inviting – which is interesting for an industry and institution traditionally associated with being ‘high-brow’, and perhaps even a bit ‘closed-off’/inaccessible.

It’s also interesting to also see that apart from their title/logo, this is the only font they use from what I could find. Instead, they rely on font weights, uppercase text and sizing to give their content structure.

Do I think this is the most beautiful font around? Er, no. I can’t say that I’m actually a fan of the typeface itself, but it suits the Tate; it’s a little bit fun, it. comes across as friendly, it’s definitely readable, and not-so-traditional. And with typography, I suppose that’s the crux of it all; does the typeface suit its content and context? For the Tate, I reckon they’ve ticked the boxes on this one.

monocle.com

The Monocle’s title typeface is another that’s always been stuck in my head, but I think their website is a pretty good example of how to integrate a title font alongside other choices to make good use of visual hierarchies and divisions in your content. Using the ‘WhatFont’ chrome extension tells me that they’re basically only using two fonts, Helvetica Neue and Plantin (three if you want to get fussy – they’re also using Plantin Bold Condensed, but I’d argue this adds to the feeling that there aren’t too many fonts going on here, since they’re in the same family). I think their website is a great example of using weights, uppercase text, italics and colours to do most of the work in creating those visual hierarchies to guide the reader’s eye through what is, in my opinion, an otherwise very busy home page.

Plantin is an elegant, slightly serious typeface to choose, matching the tone I find the magazine generally aims for, and perfectly contrasts with the use of Helvetica Neue for more ‘informational’ bits of text, such as date and time stamps, website sections, and link buttons. Additionally, it looks like the ‘headline/title’ is made entirely of Plantin which seems like a great point from the designer’s perspective – this would surely allow you more flexibility and ease of customisation in CSS, being able to scale up/scale down this title as required on any page, rather than messing around with images. The more time I spend on their home page looking at their typographic choices, the more I like it.

hawksmoor.com

I’ll be honest; the main reason these guys are on this list is because of the variety of typefaces on the ‘restaurants & bars’ menu once hovered over. Each restaurant has been given their own typeface, and I think this is an excellent example of where using multiple typefaces can be done really well. Using a unique typeface for each restaurant gives the latter their own identities in a really fun way, and it’s something I don’t think I’ve seen before (or if I have, it clearly wasn’t as well done – because I don’t remember it…).

I also like that they’ve simply used Georgia for the majority of their text. It’s interesting to see such a ‘basic’ system-font used, but I do think it works really well for their general style and brand that they’ve developed. And that’s one less worry about their compatibility on the end-user’s device!

If I’m being particularly picky, however, one thing I don’t like on this website is that some of the headings on the restaurant pages have particularly large measurements for their tracking. I’m not so sure I like the overall effect of this because it doesn’t read as easily, and on some of the longer heading titles, it ends up looking a bit odd.

Be the first to leave a comment

Leave a Reply

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