Typography - Websites

Sa., 13/08/2022 - 13:34
Body

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/