Tag Archives: typography

Hard-to-Read Fonts Improve Learning

Much has been writ­ten on the pos­it­ive aspects of cog­nit­ive flu­ency (in terms of typo­graphy, accents, and almost everything else), but a recent study (pdf, doi) sug­gests that the oppos­ite (cog­nit­ive dis­flu­ency) could lead to bet­ter learn­ing. The the­ory is that harder-to-pro­cess mater­i­al requires “deep­er pro­cessing” and that this deep­er pro­cessing leads to super­i­or memory per­form­ance.

Earli­er this year the ever-excel­lent Jonah Lehr­er sum­mar­ised the study, describ­ing how long-term learn­ing and reten­tion improved when classroom mater­i­al was set in a hard-to-read font (e.g. Mono­type Cor­s­iva, Com­ic Sans Italicized or Haettensch­weiler).

This study demon­strated that stu­dent reten­tion of mater­i­al across a wide range of sub­jects (sci­ence and human­it­ies classes) and dif­fi­culty levels (reg­u­lar, Hon­or­s and Advanced Place­ment) can be sig­ni­fic­antly improved in nat­ur­al­ist­ic set­tings by present­ing read­ing mater­i­al in a format that is slightly harder to read…. The poten­tial for improv­ing edu­ca­tion­al prac­tices through cog­nit­ive inter­ven­tions is immense. If a sim­ple change of font can sig­ni­fic­antly increase stu­dent per­form­ance, one can only ima­gine the num­ber of bene­fi­cial cog­nit­ive inter­ven­tions wait­ing to be dis­covered.

One of the study authors, in a com­ment pub­lished in a New York Times art­icle look­ing at cog­nit­ive flu­ency in learn­ing, emphas­ises how it’s not the font that mat­ters, but the pro­cessing dif­fi­culty:

“The reas­on that the unusu­al fonts are effect­ive is that it causes us to think more deeply about the mater­i­al, […] but we are cap­able of think­ing deeply without being sub­jec­ted to unusu­al fonts. Think of it this way, you can’t skim mater­i­al in a hard to read font, so put­ting text in a hard-to-read font will force you to read more care­fully.”

Educational Typography Ebooks

I’ve only recently taken a look at font retail­er Font­Shop’s col­lec­tion of edu­ca­tion­al typo­graphy ebooks des­pite hav­ing the site book­marked for months. It’s a won­der­ful (yet small) col­lec­tion, cur­rently con­sist­ing of these five books:

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

via @jasonfry

Typography, Pronunciation and Cognitive Fluency

How easy some­thing is to read and under­stand sig­ni­fic­antly affects how we per­ceive it in terms of its risk, beauty, dif­fi­culty, cred­ib­il­ity and truth­ful­ness. Factors that influ­ence this cog­nit­ive flu­ency include typo­graphy (typeface choice, con­trast, etc.), ease of pro­nun­ci­ation, famili­ar­ity and how much the words rhyme.

The cov­er story of this month’s The Psy­cho­lo­gist is an extens­ive study of this phe­nomen­on, look­ing at how cog­nit­ive flu­ency affects our judge­ments and per­cep­tions.

This excerpt illus­trates the effect, whereby a set of phys­ic­al exer­cises designed to be incor­por­ated in your daily routine were described (emphas­is mine):

When they were presen­ted in an easy-to-read print font (Arial), read­ers assumed that the exer­cise would take 8.2 minutes to com­plete; but when they were presen­ted in a dif­fi­cult-to-read print font, read­ers assumed it would take nearly twice as long, a full 15.1 minutes. They also thought that the exer­cise would flow quite nat­ur­ally when the font was easy to read, but feared that it would drag on when it was dif­fi­cult to read. Giv­en these impres­sions, they were more will­ing to incor­por­ate the exer­cise into their daily routine when it was presen­ted in an easy-to-read font. Quite clearly, people mis­read the dif­fi­culty of read­ing the exer­cise instruc­tions as indic­at­ive of the dif­fi­culty involved in doing the exer­cise. If we want people to adopt a new beha­viour, it is there­fore import­ant that instruc­tions are not only semantic­ally clear and easy to fol­low, but also visu­ally easy to read – or else the beha­viour may seem unduly demand­ing.

