diff --git a/web/web.html b/web/web.html index 85b3dfcbfff2ca4661bd785d5d62c0054cd406ac..46b3c2a83b8713a6f8db05047b1a4d6a01a15e4f 100644 --- a/web/web.html +++ b/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). ---