Ampersand Conference 2011
Brighton, Friday June 17, 2011 — one of the first conferences devoted specifically to web typography. I still find it hard to believe we’ve finally reached this era. Designers can now use a wider variety of faces and apply typographic control to HTML using fonts that have been specially designed for screen use. It’s certainly been a long time coming, adios Verdana? It used to be that to get my type fix I had to work on a print project.
The conference featured 8 speakers. They varied their topics and the intended audience between typographer, web developer and web designer — though most of them were directed to the later. For me the best speakers were all on in the morning; Vincent Connare, Jason Santa Maria, Jon Tan and Jonathon Hoefler.
Here are some of the facts, links, quotes and points of interest I took away from the conference.
In the 80s there were a lot of typographers working on translating metal type in to digital files that could output to printers. Now the same is happening again, only this time they are translating digital files meant for print to digital files meant for screen. This requires that each glyph is manually hinted and optimised to render legible at small sizes while inheriting the original concept and mood of the typeface. This means there are theoretically three design variations of any one font; an ideal state (how it should look across mediums), and two states that attempt to look as close as possible to the ideal state. One that printers interpret; and the other that browsers and operating systems can interpret, or render. All are different so the result can look the same. If you’re using a typeface for the web (particularly body copy) it’s essential to ensure it’s been designed for the screen.
The medium is the message
Use the appropriate face for the task. The lizard brain theory states that we have an initial emotional response to everything — the typeface supports that response before any content is read. Display faces aren’t appropriate for body copy, especially on the screen. eg: Bodoni is a beautifully designed face but only works at larger sizes. Use it for body copy on a web site and it’s illegible. Meta on the other hand is a workhorse typeface that comes in multiple weights, works at small sizes and also has an inherit beauty that is reveals itself at larger sizes. Avoid ‘ready-made’ faces that have an existing design language embedded. Instead apply the intended visual language to a simple typeface.
Type as a brand
Typography can communicate a brand, and often acts as the memory of that brand. The typeface used for the London underground would look out of place in another city. The New Yorker magazine brand is just the typeface. It’s unfortunate the NYC subway system uses Helvetica as it doesn’t give New York it’s own identity. Using a face like Gotham, something designed in, and based on New York, rather than an over used Swiss designed face, would have been more appropriate.
The rules of typography
There are no rules, only guidelines and principles. Three simple principles for better typography: make it larger, increase the contrast/hierarchy of content elements, increase the leading on longer lines. Good typography makes people read content. You don’t need to know everything about typography to start crafting it well. Once you have the basics you can use type much better than if you didn’t know anything about it at all.
The new world order
Historically, setting type was based on a page size. Modular scales and layout were derived from the page it was to be printed on. Responsive design means we no longer have a set ‘page’ size. Take advantage of this and design elements individually to ensure the necessary attention to craft and interaction is given. The layout can then come together at the end. A modular scale can be developed from the optimal body copy size. This ensures the design language works at multiple resolutions creating consistency for responsive design and legible type.
The tech stuff
Windows, OSX and linux have very different systems for displaying and antialiasing type — this is further complicated by differences between browsers on the same platform. It’s important to check how faces render on all platforms, specifically at smaller sizes. Some faces aren’t meant to be readable at screen resolution and shouldn’t be used. Firefox is the only browser that can render the start of letters on half pixels to ensure exact word spacing and kerning is displayed.
Type geeks only
Monospaced faces are often used for code where hyphens are used as minus signs next to other signs and so therefore shouldn’t adopt traditional typographic rules about length and vertical alignment as they are rarely used between letters. Proportional numerals don’t work for clocks, as it means the digitals jump left to right (this rule can also be applied to interactive numerical type). Designing small type for screen is all about designing the antialiasing — the grey pixels. CSS is evolving to include more control over web typography such as kerning and variants (for small caps and swashes etc)
Not directly quoted
Web design is a new profession; People come from a range of backgrounds from artistic to technical, and it’s not yet a respected profession.
Communication isn’t just about words; eg: The first 22min of the film Wall-E was no verbal dialogue.
There are parallels between cities and language; Both are planned but they evolve and cater to the needs of the people using them.
Most letters are ‘read’ from the top half. If you cover the bottom half of a line you can still read it, while the same isn’t true if you cover the top half
- 8 Faces is a new magazine for devotees of typography
- Lost world fairs, nice example of executing web typography
- Web Font Specimen — see how typefaces will look on the web
- MyFonts publishes periodic newsletters: Rising Stars and Creative Characters monthly
- Fonts in use — who is using what where?
- Popular websites messed up with CSS to create art?
- And finally two plugins for better web typography to give more control: Lettering and FitText