diff --git a/web/images/color_bright.png b/web/images/color_bright.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbd1ef6ab2184ebe117179e3044b40041c8f1714
--- /dev/null
+++ b/web/images/color_bright.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fe829aa597af8a117fa539e1f34629e580791731797fd6cfb61db5a4c07ad44b
+size 23755
diff --git a/web/images/color_default.png b/web/images/color_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..6dfa75595e39facda84c6e142a2561185ca63aee
--- /dev/null
+++ b/web/images/color_default.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:055f8301d7c74ca239e28bc5674fc361bc9c87488be883b4346481bd2bf895ae
+size 7114
diff --git a/web/images/color_palette.png b/web/images/color_palette.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f55d8fbf99ff271661f40cc84cac1c2f7467ae7
--- /dev/null
+++ b/web/images/color_palette.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f14eedb3f9b2c8d511f5a261c5c041d99afe6cca517df0674ad216f62433ee17
+size 22002
diff --git a/web/images/spacing_annotated.png b/web/images/spacing_annotated.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea6739f23b9f2a98ada86753306f939ed65263e6
--- /dev/null
+++ b/web/images/spacing_annotated.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dcf4b57555f81b339bbcecbc8f99929a5bd0b20e969b3db5cb190d9fd171ae5c
+size 209037
diff --git a/web/images/spacing_original.png b/web/images/spacing_original.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2358e37b4969b392e802a2a019955ffaca918b3
--- /dev/null
+++ b/web/images/spacing_original.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a73136bfd0d9cf6693fcea5a204e8e865f441e07c7b0926f95d58b81784833c
+size 199743
diff --git a/web/images/typography_light.png b/web/images/typography_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..b575ed74ee3747d598821331ba693676006043f1
--- /dev/null
+++ b/web/images/typography_light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b446764cf84f8eef5573fe1f09feebc2bbbadf5bfa0cb2255dad4e007d386231
+size 38990
diff --git a/web/images/typography_line_height.png b/web/images/typography_line_height.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfed8535e7e7fe9f2aac025750d731195b20072b
--- /dev/null
+++ b/web/images/typography_line_height.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2930f6eaea587d72806f004c0655acd8d709e8670935dcbb792534298cb81db3
+size 45187
diff --git a/web/images/typography_regular.png b/web/images/typography_regular.png
new file mode 100644
index 0000000000000000000000000000000000000000..158041499eb48493169c735e9408d73b7a9308c1
--- /dev/null
+++ b/web/images/typography_regular.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9d5e3bb08740cd5b8dea1b8bbe4cd464b390e5f0a0bd18192ba449fcbf2c0202
+size 43224
diff --git a/web/images/typography_weight.png b/web/images/typography_weight.png
new file mode 100644
index 0000000000000000000000000000000000000000..45e60261caa7c7c551733d4de1495267ba9e0c8e
--- /dev/null
+++ b/web/images/typography_weight.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3921a72ecb77bed3fc5e1cc9358cb1582134b689ed6ea4f8306a236f3e8e504
+size 13500
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