In his Big Type, Little Type talk at An Event Apart in Seattle, WA 2012 Jon Tan talked about important considerations for font setting and selection on the Web. Here's my notes from his talk:
- Big type is about impact: to grab someone’s attention just for a second. Little type is about immersion: design that creates a more absorbing involvement. Using design to create an environment where stories can be told.
- As designers we often quickly distill and apply our knowledge to solve problems. But we need to explain this process to clients and team members so we can advocate for our work. How do we explain our type decisions?
- Language is the core of what we do: spoken or written. It has an infinite breadth of expression but that comes from using words in a structured and conventional way. These elements are crucial for communication. You give people simple, abstract marks and they supply the pictures themselves. Type is the cornerstone of language.
- A recent study found that “there are important differences between good and poor typography that appear to have little effect on reading speed and comprehension.” People are really good at making sense of even bad writing.
- This same study though found that “good typography induces a good mood.” Putting people in a good helps them complete tasks and even underestimate how long the task took them. Basically, time flies when you are having fun. Good typography can help with that. That’s why as designers we should care about good type setting and selection.
- In addition to huge differences in the quality of screen resolutions, devices can have distinct rendering environments for type: standard smoothing, direct write, clear type, core type + core graphics, etc. This introduces variation in when fonts get anti-aliased (font size) and how they look when smoothed.
- A typeface is an idea. It will be redrawn for when/how it is used. For fonts that can mean different adjustments for print and for screens. For example, Matthew Carter’s Bell Centennial font was designed for high-speed printing in phone books where ink can bleed. Similarly, Abril and Siri fonts have variations that adjust for screen differences.
Fonts for the Screen
- Some fonts are optimized for Web. Lean towards those.
- Check that the font you want is licensed for Web site use.
- Test the smallest screen size first or on the most adverse screens where fonts are likely to have rendering issues.
- Confirm language support.
- What font variants and features do you need? old style numbers, punctuation, spaces, fractions, small caps, symbols, ornaments, ligatures, etc?
- Kerning and ligatures: text-rendering and optimizeLegibility can be set on Safari and Chrome to enhance font rendering.
- Hyphenation styling options are supported in new versions of FireFox and hopefully more browsers soon.
- Prevent orphans: use non-breaking space this prevents words from splitting in bad ways especially in adaptive layouts.
- Open Type features are coming soon but you can begin to use them in a progressive enhancement workflow. These elements allow you to turn on/off specific open type features within fonts.
- It’s the small things in a typeface that matter. We read by skipping along lines in jumps with pauses and fixations where we take snapshots of groups of letters that we turn into words. This makes the details in fonts crucial.
- The text “agh! iIl1” is a good way to get a flavor of a font. It helps you see how legible a face is and it’s characteristics.
- Not all ligatures are useful in fonts. In fact, they can interrupt reading in body copy.
- The fonts we use on the Web should be bigger than the fonts we use in print.
- Scan paths are an important consideration for laying out Web pages. Hierarchy can guide people through the elements within a layout.
- Snappy text and generous leading can enable longer body text widths.
- There are no rules just good decisions. Remember there’s nuance and subtlety behind design.
- Sometime there are no words. We recognize faces in 40ms and have an emotional reaction without consciously knowing we’ve seen a face.
- Language can be insufficient to explain the things we are seeing and feeling.
- There are 4.2 million colors on an advanced display but we don’t have names for all of them.
- We communicate something emotional with the font we choose and how we set them. Language is not necessary for emotion.
- Fonts are way-finding apps for emotions. Embedded in fonts is an idea that can communicate to people and affect their mood on a visceral level.
- “Details in typefaces are not to be seen but felt.” –Erik Spiekermann
- Use your empathy as a designer. This is a key talent we have –use it for doing the right thing with type. “Don’t think. Feel.”