Typography and the web at Ampersand Conference

In its second year Ampersand conference was again a great event, benefiting hugely from having a unique curated theme (typography) when so many other conferences can seem unfocused.

This year the talks were clearly split into a morning of type design theory and an afternoon of more practical and technical talks, mostly centred around web fonts.

Theory

Phil Baines made a brilliant point in his opening talk: a web font doesn’t just make good-looking website. There’s a lot more to it and perhaps that sums up the reason why so many of us were there. Phil also put things into perspective when he pointed out that however seductive a web font is, it’s still only part of the design.

Typography

Phil explained that, regardless of using an appropriate typeface, typography is the “mechanical arrangement of type”. (Mechanical doesn’t really best describe digital arrangement, but Phil said he couldn’t come up with a more appropriate term!)

Phil told us that what it really came down to, the real fundamentals of typography, are type size, leading, and line height. Arranging type with inappropriate type size, leading or line height can make your content beautiful. But misusing these fundamentals can also render your content impossible to read.

Yves Peters went further into discussing typeface readability and how you need to be aware of what and why you’re designing. I loved it when Yves spoke about the fact that typography is a lot about nothing: it is about the space between characters, the space between words and the space between the lines. We read word shapes, not individual letters, and this spacing can help define these shapes. This is why the counters in letterforms are important, and the tracking in lowercase text. Yves recommended not increasing the tracking in lowercase text as word shapes can break up, whereas big type can benefit from tighter tracking. Luke did a more indepth post on Yves’ talk.

Choosing typefaces

José Scaglione and Veronika Burian gave a fantastic overview of typographic principles that can be applied to both web and print. Giving a disclaimer that the topic can be very subjective, they particularly focused on choosing the appropriate typefaces for your projects.

Yves Peters explained that there’re so many typefaces out there it makes choosing very difficult. He told us about Massimo Vignelli who said you can do everything with just five typefaces. Yves pointed out that this is narrow-minded, because who says everyone’s five typefaces have to be the same? Phil Baines talked about the extreme where people have said the only typeface designers care about typefaces. He gave an example of someone who used Helvetica for everything (and pointed out what a sad existence this would be!)

In what was probably the fourth Jon Tan reference of the day, Veronika and José emphasised that people react to typefaces on an emotional level. People could put something down because they think they dislike the text when they actually dislike the typeface. Yves explained how we’re conditioned to recognise the types of faces used across the media. As an example, Yves showed us a wide range of genre-specific film posters which used a surprisingly limited range of typography: there’s such a strong association between these typefaces and film genres that they’re always used together.

The four basic areas of type selection

Functional criteria

The first area that Veronika and José described was the morphology and function of the typeface. These are about considering how the typeface will be used, the type of text they will be applied to, the text’s linguistic and content needs.

Technical criteria

The second type selection area is the technical. This is about considering the application support within that typeface: is it made for screen or print, for small body text or large display headers? Yves Peters explained that the keyboard gives you a very narrow view of what makes up a typeface. There are so many more glyphs than those on the keyboard, which makes a keyboard rather like looking at a typeface through keyhole. This happens to explain why there’s so many free fonts. These fonts rarely have large sets of glyphs, just the basics on the keyboard, but a lot of people never see past that keyboard.

Aesthetic criteria

Next up Veronika and José talked about aesthetics, arguably what we often get overly-caught up with when considering typefaces. Aesthetics are the properties related to the appearance of the letterforms. Yves Peters spoke about the importance of historical and cultural context when choosing typefaces: there are truly historical typefaces but there are also modern interpretations of historical typefaces. When Yves was showing us the film posters he explained the importance of cultural references when choosing typefaces. Typefaces and brands speak to you, they suggest a mood and an atmosphere.

Economic criteria

And last up was the economical considerations. This includes price, licenses, and the efficiency of the typeface itself. By efficiency, Veronika and José explained that there were economical implications coming from the size, and therefore loading time, of the typeface when used on a website, or even the quantity of ink used by that typeface when used in print.

Choosing typeface pairs

Veronika and José spoke extensively on matching typeface pairs. However they did first point out that, where possible, using one family is usually enough. They emphasised the importance of not choosing two typefaces just for the sake of it. One type family usually has more consistency: for example, one family would usually have the same stem thickness across all weights. However they warned that superfamilies are often there to capitalise on the popularity of one original family: just because they share a name, it doesn’t mean all the weights will work well together.

One of the tips that stood out for me was comparing whether each typeface in the pair, or even collection, has an organic or mechanic feel. Pairing organic with organic faces, or mechanic with mechanic faces, tends to work better than mixing the two. Bearing this in mind, two very dramatic display faces will inevitably compete, not complementing one another.

