Ampersand 2013

I confess, I haven't been in touch with the latest and greatest of typography for quite a while. So it was great to get reacquainted at Ampersand Conference at Brighton last month. A little late, but I thought I will give a round up of my take aways.

The day started brilliantly with the famous Erik Spiekermann. What is great about Spiekermann is his very adaptable attitude as well as being a brilliant designer and typographer. He even runs his design agency in an agile way. Now that's progressive. 

Helvetica v Spiekermann

"It's called Neue F***ing Helvetica"(It's not Helvetica Neue!)

"Somehow those designers who worked in London like to use very thin Helvetica. I call it Clerkenwell disease."(On the new Apple iOS update by Sir Jony Ive.)

Now here is the test. Can you tell which is which? (Hint: One is Neue Helvetica and one is Arial for those who are not typographic geek.) The answer is found at the bottom of this post.

Helvetica v Arial
Helvetica v Arial

Test, test, test!

'Test' was the word pretty much all speakers mentioned. Whether they are type designers or typographers or developers, if you do anything to do with typography, you must test.

Test to be fit for purpose

transport font being tested on the road
transport font being tested on the road

The font used for Gov.co.uk is the famous Transport typeface which was drawn by Margaret Calvert and Jock Kinneir for the use on British Transport. What's remarkable about this is the fact that they tested to make sure the type was readable from a speeding car in the rain at night. It was adapted for screen use by Henrik Kubel with support from Margaret Calvert.

You can read more about their typography adventure in their blog - A few notes on typography.

Nina Stössinger who designed a very comprehensive Ernestine typeface also talked about how she tested and tested her typeface for 3 years (!) relentlessly to make sure it works in every conceivable combination and size.

Test to be consistent visually and functionally

In the context of webfonts, different browser renders the same font differently. Sometimes completely differently. Broad rules are: Fonts become thinner on Windows and fatter on Firefox. Size matters too. Some fonts don't look the same at large and small sizes. 

The issue has been mentioned by many speakers. 

Here are some samples of PMN Caecilia font in different browsers. (Example elements are from Fonts.com)

Webfont rendering test
Webfont rendering test

You can avoid getting stung by these issues by testing your fonts before you choose at places like MyFontsTypekit and Fonts.com who offer 'test drive' to see how it displays on various browsers and operating systems. They don't always work, but it will give you a good idea.

Now, I am in the camp that believe sites do not need to look exactly the same in all browsers. It is a very, very slim chance that anyone says "oh, the type looks different on my 3 computers, so I'm not buying from this site" (unless you're a graphic designer obsessed with typefaces). However, it is important to make sure they are equally readable. You might need to up/down the weight (choose regular over light or bold over heavy), up the size to ensure it still does its job, or look for something else.

Type designers are working hard to make sure their fonts work well in all situations by adding hinting which seems to be a real art. So look out for hinted fonts in general. If not, you could try adding them using a web service like FontSquirrel's Webfont Generator. It's not perfect, but it might help. 

Test for performance

There are some implementation challenges with web fonts. Both Gov.uk and Andy Hume mentioned using Base64 to download fonts (fonts are written out in plain text and included in CSS) rather than linking to an url in order to be fail safe as it can stop content loading. If you catch any site displayed everything but text, it's probably because some webfonts failed to arrive. 

Here is a blog about how Gov.uk used Base64 - Webfonts in practice

Responsive typography

Mark Boultonz made a good point - "Typography is inherently responsive". It is about clarifying the hierarchy of content and giving it a correct flow that works even if it's container changes. As websites became more and more responsive, having a good typography became an essential part of web design. 

Bringing problem upfront

Another good point Mark made - working in agile and having good typography at the heart of the design process forces you to bring problems upfront - bringing 'the content' upfront.

We need to know the content to make it truly semantic. Empty templates do nothing no matter how beautiful they look with Lorem ipsums. 

Workflow hints and tips

There were many good practical tips about improving workflow between designers and developers. It was not to the point to tell designers to code, but some tools and ideas to remove duplication of effort.

I've written a bit more about workflow if you're interested - No upfront design? Really?

Typecast

Typecast is a really neat tool that allows designers to design up typography in situ and pretty much all the speakers recommended. CSS can be generated from what you build up = removing the need for UI devs to interpret your photoshop files. I've tried a bit and it's pretty intuitive. At the moment it is very basic - you can't style bullet points or block quotes etc. But apparently the plan is to add more styles. 

typecast screenshot
typecast screenshot

Almost complete set of styles

Example of a page with all styles
Example of a page with all styles

I have mentioned about extremely entertaining developer Jenn Lukas in my previous blog but one of the exercises she recommended was for designers to design up all the basic text styling even though they don't appear in your wireframes. It's a bit like creating a one page style guide. 

It sounds like a no brainer, but I'm sure not all of us got around to do it. It helps you work out typographic hierarchy that works in any context (it's responsive, remember?) as well as avoiding the potential horror of content management system - "Wow, that table looks completely out of place!". 

Icon fonts

Another idea Jenn introduced was how easy it was to create icon fonts. I had every intention of making one, but since the demise of Fontographer, I fell out with FontForge and a long time has passed. After the conference, I tried using IcoMoon's free Chrome app and totally fell in love with it. 

Why use icon fonts? It scales beautifully and perfect for colour coding. I had a concern with accessibility of icon fonts before, but it seems people found ways to address them successfully. I haven't tried creating anything like ingenious dual tone icons that IcoMoon pulled off, but Haro and I are having fun using them for every opportunity. 

IcoMoon screenshot
IcoMoon screenshot

Typography is no silver bullet

Brilliant type designer Christian Schwarts pointed out that typography alone cannot answer all the problem. The whole layout has to work well. When done successfully, people will be able to spot the brand even if it is in the wrong fonts. 

Can you guess which site this is? With the courtesy of Google Font Previewer for Chrome - it allows you to swap fonts on any site.

A site with wrong typeface
A site with wrong typeface

So, the most important thing is to implement the responsive aspect of typography. A hierarchy and a flow

Christian also introduced us to very entertaining screenshots of typographic misadventure in films - prime examples of what happens when we want something to look a certain way but it doesn't need to work in reality. But that will be the subject of the next blog as this one is getting too long already...

And...?

All in all, it was a very informative and entertaining conference. I recommend you to look out for the next year or go to the New York one (lucky you!) if you are interested in typography. And for those who can't wait, go and watch Helvetica - the movie dedicated to a typeface for now!

Answer to the font spotting question: The top one is Neue Helvetica, the bottom is Arial. Obviously Neue Helvetica is much better formed, but the differences in G and R are the easiest to spot to tell the two apart.

Sari Griffiths

Chief Design Officer

More from Sari