quartz/content/notes/16-distributing-cognition-and-visual-design-typography.md
Jet Hughes eec8badee0 update
2022-04-28 11:51:17 +12:00

2.3 KiB

title aliases tags sr-due sr-interval sr-ease
16-distributing-cognition-and-visual-design-typography
info203
lecture
2022-04-30 3 250

Dist cognition

when interfaces help people disribute cognition it can

  • exourage experimentsation
  • scaffold learning and reuce errors through reduncdancy
  • show (only) differences that matter
  • convert slow calculation into fast perception
  • support chunking, especially by experts
  • increase effieciency
  • facilitate collaboration

good representation shows only relevant information and enables:

  • comparison
  • exploration
  • problem solving

deep vs shallow interface

Visual design

combine text and graphics. how to represent?

  • whitespace for grouping
  • size contrasts for heiarchy
  • variable scale and weight
  • colors

three goals

  • guide
  • pace
  • message

Three tools

  • typography
  • layout
  • colour

Typography

most common

  • gill sans
  • helvetica
  • calibri
  • arial
  • times

three types

  • serif
  • sans serif
  • handwritten

point size 100

leading depends on the font and the user setting but usually is 20% of the font 100

x height depends on the font.

  • smaller x height adds "elegance"
  • larger x height isbettwe to low res displays 250

ascenders and descender usually correlates with x height (small x-height > large ascenders and descenders) 400

weight: usually regullar and bold, also light semibold, ultrabold 400

sans serifs have less line width variation 400

some fonts provide small caps and lowercase numbers

  • serif hypothesis
    • serif fonts are easier to read
    • preferable for long stretches of text because serifs provide anchors and guide the eye
    • not proven

more info on the top than the botton 300

expectation plays an important role 300

which font to use?

  • depends on context
  • recoomentations
    • slides and posters sans serif
    • printed text serif
    • web sans serif
    • sans serif is better in lower resolutions
    • combinations: (header sans, text serif)
    • comic sans good for dyslexia
    • logos should catch the eye

300