What we need to aim for is typefaces with similar features and proportions. This could be ensuring that the faces have similar sizes and x-heights, and considerations such as the ascenders and descenders not being too different if these different typefaces are being used on one line. It’s also very hard to combine sans-serif faces with other sans-serif faces, or serif faces with other serif faces, because the differences between them just aren’t visible enough.

Veronika and José made a great point that if the typefaces you’re using aren’t similar enough to use alongside one another, maybe try to emphasise their differences. For example, you could emphasise the difference between two typefaces through applying dramatically different colours to each typeface or using the faces at dramatically different sizes.

Practical and technical

Eek, hinting

Lucas de Groot gave an amazing talk about typeface hinting. Before this talk, I was vaguely aware of what hinting was and how it worked. Due to the technical nature of Luc’s talk (it was just over my head!) I came away no more knowledgeable about hinting, but after seeing the sheer amount of detail, hard work and effort that goes into the process, I was astounded. It can take an hour to hint just 20 characters, and yet there could be 4000, or even more, characters in a typeface. I already thought that I appreciated the amount that goes into creating a font but I came away from Luc’s talk with a new respect for those that do so, and even less respect for those that insist on only using free fonts, or even worse, pirate fonts.

Web fonts

Phil Baines made the point that web fonts are coming-of-age, we may be in a good position now compared to a few years ago but the situation is still only adequate. Reflecting on Ampersand conference last year, I realise that we may not have actually come that far in the past year. A lot of the OpenType features that heralded last year are still only in their infancy on the web. However a few of the speakers spoke more realistically about what we can do with OpenType nowadays.

OpenType

Yves Peters joined the theory and the practical sides of typography when he spoke about the impact of OpenType on the typefaces we have to choose from. For a start, OpenType allows a huge amount of glyphs. It allows fancy replacement features such as swashes and small caps, smart quotes versus dumb quotes, various numerals, and extensive positioning features which are good for accents (something us Brits aren’t terribly familiar with, but very useful for other languages!) It’s these little things that can make a font really valuable.

Yves made the point that an OpenType font can be like a toolbox: whilst the font might have support for OpenType, it’s no guarantee that the font will do everything you want, your tool box could be empty if very few of the OpenType features are included.

Elliot Jay Stocks’s talk included tons of information on choosing and using OpenType fonts. He recommended when deciding if you’re going to use OpenType you must first consider the typeface and the font file: are the relevant subsets included? Also it’s very important to consider the user: are the OpenType features be supported in enough browsers? Will the design break if loads of these OpenType features are missing?

Elliot gave examples based on experiments he’d created for his own site, working on pushing web fonts forward by using as many of these typographical technologies as possible. If we’re creating the demand for nice typography, hopefully the tech will rise to the demand. Elliot mentioned the usefulness of tools such as lettering.js and fittext.js but really focused on the value of OpenType through the working draft of the CSS3 Fonts module.

Ligatures

Ligatures can be turned on by using font-variant-ligatures;. This display is still completely dependent on the font having ligatures included, and the downside of this is that ligatures can make a font much weightier, increasing loading times. However it degrades to no ligatures which is perfectly acceptable for older browsers.

Small caps and old-style numerals

Subsets such as small caps and old-style numerals can be triggered using font-variant-caps: small-caps; and font-variant-numeric: old-style-nums; Again these rely on the font having these small caps and old-style numeral subsets included, but again also degrade gracefully.

Swashes

Swashes can be activated using fonts-feature-settings: “swsh” 2; This again depends on the font having swashes included: it may have one, it may have loads, and again it could make the font very weighty. I think at this point we’re starting to see a theme emerging…

Alternate styles

Lastly, alternate styles. These can be handy if the font you’ve chosen has some quirky characters. The alternate styles can be turned on with font-feature-settings as part of a subset, but really that’s quite hacky. What you really want to use is font-variant-alternates to specify a particular subset just for that element.

I’ve really brushed over the CSS in the examples above, but if you’re interested, Elliot has written a fantastic series of posts about these features on his blog.

Typecast

Lastly, Elliot recommended trying Typecast. The typecast team have recently introduced a handy OpenType testing tool. Bearing in mind that your browser must support the OpenType features in order to display them (Typecast tells you if your browser doesn’t) you can preview and test these features, as well as browsing web fonts across different font providers filtered by only those that support OpenType.

The potential in font stacks

As sad as it may sound, Laurence Penney’s talk on hacking the font stack really made me the most excited of all the talks of the day. We’ll know how CSS font-family fallbacks work:

