diff --git a/web/images/color_bright.png b/web/images/color_bright.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ac2c618a211cc5b2dd99fa06d264b0ef42795fc
Binary files /dev/null and b/web/images/color_bright.png differ
diff --git a/web/images/color_default.png b/web/images/color_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4a0a42603fade58a32dcabe549f4ff67b124c51
Binary files /dev/null and b/web/images/color_default.png differ
diff --git a/web/images/color_palette.png b/web/images/color_palette.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb65342f32f0178d4eda53224c78602508396f31
Binary files /dev/null and b/web/images/color_palette.png differ
diff --git a/web/images/spacing_annotated.png b/web/images/spacing_annotated.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2a96cf44f1ff2cbb14198ff39443a781515011a
Binary files /dev/null and b/web/images/spacing_annotated.png differ
diff --git a/web/images/spacing_original.png b/web/images/spacing_original.png
new file mode 100644
index 0000000000000000000000000000000000000000..42fc67686c0ba876f76f44b09a2969b64dea8f54
Binary files /dev/null and b/web/images/spacing_original.png differ
diff --git a/web/images/typography_light.png b/web/images/typography_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9b7beac2f70c673e6353604cacf93f97517b096
Binary files /dev/null and b/web/images/typography_light.png differ
diff --git a/web/images/typography_line_height.png b/web/images/typography_line_height.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a6cacae4206c73d24b9b695b1b7c960fde2ab0a
Binary files /dev/null and b/web/images/typography_line_height.png differ
diff --git a/web/images/typography_regular.png b/web/images/typography_regular.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a5c4bca4da0dc7c8194ca3cd2c9e1d06e4c4707
Binary files /dev/null and b/web/images/typography_regular.png differ
diff --git a/web/images/typography_weight.png b/web/images/typography_weight.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e4c335a281f26e065c36eca54f36bd94c1971ae
Binary files /dev/null and b/web/images/typography_weight.png differ
diff --git a/web/web.html b/web/web.html
index 92dd11601655ef097c3d079a2bc168989336d05f..85b3dfcbfff2ca4661bd785d5d62c0054cd406ac 100644
--- a/web/web.html
+++ b/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