From b13bb36d505b0e3870e1ba9abaa3f1a71ca5a9a0 Mon Sep 17 00:00:00 2001 From: Florian Moser <git@famoser.ch> Date: Thu, 3 Dec 2020 23:12:24 +0000 Subject: [PATCH] Add typo section --- web/images/color_bright.png | 3 + web/images/color_default.png | 3 + web/images/color_palette.png | 3 + web/images/spacing_annotated.png | 3 + web/images/spacing_original.png | 3 + web/images/typography_light.png | 3 + web/images/typography_line_height.png | 3 + web/images/typography_regular.png | 3 + web/images/typography_weight.png | 3 + web/web.html | 101 ++++++++++++++++++++++++-- 10 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 web/images/color_bright.png create mode 100644 web/images/color_default.png create mode 100644 web/images/color_palette.png create mode 100644 web/images/spacing_annotated.png create mode 100644 web/images/spacing_original.png create mode 100644 web/images/typography_light.png create mode 100644 web/images/typography_line_height.png create mode 100644 web/images/typography_regular.png create mode 100644 web/images/typography_weight.png diff --git a/web/images/color_bright.png b/web/images/color_bright.png new file mode 100644 index 00000000..cbd1ef6a --- /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 00000000..6dfa7559 --- /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 00000000..9f55d8fb --- /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 00000000..ea6739f2 --- /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 00000000..c2358e37 --- /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 00000000..b575ed74 --- /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 00000000..dfed8535 --- /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 00000000..15804149 --- /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 00000000..45e60261 --- /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 92dd1160..85b3dfcb 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 -- GitLab