Typography - Websites

Font weight und Lesbarkeit

https://uxmovement.com/content/how-font-weight-improves-text-readability/

Wichtig

• Fließtext ist anders behandelt als kurzer Text in Blöcken.
• Schrift nicht zu groß! Char-Limit durch width-bregrenzung im Artikel erreichen.
• Für jeden breakpoint ändert sich das!!

Meine Probleme

• Die Zeilen sind aktuell zu lang bis 115 Zeichen.
• Desktop: 60-80 Zeichen ist besser fürs Lesen/rastern.
• Mobil 30-40 pro Zeile

To bodytext easier to read, set the line spacing to 120–145% of the point size.

Headings

• Primary heading 180–200% of the body text. 
• secondary heading, modify it to 130–150% of body text.

Spezialblock/Template

Ich brauche einen Spezialblock mit großer Schrift, so wie an es oft sieht. Quasi eine Blockquote, das keine Blockquote ist!

Schriftgröße

• Mobile: 12-16pt 
• Tablet: 15-19pt  
• Desktop: 16-20pt, 1.3 em ergibt hier beim Theme ca. 80 Zeichen pro Zeile.

PT to EM

• 12pt = 1em
• 14pt = 1.2 em
• 15pt = 1.3 em
• 16pt = 1.4 em
• 17pt = 1.45 em
• 18pt = 1.5 em
• 20pt = 1.6 em 

Webfonts

Keine laden, weil pagespeed. Nutze native fonts.

Lesen: https://www.uxtoast.com/design-tips/5-tips-for-perfect-typography

Quellen

https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

https://uxdesign.cc/7-web-typography-rules-27de68c60f6

Das hier ist verdammt gut und begründet: https://www.toptal.com/designers/typography/web-typography-infographic

Demo-Tool: https://www.gridlover.net/try

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

https://bitsofco.de/the-new-system-font-stack/