mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 13:24:05 -06:00
115 lines
2.3 KiB
Markdown
115 lines
2.3 KiB
Markdown
---
|
|
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
|
|
|
|
|
|
leading depends on the font and the user setting but usually is 20% of the font
|
|
|
|
|
|
x height depends on the font.
|
|
- smaller x height adds "elegance"
|
|
- larger x height isbettwe to low res displays
|
|
|
|
|
|
ascenders and descender usually correlates with x height (small x-height > large ascenders and descenders)
|
|
|
|
|
|
weight: usually regullar and bold, also light semibold, ultrabold
|
|
|
|
|
|
sans serifs have less line width variation
|
|
|
|
|
|
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
|
|
|
|
|
|
expectation plays an important role
|
|
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
|
|