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
- Use Macro typography correctly (margins, columns, spacing, size, length etc.).
- Assess type size depending on reading distances (see http://sizecalc.com/ for help on this).
- Keep type consistent flow.
- Make text links subtle (should not be seen at first glance).
- Use subpixel rendering - particularly if you have a one column layout where you want the text to be readable as possible.
- Use blank lines to break paragraphs - gives the eye a break, easier to digest.
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
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
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.
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:
- Clear hierarchy.
- Font with clear bold, underline and italics (no faux italics).
- Type with a large character set.
- Don't use all caps unless necessary.
- Boxes in UI Elements - these can break if the text inside has one long word, for example.
Important for Attention - Pervasive type
- Posters, book covers, logos etc.
- Anything goes!
- Use antialias for font smoothing.
- Remember to use the correct variants of quotes/dashes etc - you can get away with this in body text but not when it could be very large!
See http://fontsinuse.com/ for good examples.
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