Add typography slides

web/web.html

@@ -306,14 +306,22 @@ class: center, middle
 
 Why? Because:
 <blockquote>
-Users often perceive aesthetically pleasing design as design that’s more usable.
+Users often perceive aesthetically pleasing design as design that’s more usable. -
+<a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" target="_blank">https://www.nngroup.com/articles/aesthetic-usability-effect/</a>
 </blockquote>
 
+Limits? Yes:
+<blockquote>
+form follows function. - Horatio Greenough
+</blockquote>
+
+Do not overdue it!  
+Each design element should have a purpose.
 
 
 ---
 
-# Typography - Font
+# Typography - Typeface
 
 **serif** for books (see header).  
 Line-like Serifs help the eye read.  
@@ -329,7 +337,11 @@ Same width characters help notice patterns faster.
 
 many more variations...
 
-Each font may has different weights  
+---
+
+# Typography - Font
+
+Typefaces may consist of fonts of different weights
 <img src="images/typography_weight.png" width="50%">
 
 Many free-to-use fonts exist, like [google fonts](https://fonts.google.com/).  
@@ -339,15 +351,27 @@ You might want to [pair fonts](https://fontpair.co/).
 
 # Typography - Size
 
-Balance font weight, font size, line length and line height.
+Adjust font size, line height & line length.
 
 Line height  
 <img src="images/typography_line_height.png" width="48%">
 
-Increase line height when:
-- font size decreases
-- font boldness decreases 
-- line length increases
+A line should be around 15 words long. 
+If its too long, the eye can not easily find the start of the next line.
+If its too short, the eye has to move around too much. 
+There are other factors that affect readability, which we will see on the next slide. 
+
+---
+
+# Typography is about Balance!
+
+Balance font weight, font size, line length and line height.
+
+Improve readability:
+- increase line height
+- increase font size
+- increase font boldness 
+- decrease line length
 
 <img src="images/typography_light.png" width="48%">
 <img src="images/typography_regular.png" width="48%">
@@ -371,7 +395,7 @@ Emphasize importance with more space around.
 
 You may want to define a spacing scheme for consistency.  
 Like 4, 8, 16, 32, 64 (geometric progression).  
-Like 5, 8, 13, 21, 34 (Fibonacci numbers / golden cut)
+Like 5, 8, 13, 21, 34 (Fibonacci numbers / golden cut).
 
 ---