font-family: ‘Fancy Web Font’, Lucida Grande, Arial, sans-serif;

Now we think that this is our fonts in order of preference: when a browser can’t access the first font on the system, it refers to the second. If it can’t recognise the second font, it refers to the third and so on… But Laurence Penney tells us this isn’t necessarily true. It’s not actually the fonts not being recognised by the browser that’s creating the fallback, it’s actually that the character in the text isn’t supported by the font. So when the browser can’t find that character in that font, it then moves on to the next font.

This has some interesting implications. If you take ASCII characters out of a font, the font-family declaration will then use the next font in the declaration for those characters. By using this subsetting method you could introduce numerals, small caps, symbols and much more, all from different fonts. This requires no extra HTML isolating these characters in the text, you’re still separating style and content in your markup, and it requires less attention to detail as the subsets are being applied automatically. Genius!

This does require you to use a font service that allows subsetting. MyFonts, FontFont and Font Squirrel all help you do this with their web font generators.

Web font performance

Jake Archibald gave a hilarious talk about @font-face performance. Looking back at my notebook, Jake covered such a huge amount of technical detail in such a short period of time. My notes are scattered mess. I really recommend to get the full benefit of Jake’s talk you should see his slides on Slideshare.

Relationships

There were a few topics and points that I felt didn’t fit so clearly into the ‘theory’ or ‘practice’ buckets, and one of these was relationships. Phil Baines mentioned relationships in his first talk of the day where he pointed out that this year there will fewer graphic designers than web designers present at the conference, last year was more of a balance. Phil suggested that maybe there isn’t a huge amount of communication between these types of designers and that perhaps if there was better communication us web designers could better understand typography, and learn from the history, and mistakes, that graphic designers have already made.

José Scaglione and Veronika Burian said, from a foundry point of view (as they form the TypeTogether foundry) that there should be more communication between designers and foundries. If you ask a foundry, they may be able to help you find the faces you need. The example Veronika and José gave was if you were looking for a lower contrast version of a type face to use at large sizes.

Bespoke typefaces

Jason Smith gave a short and very interesting talk on designing bespoke broadcast typefaces. This is a unique challenge in a couple of ways: first designing a typeface for television screens, and second convincing a channel to have their own typeface. As Jason put it, once one channel had one they all wanted one.

Designing a typeface for a television channel is all about capturing the personality of their brand. Jason likened it to trying to capture the essence of a character, matching that character to the channel’s demographic. As Jason said, “everything we do is about getting the right spirit, the right character.” When designing the typeface for Channel 4 they had to consider it in relation to the channel’s logo. This typeface was only going to be shown on Channel 4, it’s needed to be clean and legible, but edgy and provocative, following the Channel 4 brand.

What was really impressive was the success of the Channel 4 typeface. The identity of Channel 4 has since changed, but the typeface has been kept and is now the main identity for the brand. It’s distinctive enough to work by itself.

Oh, and Linotype the film

Linotype the film was screened the night before Ampersand conference and during the lunch break. Now I’d heard compared to Helvetica or Objectified but, whilst it was informative, engaging, and involved many different people, I was totally unprepared for the lovely, heartwarming experience that is the Linotype film.

I really recommend you get yourself to a screening, or at least ensure you buy the DVD when it comes out. The film tell the fascinating story of the Linotype typesetting machine, tales of people whose working lives were dominated or changed by the machine and those who still love it today. And all this with a sense of humour and sweetness that makes it completely charming.

A quick conference review

I loved Ampersand conference again this year, if there’s one next year, I’ll try to be there. I know that typography can be a wide field, but I really hope more conferences go down the focused theme and curated talks path. It really made for a lovely event.

Published by Laura

Laura is one of the recently joined nUbelly writers. She's a very friendly and noisy freelance web designer/developer. Since first learning how to build sites (badly, with tables,) she's been mad about the web and the amazing community around it. Her big, but ever-changing, interests are mobile web, lovely semantic HTML, web fonts & WordPress.

2 Comments So Far, what do you think?

  1. Pingback:Typography and the web at Ampersand Conference | Laura Kalbag

  2. Robin Cannon

    Fascinating stuff, and a really comprehensive write up. I’m also excited by your summary of Laurence Penney’s talk on font stacks and fallbacks. I didn’t know it worked like that, either, and that provides some potentially really interesting options.

    Not sure I agree with Yves Peters about not making changes to tracking in lowercase text. I’ve had some great results with making tweaks to that, making content text both more readable and more attractive.

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>