To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit e59ec596 authored by Florian Moser's avatar Florian Moser
Browse files

Add typography slides

parent 6c367d29
......@@ -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).
---
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment