---
title: "16-distributing-cognition-and-visual-design-typography"
aliases: 
tags: 
- info203
- lecture
sr-due: 2022-04-30
sr-interval: 3
sr-ease: 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](https://i.imgur.com/9lMGK1g.png)

leading depends on the font and the user setting but usually is 20% of the font
![100](https://i.imgur.com/eABpxfK.png)

x height depends on the font.
- smaller x height adds "elegance"
- larger x height isbettwe to low res displays
![250](https://i.imgur.com/BvPCazi.png)

ascenders and descender usually correlates with x height (small x-height > large ascenders and descenders)
![400](https://i.imgur.com/Iv7FK4F.png)

weight: usually regullar and bold, also light semibold, ultrabold
![400](https://i.imgur.com/YboKpT7.png)

sans serifs have less line width variation
![400](https://i.imgur.com/3GkpMf3.png)

some fonts provide small caps and lowercase numbers
![](https://i.imgur.com/lEYKFl8.png)



- 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](https://i.imgur.com/XEF8nlr.png)

expectation plays an important role
![300](https://i.imgur.com/Uu6B2bQ.png)



## 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](https://i.imgur.com/T80gQOA.png)