I get ribbed mercilessly for liking Type ‘a bit too much.’ The majority of people involved in a design agency like ours understand perfectly the importance of good typography – appropriate font selection, good use of space, solid typesetting etc. But I’m still seen as maybe being a little too OCDish about it all, maybe caring a little too much about whether that lowercase ‘i’ needs to be brought in a smidge (technical term, that) to balance it against its neighbouring ‘c’.
After being given the opportunity to attend the Ampersand Conference in Brighton, England on June 15th along with one of our web designers Tom Nightingale, I can say hand-on-heart that my interest in type is perfectly healthy behaviour, and maybe doesn’t go quite far enough.
The passion, pride, and attention to detail the speakers displayed far, FAR outstripped my own.
And it was a joy to be present.
The Conference has been built by Richard Rutter and the boys ‘n’ girls at Clearleft as “an affordable one-day event for knowledgeable web designers and typography enthusiasts”, and it delivered on every level. Full of interesting speakers, relevant topics, and – at the risk of repeating myself so early – the passion and necessity for good typography on the web and in its traditional medium of print, it was hoped the conference would leave a lasting impression on both Tom and myself.
So we dragged ourselves bleary-eyed into the Brighton Corn Exchange, full of excitement and even more full of coffee, to await what we hoped would be a great day.
Phil Baines – Where Are We Now?
After the initial welcome from Richard, the conference kicked off with a late change to the line-up. Erik Spiekermann, one of the world’s most prominent type designers and founder of FontFont, FontShop and the ever-present FontBook (the iPad app of which is a necessity for any designer), had to pull out the week of the Conference due to urgent family matters. Now naturally this left several people disappointed, but I would hazard a guess that when they announced that his quite sizable shoes would be filled by the Senior Typographic Lecturer at Central St Martin’s College, a man who has had several fine books on Typography published (one of which caused a massive stir with the ‘old guard’ when it was published 30 years ago), and who was heavily involved in the revolution of digital type in the late 80s/early 90s, most of those disappointments quietly shuffled away.
Professor Phil Baines took to the stage with great applause, and the quality and depth of his talk was frankly outstanding considering he had 2 days to prepare.
Phil began by outlining the dramatic rise in prominence of web typography. In his 2002 book ‘Type & Typography’, Webfonts had a small mention on a single page. When the second edition came to be published a few years later, it had its own spread. And now in the latest edition, it has a whole chapter dedicated to web usage and implementation through the grid system for the web. Webfonts had made their mark in the history of typography, leading on from the Gutenberg press of the 16th Century, the breakthroughs with mechanical typesetting in the 1880s, through to photo/film setting in the 1950s and the Postscript revolution of 30 years ago.
Ah yes, the great revolution of the Postscript fonts.
What is happening now with typography on the web was likened to the last great upheaval in typography in the late 80s/early 90s, when postscript fonts emerged and typography fully entered the digital age. It was a time where rules were broken, prominent experiments were made and furthered (anyone interested in that era, do a Google image search for ‘David Carson’; legendary and wonderful, we still owe the man a massive debt of gratitude), and there was a sense that new technology had opened up new frontiers. It’s hard to argue against the comparison really.
But I think what really resonated with the attendees was a simple point that Phil made, that type is not typography. The typeface is just one part of the equation, with the point size, line-height and leading playing roles just as important as the choice of type. This rolls into the design as a whole, with layout, colour palette, imagery and message all playing their part to create the desired effect and that should never be overlooked.
Yves Peters – Detail In Web Typography
Yves Peters’ talk very much carried on from Phil’s. He talked about typeface selection, mentioning a quote from Massimo Vignelli, saying “A designer only needs 5 typefaces”, but countered this, saying “Why should my 5 be YOUR 5?”. He went on to talk about the criteria that you need to think about when making your choice:
The Formal Aspects – The character shapes and the intended purpose of the typeface. Is this a typeface designed to be open and friendly? Is this a serious typeface? Is it meant to be bold and brash or is it meant to be used in a conservative way?
The Historical Context – Where does the font come from? Is it linked to anything in the past? What impact, if any, does this link have on your design and does it alter the meaning? Does the message you are portraying call for a modern typeface, or one rooted in a particular time?
Cultural References – Not only does a typeface have links to a particular point in time, but it can also have links to a geographical location, and how this can have an affect on what you are trying to say. This got raised again later in TypeTogether’s talk, when they showed a book cover that used Egyptian imagery but quite clearly Greek type (as well as Papyrus on the publisher’s mark on the back). He mentioned a talk Jon Tan had given earlier in the year which went into this in great detail.
Functional Criteria- Know what’s under the hood. With Opentype, the traditional 256 gylphs has risen to an eye-watering 65,536. If your typeface has things like Ligatures embedded in it, know what you have access to and use them when necessary (and when appropriate).
He went on to talk about looking at the typographical anatomy of the typeface, look at the ascenders and descenders, the x-height (the height of the lowercase letters), the cap height. When you have a feel for these, you can tell how the typeface is going to interact with the page and how to use it.
A lot of what Yves talked about was to do with special awareness and specifically how we read the characters using the space around them. As an example he talked about old and new-style numerals. New-style numerals, those that are spaced to be inline and the same height as the letters, tend to stand out more, but old-style characters, those that aren’t inline and are sometimes as low as the descenders, distract less when read in a block of text (Yves has written about it further). The different types of space (standard, non-breaking, hair, em, etc) can completely change the impression of your typography, but quite often we as designers don’t appreciate changing this space when the piece doesn’t look quite right; we look to add more visual clutter to the page, or change something that was working just fine. As Yves put it: “Designers can be doctors that don’t look at the ailments.”
TypeTogether – Typographic Matchmaking
TypeTogether’s José Scaglione and Veronika Burian are responsible for some of the nicest commercial typefaces available on the market today, so the opportunity to hear their own opinions on what makes for great typographic combinations was always going to be a highlight. Starting with a quote from Robert Bringhurst “Letterforms have tone, timbre, character, just as words do”, the duo proceeded – albeit slowly – as Jose insisted that Veronika had set their notes up at too small a point size to really show the consideration needed when assembling a typographic piece.
As was a theme of the day, their talk bled out from the preceding one by Yves, talking at first about type selection, considering the function, the aesthetic of the typefaces, what medium it is to be used in, whether it’s to be a title or bodytext, as well as if the license costs justify its usage.
They were keen to stress that you’ll nearly always struggle to really do a good job when restricting yourself to just one typeface. It is possible – they picked out Cloudberry’s site as one fine example of restrictive typography working well, but quite often you can achieve greater things, as well as still maintaining consistent branding, through matchmaking typefaces and not just using the logo’s typeface throughout.
Again, like with almost all the talks of the day, simplicity and straightforwardness are often the keys to getting your desired results. When you want to create emphasis, make sure it’s clear what you are trying to emphasise. Focussing on contrast makes combining fonts easier, if your font choices are too similar, your message can just look muddled and your font selection can look more like a mistake than a conscious choice, so go for fonts that have the right amount of difference. They suggested comparing your font’s x-heights to help decide on how good a match they are, and seeing how economical with space each typeface is, which can lead to deciding what purpose they should serve (if they’re better with space, it stands a good chance that they are better at presenting bulk information like paragraphs).
Contrast can also help with affirming the hierarchy of information on the page. Presenting all of the information on a page as having exactly the same importance can lead to not only something that looks bland and uninviting, but also something that can be hard to follow or prioritise. Use the strengths of your typefaces to your advantage, break up the information, make it clear which part is the priority, which is secondary, and which, if needs be, is optional/additional.
There were several ‘bad’ case studies that they showed to illustrate what they were against, predominantly from Czech newspapers and street signs, unsurprising given where the company is based. The London Olympic ‘get ahead of the games’ poster campaign, designed to raise awareness of travel problems for locals during the London Games, came in for some stinging criticism. Although some of the posters that I’ve seen are a lot better than the example they gave (unfortunately I’ve been unable to find the specific poster they showed), their example was pretty bad, with the message competing strongly with the web address which meant people’s attention was being split at the point you needed them to flow from one to the other (the London 2012 typeface was a particular grumbling point for many of the type designers in the crowd, as well).
They picked out Kitchen Sink Studios as a great example of matchmaking different typefaces to create something engaging and characterful.
Yet another Jon Tan quote (the man’s words were ubiquitous all day) really got the message home: “Embedded in fonts is an idea that can communicate to people and affect their mood on a visceral level.”
Linotype: The Film
During the break for lunch, we had the opportunity to see Doug Wilson’s documentary ‘Linotype: The Film.’ Still being powered by a sick caffeine burn and having already missed a screening of it the night before at the Pre-Conference shindig, we decided to forego with visiting the local sandwich shops and settled in to watch it.
The documentary is far more fascinating, compelling, and flat-out funny than any feature-length film about dead technology should be. You ask most people, especially those who have no connection to the design industry, if they’d like to see an 80 minute documentary about a machine that used to set out newspaper print and they’ll probably throw you a nervous smile, realise you’re being serious, and begin slowly looking around for a different person to talk to. But those who did take you up on the offer would be in for a fantastic ride.
The Linotype machine changed the world, and that’s not an understatement. Without it we wouldn’t have the mass media of today, we wouldn’t have the internet, we wouldn’t have unsolicited mail in our letterbox asking if we have been in an accident recently and how we would keep 100% of any compensation (ok, maybe it’s got a few things to answer for).
In the early days of newspaper-setting, the typesetter would have to take each letter by hand from the tray of metal type, and place them into the tray one-by-one until the entire page was laid out. The Linotype, this mad death-trap that looks like it’s going to eat you, automated all of this. Using three separate keyboards, the operator would type out each individual line, pull a crank which would space out each word so every line would finish at the same length, and drop the type into the hot-metal press which would punch out the line of text, which would then feed itself into the tray. Each character used would then feed back into the top of the machine and automatically drop down back into the relevant holding space for each letter. And this was in 1890!
The thing that made the film was that it was all done through the eyes and words of the people who used to operate the machine (the New York Times, like most newspapers, still used them up until the mid-1970s) and the madmen who still keep some running in the small independent print houses around the world. You could see that it was very much a personal tale, as one Linotype maintenance guy put it: “Once you’ve got hot metal and ink in your veins, you don’t get it out.” And it was genuinely sad to see these machines rusting up and being sold for $10 a pop to museums or for scrap. It may not necessarily be the film you would’ve thought to watch on a Sunday afternoon, but if you’re after a quirky, interesting, and often really funny tale, Doug Wilson’s film could be right up your street.
Jason Smith – Designing Fonts for Screens
So the audience reconvened after the lunch break for a final push, and it was the afternoon session which really pulled out the great ideas and the appreciation for where things are going with Type.
Jason Smith’s company, Fontsmith, has been responsible for a revolution in screentype. Fontsmith have made their name designing bespoke broadcast typography for the onscreen typographical idents for TV channels like Channel 4, ITV, the BBC, and Sky, as well as designing the official typography for UEFA and the Champion’s League (trust me, you haven’t escaped their work), as well as my favourite lower-case ‘y’ which is in FS Lola Extrabold Italic (yes, I have a favourite lowercase ‘y’, deal with it).
Jason took us extensively through the thought process in creating these typefaces, how they needed to have a visual immediacy that exudes certain qualities, how they needed to both fit into the existing brands as well as update them, and how they need to be identifiable with the branding even when there was no logo on screen to signify which channel it was. Typeface choice, almost more than any other visual element, glues the brand together.
He spoke about the challenge of getting broadcasters to invest in custom typefaces, but how once people had seen their work on C4, E4, and Film4, he found other broadcasters were far more open to the idea.
It was great to hear a success story born out of hard work and opportunity, and the thoughts and ideas that brought them to that place. It was clear that Jason had a lot to be proud of and a lot of interesting things to share.
Laurence Penney – CSS Font Stack Hackery
A lot of us owe a great debt to Laurence; he was one of the initial people behind the launch of MyFonts in 1999, which really helped expand the growth of the digital distribution of fonts. Laurence’s brief talk explained the benefits of subsetting – using the services found at the likes of MyFonts and Fontspring to cherry-pick the characters that you want to use from particular fonts, without having to use the entire font file (keeping download time to a minimum), and putting the subset before the fontstack so that it only takes those characters. Although he reeled off line after line of code on screen, he presented it in such a clear and succinct manner that even an idiot print designer like myself could follow and understand it (to a degree).
Lucas De Groot – On Hinting
“Mate, I’m never complaining about browser testing a website EVER again!”
That was Tom’s reaction after Luc’s talk about one of the most OCD-ish elements of digital typemaking – Hinting.
Luc knows what he’s on about. The guy’s made typefaces for Microsoft (including Calibri) and Audi amongst other big clients, so he knows, more than many, what it takes to produce a typeface that needs to be of a high, professional standard.
Hinting is a laborious, thankless task. No-one knows it’s there, keeping your glyphs looking consistent at all sizes, working in the background to make sure that your branding is ‘on message’ at all times. But it’s a crucial part in getting typography right on the web.
Essentially, when you reduce a character to a very small size on the screen, your character has a darn-sight smaller amount of pixels in order to display itself and a carefully crafted typeface, especially those with more refined glyphs, can often distort and warp, having one part thicker than the other when it is supposed to be a consistent width through every part. What Hinting does is essentially tell the browser/software: “This bit here? Yeah, just ignore that”, so as to trick the monitor into displaying the character exactly how you want it. It’s a great thing to do and has helped out millions of designers around the world. But there are a couple of things about Hinting that you may not realise:
Each glyph can have around 20 Hints.
And these have to be put in by hand.
On every glyph.
At (almost) every point size.
Oh, and Luc’s Calibri has over 5,000 glyphs which are all Hinted.
Seriously, the mental strength of Hinters to be able to deal with the demands of the job must be on a par with Cold War spies who were trained not to break under interrogation.
You never realise it’s there, but you have to be so grateful that someone took the time to do it. Whenever anyone questions why a typeface can cost thousands of pounds, I will tell them about this. It was jaw-dropping.
I’ve always held the idea of making my own typeface as a lifetime’s ambition. After Luc’s talk I think it would take me a lifetime to complete. Enthused and petrified at completely the same time.
Jake Archibald – In Your @Font-Face
Of all the speakers who were on today, Jake was probably the one I was least aware of, but he was the one I easily found the most entertaining, relatable, and inspiring.
Jake began with a brief history of digital type, starting in the days of bitmaps, and going into the great Font War of the 80s between Adobe’s exclusive Postscript format and Truetype, the more open format developed jointly between Apple and Microsoft to try and break Adobe’s stranglehold over the market.
He then switched to how we’ve been conditioned to have certain expectations when we see type presented in a certain way, offering the example that when you see a heavy sans-serif font in red set on a white background, you are more likely to think, “This is for a dumb comedy that I want to avoid at all costs.” He pointed out how the right typeface selection can convey the right message, even if what is written is somewhat… inappropriate.
He summed it up very nicely when he said: “When a good font is used, it’s subliminal; when it’s bad, you notice it.”He then switched to how we’ve been conditioned to have certain expectations when we see type presented in a certain way, offering the example that when you see a heavy sans-serif font in red set on a white background, you are more likely to think, “This is for a dumb comedy that I want to avoid at all costs.” He pointed out how the right typeface selection can convey the right message, even if what is written is somewhat… inappropriate.
He went on to explain which of the digital font formats are supported by which browsers, the problems this can cause in download time, and how each browser prioritises a different way of delivering the content (some will display the text straight away and format it with @font-face once it’s loaded, some hold the content back from the screen until it has all been formatted by @font-face, some deliver it piecemeal), and how this needs to be taken into account when thinking about your design (I liked his analogy about how it’s like the Sonic & Knuckles extension for Sonic 3 on the Sega Megadrive; older gamers might get it). It was very interesting seeing how the different browsers handle the same operation.
Again, Jake advocated the use of Fontsquirrel and similar services to create subsets which will speed up download time and the delivery of your content. After a quick pop at Hinting (which I think Luc saw the funny side of), he went on to point out that although hinted fonts increase file size, the end result actually massively outweighs the additional time.
One of the most interesting parts of the talk concerned the Font Foundries who produce the fonts that we all use. In a section called ‘Foundries: Why They Hate You’, Jake explained that to many people, including himself, the Foundries have dropped the ball in terms of making fonts easy to buy and easy to implement, and that in many ways they have followed the same pattern that the Music Industry followed when the likes of Napster cropped up in the late 90s:
1- The Internet is coming, RUN!
2- Sell with ball & chain attached
3- Make buying easier & more pleasurable than pirating
But the failure of adhering to a single format has cost the industry ground. Fonts are ubiquitously pirated online; it’s very easy to get hold of most major font families and it’s costing the industry millions, but the industry has maintained its desire to develop a format what has DRM in it to curtail piracy (even Håkon Wium Lie, who worked with Microsoft on developing new formats, said, (paraphrased) “We don’t need a new format, let’s just link to TTFs”) which has yet to really work, and it’s holding back the design industry in implementing new approaches and techniques with webtype (and also means sites that use @font-face have to include the relevant mark-up for most, if not all, of the different formats).
Jake’s talk was brilliant. It was done with real passion and flare, a lot of humour (the bit about how Microsoft would probably make a self-washing suit that gives you infinite bacon and money, but then sabotage themselves by giving it an inexplicably awful name like the Herpi-syphillator, and exclaim how it’s made by starving children, was a particular highlight), but all the way through it was a very serious point about the need to work together, especially with the Foundries, to get to a point where fonts are delivered to the user effortlessly and perform how they need to.
Jake kindly made stills of his presentation slides available online; you can check them out.
Elliot Jay Stocks – Enhancing The Future
I caught Elliot’s talk at last year’s New Adventures In Web Design Conference here in Nottingham, and it was fascinating to hear, especially considering my professional background. He spoke about how he had always been a web designer (recently redesigning the industry-favourite Smashing Magazine), and how one day he was asked to do some prin
t work. Thinking ‘that’ll be easy’, he was bowled over by the intricacies of it all, particularly in typography, how the safety net of infinite changes on a website was taken away (once it’s gone to print, it better be right, believe me), and how he felt his experience in print had made him a better web designer for it. He’s since gone on to found the 8faces typo
graphical journal, and has really taken to the field with gusto, making him a great choice to round the day off, talking about seizing the future of web typography, and making the new avenues available to us as designers count.
Elliot spoke about the need to be ‘forward facing’, to embrace things like subsets and opentype ligatures, to learn how to make them work, what browsers support them, when it’s appropriate to use them. He added that if we as a design community create the demand for better typographical tools and solutions, the market will rise to the demand and in return, we will offer our clients and user base a better experience. He offered Lettering.js and Fittext.js, used extensively on his own site, as examples of great tools that really help to deliver a great end result.
Elliot’s enthusiasm was evident throughout his talk. He’s a man who’s not happy with
standing still, he wants to be in a constant state of motion, pushing himself forward as well as trying to help others raise their game. He was a great guy to finish the day with, his talk neatly tied in with the preceding ones whilst showing what the future has in store for many of the topics, and his motivation left you wanting to rush back and start applying these to your daily workflow (I also managed to have a brief word with him at the after party and can confirm that he’s a thoroughly nice chap).
Conclusion
The Conference was a fantastic experience. I want to gush more about it but I usually think anyone relentlessly saying ‘it’s great!’ over and over again is more likely to make people hate something than to flock to it.
More than anything, it made both of us really appreciate even more the care and dedication that goes into creating one of the things we as print designers and web designers can’t live without – typefaces.
Trent Walton recently did a great blog post on a documentary about a sushi chef in Japan who has spent his life perfecting his craft at a 10-seat restaurant, and the parallels that has with the design community, specifically type design. This quote taken from the end of the article pretty much summed up how I felt leaving the Brighton Corn Exchange at the end of a fascinating day:
“Every time we obtain a font without a license, or perhaps even gripe about a fair price, we’re shooting ourselves in the foot. If we want great web fonts, we must support their creation. When web type designers succeed, so do we.”
