Ampersand Conference 2015- Friday 13th November • Brighton

Down With Web Typography- Indra Kupferschmid • Notes by Jonathan Gill

Back to all talks
Listen to the talk

Down with 'web typography', long live 'typography on the web'. Indra opened Ampersand by aiming to persuade us to retire the notion of web typography as a special case with its own rules, and instead have us consider the typographic pitfalls specific to type on screens.

Indra first discussed how typography on the web over the past few years, especially since the introduction of responsiveness and web fonts, has become its own discipline rather than being an imitation of print type, and how we should use the tools that we now have to bring the variety of print type in all of its forms and creativity to the web.

When we are reading something, if it concerns us we will read everything

General advice on creating readable type on the web

Indra talks about how people sometimes misunderstand font size, thinking that the bigger the better, and more readable. edenspiekermann.com is an example of this

Eden Spiekermann
A screenshot of the Eden Spiekermann site.

She explains that this is not a typeface for large font sizes. It's also too loose.

Indra next talks about examples of sites that she shows to her students on how they can be improved, and on how they have improved after redesigns.

Case Study - The Great Discontent

The Great Discontent
Site article layout in 2013.

Indra discusses how this layout, using multiple columns of text on the same line in a scrolling site, can be confusing to look at in terms of where they eye should first look. Link styles here are also sticking out too much. Ad placements can also hinder the reading experience by breaking up text.

The Great Discontent
Site article layout now.

Easier to see the hierarchy now, and the font size also scales fluidly depending on screen width. Note - when looking at text its should be clear what kind of text this is ie quote, body text, ad etc.

Links on here are still too bold however.

[links in text] are something you want to see when you get there and then decide if you want to go there or not

Designing Type for Purpose

During her studies in typography in the 90's, a turning point in her understanding of type usage came when she read 'Lesetypographie' (or 'read typography' in english) by Hanspeter Wilberg - where he described type usage appropriate for a purpose:

Design for Attention - for someone who is a unmotivated reader

Design for legibility - For someone who is motivated to read

Important for Legibility

Keep design compact - having a lot of whitespace and web fonts don't necessarily make a page design better in this case, as you want to find the information you want a quickly as possible - in this example the information you might want to find could be quite low down on the page. The title font is also too small and not the most readable.

Other pointers when designing for reference:

Important for Attention - Pervasive type

See http://fontsinuse.com/ for good examples.

For reference

Font size and scale generator can be found here.

An example of good font usage can be found here, and here is an detailed case study about the site.

Typeface used in presentation and a good example of readable type.

Back to all talks