Tag Archives: typography

Hard-to-Read Fonts Improve Learning

Much has been written on the positive aspects of cognitive fluency (in terms of typography, accents, and almost everything else), but a recent study (pdf, doi) suggests that the opposite (cognitive disfluency) could lead to better learning. The theory is that harder-to-process material requires “deeper processing” and that this deeper processing leads to superior memory performance.

Earlier this year the ever-excellent Jonah Lehrer summarised the study, describing how long-term learning and retention improved when classroom material was set in a hard-to-read font (e.g. Monotype Corsiva, Comic Sans Italicized or Haettenschweiler).

This study demonstrated that student retention of material across a wide range of subjects (science and humanities classes) and difficulty levels (regular, Honors and Advanced Placement) can be significantly improved in naturalistic settings by presenting reading material in a format that is slightly harder to read…. The potential for improving educational practices through cognitive interventions is immense. If a simple change of font can significantly increase student performance, one can only imagine the number of beneficial cognitive interventions waiting to be discovered.

One of the study authors, in a comment published in a New York Times article looking at cognitive fluency in learning, emphasises how it’s not the font that matters, but the processing difficulty:

“The reason that the unusual fonts are effective is that it causes us to think more deeply about the material, […] but we are capable of thinking deeply without being subjected to unusual fonts. Think of it this way, you can’t skim material in a hard to read font, so putting text in a hard-to-read font will force you to read more carefully.”

Educational Typography Ebooks

I’ve only recently taken a look at font retailer FontShop‘s collection of educational typography ebooks despite having the site bookmarked for months. It’s a wonderful (yet small) collection, currently consisting of these five books:

The online Typographer’s Glossary will no doubt come in handy for many, too. In fact, just click on everything they have under the heading ‘Type Resources’–it’s all great.

via @jasonfry

Typography, Pronunciation and Cognitive Fluency

How easy something is to read and understand significantly affects how we perceive it in terms of its risk, beauty, difficulty, credibility and truthfulness. Factors that influence this cognitive fluency include typography (typeface choice, contrast, etc.), ease of pronunciation, familiarity and how much the words rhyme.

The cover story of this month’s The Psychologist is an extensive study of this phenomenon, looking at how cognitive fluency affects our judgements and perceptions.

This excerpt illustrates the effect, whereby a set of physical exercises designed to be incorporated in your daily routine were described (emphasis mine):

When they were presented in an easy-to-read print font (Arial), readers assumed that the exercise would take 8.2 minutes to complete; but when they were presented in a difficult-to-read print font, readers assumed it would take nearly twice as long, a full 15.1 minutes. They also thought that the exercise would flow quite naturally when the font was easy to read, but feared that it would drag on when it was difficult to read. Given these impressions, they were more willing to incorporate the exercise into their daily routine when it was presented in an easy-to-read font. Quite clearly, people misread the difficulty of reading the exercise instructions as indicative of the difficulty involved in doing the exercise. If we want people to adopt a new behaviour, it is therefore important that instructions are not only semantically clear and easy to follow, but also visually easy to read – or else the behaviour may seem unduly demanding.

Other findings from the various studies mentioned in the article:

  • When a recipe is presented in an elegant but difficult-to-read font, it is assumed that it requires more time and more skill than when presented in an easy-to-read font. (The authors conclude that restaurants should describe dishes in difficult-to-read fonts. They do.)
  • Print fonts influence whether people make decisions or defer them to a later time.
  • Food additives with complex, difficult-to-pronounce names are perceived as more risky.
  • Amusement park rides were classed as more dangerous if they had complex, difficult-to-pronounce names.
  • A statistically significant number of stocks with easy-to-pronounce tickers symbols had higher yields than those with difficult-to-pronounce ticker symbols.

Web Design Research Results

Some of the more enlightening/worthwhile results from a number of studies on design and usability conducted by Smashing Magazine, found via their otherwise-ordinary 10 Useful Usability Findings and Guidelines article:

General design decisions taken by the top 50 blogs (part two):

  • 92% use a fixed width layout with 56% varying the width between 951 and 1000px.
  • For body text, 90% use Verdana, Lucida Grande, Arial or Georgia with 78% using a font size between 12 and 14px.
  • Headlines are typically Arial or Georgia (52%), with a font size between 17 and 25px.
  • The front page presents excerpts of 10-20 posts in 62% of cases.
  • 50% offer links to related and/or popular posts.
  • 90% of footers contain copyright information, 40% contain links to About pages and 30% to contact information.
  • 76% provide ad-free articles.
  • 54% provide social icons under the post.
  • 66% display RSS buttons above the main layout area, while a similar percentage use the ‘standard’ RSS icon (as opposed to a text link) and employ only one RSS feed.
  • Only 5 blogs use tag clouds (10%) and 11 (22%) use pagination.
  • Nobody cares about standards (only 2 conform).

A study of the typography used on the top 50 blogs touched on some of the above and then went into more detail:

  • Sans-serif fonts are more popular for both headlines and body copy (although not by a large margin).
  • Headlines: Georgia, Arial or Helvetica between 18 and 29 pixels.
  • Body copy: Georgia, Arial, Verdana or Lucida Grande between 12 and 14 pixels.
  • Header font size ÷ Body copy font size = 1.96.
  • Line height (pixels) ÷ body copy font size (pixels) = 1.48.
  • Line length (pixels) ÷ line height (pixels) = 27.8.
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
  • Optimal number of characters per line: between 55–75 (although 75–85 is more popular).
  • Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

100 unspecified sites were used for this analysis of web form structure and design (part two):

  • 93% use single-page sign-up forms.
  • 41% of sites attract visitors by explaining the benefits of registration.
  • Vertically arranged fields are preferred to horizontally arranged fields (86%).
  • 82% of sites don’t ask for e-mail confirmation, although 72% required password confirmation.
  • Only 45% of sites used the thank-you message to motivate users to proceed with exploring the services of the site.

Simple Rules for Better Typography

Some simple rules to follow for improved typography (web or print), from Fred Design:

  • Don’t use too many typefaces (not more than 3).
  • Pay close attention to the hierarchy.
  • No more than 4 font sizes, preferably 3.
  • 8-10pt for body copy (definitely not above 12pt).
  • Use simple, legible typefaces.
  • Keep leading in mind (a little above the font size, slightly below the auto setting, no overlapping).
  • Keep kerning in mind (no overlapping).
  • Emphasise subtly (bold, italic, underlined or a darker shade).
  • No caps in body text.
  • Always align to a baseline.
  • Flush left, ragged right (keep text left aligned, not justified).
  • Between 6 and 12 words per line (as a general, flexible rule).
  • Hanging punctuation marks and bullets, not indented.
  • Experimental: use Fibonacci numbers for point sizes.

Similar and worthwhile: Mark Boulton’s Five simple steps to better typography.

Don’t forget these ebooks, either!