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 b13bb36d authored by Florian Moser's avatar Florian Moser
Browse files

Add typo section

parent 091c9bb2
......@@ -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
......
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