Typographic design

Published on: Author: Greg Alchin
font elements

There are many information design decisions that we make as part of the process of creating high quality learning resources. These range from selecting age appropriate content,  through to the structure of the information as well as graphical design issues.

Many teachers wrongly apply paper-based design rules when designing digital resources.  This inadvertently causes barriers for learners. There are several key differences between paper and digital which greatly effects:

  • How we interact with the content,
  • Our efficiency in comprehending the content,
  • Our capacity for sustained low effort interaction with the content.

Research has highlighted that implementing paper-based design rules in a digital environment can decrease reading efficiency by as much as 25%!

What follows are some of the default text-based onscreen design rules for digital devices that you can easily implement to improve student engagement and comprehension.

font elementsRules of Thumb

  • Page layout: landscape layouts fit the computer or tablet screen and cut down on scrolling. If you are designing for mobiles then portrait layout is best.
  • Font:  San serif fonts such as Verdana have a higher readability quotient on screen than serif fonts such as Times New Roman. This is because San serif fonts are easier to read and in particular for fonts such as Verdana the height of the lowercase x is much taller.
  • Font size: Increasing from a minimum12pt to 14pt for paragraphs improves comprehension as it helps to compensate for the fact that computer screens display  information at a lower resolution than paper.
  • Font colour: When elements on the page are too light (or dark), they can hinder the legibility of content. This can become a distraction or a barrier as some students will spend excess energy straining to see the text.
  • Line spacing: A spacing of 1.3 – 1.5 increases the whitespace between each line and improves readability.
  • Characters per line: A maximum limit of 60 characters per line cuts down on readers getting lost moving from line to line. (Lower the character with a lower reading age.)
  • Paragraph justification: A left justification mirrors general reading behaviour and increases readability. Centre or fully justified decrease readability.
  • Paragraph styles: Using clearly defined paragraph styles (eg: heading 1, heading 2, default, body) improves the document structure which improves comprehension as well embedding data which supports screen reading devices.
  • Paragraph Orphans: Single words or short phrases left to sit alone at the end of a paragraph are called widows. If they are left to sit alone at the beginning of a paragraph, they are called orphans. Both draw unnecessary visual attention to themselves, which can distract the reader.
  • Writing style: Content should be concise, objective and scannable. It should also use:
    • Highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and colour are others) meaningful sub-headings (not “clever” ones).
    • A conversational style using first and second person which is easier to understand.
    • Bulleted lists
    • One idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
    • The inverted pyramid style, starting with the conclusion.
    • Half the word count (or less) than conventional writing.
Print Friendly, PDF & Email