Oth­er find­ings from the vari­ous stud­ies men­tioned in the art­icle:

  • When a recipe is presen­ted in an eleg­ant but dif­fi­cult-to-read font, it is assumed that it requires more time and more skill than when presen­ted in an easy-to-read font. (The authors con­clude that res­taur­ants should describe dishes in dif­fi­cult-to-read fonts. They do.)
  • Print fonts influ­ence wheth­er people make decisions or defer them to a later time.
  • Food addit­ives with com­plex, dif­fi­cult-to-pro­nounce names are per­ceived as more risky.
  • Amuse­ment park rides were classed as more dan­ger­ous if they had com­plex, dif­fi­cult-to-pro­nounce names.
  • A stat­ist­ic­ally sig­ni­fic­ant num­ber of stocks with easy-to-pro­nounce tick­ers sym­bols had high­er yields than those with dif­fi­cult-to-pro­nounce tick­er sym­bols.

Web Design Research Results

Some of the more enlightening/worthwhile res­ults from a num­ber of stud­ies on design and usab­il­ity con­duc­ted by Smash­ing Magazine, found via their oth­er­wise-ordin­ary 10 Use­ful Usab­il­ity Find­ings and Guidelines art­icle:

Gen­er­al design decisions taken by the top 50 blogs (part two):

  • 92% use a fixed width lay­out with 56% vary­ing the width between 951 and 1000px.
  • For body text, 90% use Verd­ana, Lucida Grande, Arial or Geor­gia with 78% using a font size between 12 and 14px.
  • Head­lines are typ­ic­ally Arial or Geor­gia (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 pop­u­lar posts.
  • 90% of foot­ers con­tain copy­right inform­a­tion, 40% con­tain links to About pages and 30% to con­tact inform­a­tion.
  • 76% provide ad-free art­icles.
  • 54% provide social icons under the post.
  • 66% dis­play RSS but­tons above the main lay­out area, while a sim­il­ar per­cent­age use the ‘stand­ard’ 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 pagin­a­tion.
  • Nobody cares about stand­ards (only 2 con­form).

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

  • Sans-serif fonts are more pop­u­lar for both head­lines and body copy (although not by a large mar­gin).
  • Head­lines: Geor­gia, Arial or Hel­vetica between 18 and 29 pixels.
  • Body copy: Geor­gia, Arial, Verd­ana or Lucida Grande between 12 and 14 pixels.
  • Head­er 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 para­graphs (pixels) ÷ line height (pixels) = 0.754.
  • Optim­al num­ber of char­ac­ters per line: between 55–75 (although 75–85 is more pop­u­lar).
  • Body text is left-aligned, image replace­ment is rarely used and links are either under­lined or high­lighted with bold or col­or.

100 unspe­cified sites were used for this ana­lys­is of web form struc­ture and design (part two):

  • 93% use single-page sign-up forms.
  • 41% of sites attract vis­it­ors by explain­ing the bene­fits of regis­tra­tion.
  • Ver­tic­ally arranged fields are pre­ferred to hori­zont­ally arranged fields (86%).
  • 82% of sites don’t ask for e-mail con­firm­a­tion, although 72% required pass­word con­firm­a­tion.
  • Only 45% of sites used the thank-you mes­sage to motiv­ate users to pro­ceed with explor­ing the ser­vices of the site.

Simple Rules for Better Typography

Some simple rules to fol­low for improved typo­graphy (web or print), from Fred Design:

  • Don’t use too many typefaces (not more than 3).
  • Pay close atten­tion to the hier­archy.
  • No more than 4 font sizes, prefer­ably 3.
  • 8–10pt for body copy (def­in­itely not above 12pt).
  • Use simple, legible typefaces.
  • Keep lead­ing in mind (a little above the font size, slightly below the auto set­ting, no over­lap­ping).
  • Keep kern­ing in mind (no over­lap­ping).
  • Emphas­ise subtly (bold, ital­ic, under­lined or a dark­er shade).
  • No caps in body text.
  • Always align to a baseline.
  • Flush left, ragged right (keep text left aligned, not jus­ti­fied).
  • Between 6 and 12 words per line (as a gen­er­al, flex­ible rule).
  • Hanging punc­tu­ation marks and bul­lets, not inden­ted.
  • Exper­i­ment­al: use Fibon­acci num­bers for point sizes.

Sim­il­ar and worth­while: Mark Boulton’s Five simple steps to bet­ter typo­graphy.

Don’t for­get these ebooks, either!