Add typo section

web/web.html

@@ -309,31 +309,122 @@ Why? Because:
 Users often perceive aesthetically pleasing design as design that’s more usable.
 </blockquote>
 
+
+
 ---
 
-# Typography
+# Typography - Font
+
+**serif** for books (see header).  
+Line-like Serifs help the eye read.  
+*Arial, Times New Roman, ...*
+
+**sans-serif** for displays (see body).  
+No serifs look cleaner.  
+*Verdana, Courier, Helvetica, ...*
+
+**monospace** for code (`like this`).  
+Same width characters help notice patterns faster.  
+*Consolas, ...*
+
+many more variations...
+
+Each font may has different weights  
+<img src="images/typography_weight.png" width="50%">
+
+Many free-to-use fonts exist, like [google fonts](https://fonts.google.com/).  
+You might want to [pair fonts](https://fontpair.co/).
+
+---
+
+# Typography - Size
+
+Balance font weight, font size, line length and line height.
+
+Line height  
+<img src="images/typography_line_height.png" width="48%">
+
+Increase line height when:
+- font size decreases
+- font boldness decreases 
+- line length increases
 
-combine fonts
+<img src="images/typography_light.png" width="48%">
+<img src="images/typography_regular.png" width="48%">
 
 ---
 
 # Spacing
 
-more is better
+Content needs to breathe!
+
+Separate what does not belong together.  
+Separate little what does.  
+
+<br>
+<br>
+<br>
+Emphasize importance with more space around.  
+<br>
+<br>
+<br>
+
+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)
+
+---
+
+# Spacing - Example
+
+<img src="images/spacing_original.png" width="80%">
+
+---
+
+# Spacing - Example
+
+<img src="images/spacing_annotated.png" width="80%">
 
-use some math law
 
 ---
 
 # Colors
 
-palette generator
+Give your site a distinctive look with your "brand" colors.
+
+Primary color associated with your brand.  
+Secondary color which contrasts primary nicely (like complement).  
+Colors for messages (red for errors, orance for warnings, ...).
+
+Pastel colors for a soft look, bright colors for inspiring effects  
+<img src="images/color_palette.png" width="40%" alt="https://colorhunt.co/palette/7642">
+<img src="images/color_bright.png" width="40%" alt="https://colorhunt.co/palette/220000">
+
+Many premade color schemes, like [colorhunt](https://colorhunt.co)  
+Many color scheme generators out there, like [paletton](https://paletton.com)
 
 ---
 
 # Bootstrap
 
 
+---
+
+# Typography
+
+explain em, rem
+
+https://app.typeanything.io/
+
+
+
+Body text recommendations:
+- at least 16px font size
+- regular boldness
+- 10 - 15 words per line 
+
+Do not sacrifice readability to design!
+
 ---
 
 class: center, middle