Ich habe heute Oliver Schöndorfer von Pimp my Type bei mir zu Gast im Podcast. Es geht um die richtige Wahl einer Schriftfamilie und warum immer nur auf kostenlose oder Google-Fonts zu setzen, vielleicht nicht die richtige Strategie für deine Kunden sein könnte. Genauso gehen wir tief ins Detail bei Themen wie Maße, Buchstabenabstand, der perfekten Zeilenlänge und so weiter.

Das Schriftbild ist heutzutage definitiv enorm wichtig für Webdesigner geworden. Eine Website mit schöner Typografie hebt sich einfach deutlich von anderen Webseiten ab. Zudem kann mittlerweile so gut wie alles aus dem Printbereich ins Web übernommen werden. Und wenn man Animationen beachtet, ist das Web sogar noch ein besseres Spielfeld als die Printmedien.

Ich fand es ein sehr interessantes Gespräch und auch für mich waren einige neue Tipps dabei. Ich habe anschließend beispielsweise direkt 350€ in eine eigene Font für mein Brand investiert.

Am Ende kritisiert Oliver sogar noch meine Webflow Onlinekurs Landingpage.

Ich habe heute Oliver Schöndorfer von Pimp my Type bei mir zu Gast im Podcast. Es geht um die richtige Wahl einer Schriftfamilie und warum immer nur auf kostenlose oder Google-Fonts zu setzen, vielleicht nicht die richtige Strategie für deine Kunden sein könnte. Genauso gehen wir tief ins Detail bei Themen wie Maße, Buchstabenabstand, der perfekten Zeilenlänge und so weiter.

Das Schriftbild ist heutzutage definitiv enorm wichtig für Webdesigner geworden. Eine Website mit schöner Typografie hebt sich einfach deutlich von anderen Webseiten ab. Zudem kann mittlerweile so gut wie alles aus dem Printbereich ins Web übernommen werden. Und wenn man Animationen beachtet, ist das Web sogar noch ein besseres Spielfeld als die Printmedien.

Ich fand es ein sehr interessantes Gespräch und auch für mich waren einige neue Tipps dabei. Ich habe anschließend beispielsweise direkt 350€ in eine eigene Font für mein Brand investiert.

Am Ende kritisiert Oliver sogar noch meine Webflow Onlinekurs Landingpage.

Um welche Themen es in der Folge geht

Die richtige Schrift

  • Keine Display Fonts für Fließtext
  • Je langweiliger, desto besser
  • Sans und Serif sind beide in Ordnung
  • Unterscheidbare Buchstabenformen sind wichtig
  • An die Einsatzbereiche denken

Harmonische Maße

  • Schriftgröße an die Distanz zum Medium anpassen
  • Zumindest 16 px (1 em) für Fließtext
  • Die ideale Zeile ist zw. 60 und 80 Zeichen lang
  • Je länger die Zeile, desto höher die line-height
  • Bei voller Layoutbreite zumindest 1.5

Gefährlicher Blocksatz

  • Keinen Blocksatz verwenden

Achtung, Fake-Fonts

  • Die Schriften laden, die man braucht
  • Falls man die Schrift nicht hat, alternativ mit Default-Stylings vom Browser umgehen

Der Teufel im Detail

  • Auf Satzzeichen achten
  • Apostroph sieht aus wie eine kleine 9 ’
  • Gänsefüßchen im Deutschen sehen aus wie 99 66
  • Bindestrich (Divis) am kürzesten, Gedankenstrich länger –, Geviertstrich ganz lange —

Slides, die diese Tipps beinhalten: https://zeichenschatz.net/uploads/2019/11/web-typografie-2019-a-tag.pdf

Oliver im Web:

5 Tipps um deine Web-Typografie zu verbessern
  • Dieser Beitrag enthält eine Podcastfolge!

    Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.

  • Dieser Beitrag enthält ein Video!

    Das Video wird dir auf Patreon freigeschalten.

Diesen Beitrag als Podcast hören

Um welche Themen es in der Folge geht

Die richtige Schrift

  • Keine Display Fonts für Fließtext
  • Je langweiliger, desto besser
  • Sans und Serif sind beide in Ordnung
  • Unterscheidbare Buchstabenformen sind wichtig
  • An die Einsatzbereiche denken

Harmonische Maße

  • Schriftgröße an die Distanz zum Medium anpassen
  • Zumindest 16 px (1 em) für Fließtext
  • Die ideale Zeile ist zw. 60 und 80 Zeichen lang
  • Je länger die Zeile, desto höher die line-height
  • Bei voller Layoutbreite zumindest 1.5

Gefährlicher Blocksatz

  • Keinen Blocksatz verwenden

Achtung, Fake-Fonts

  • Die Schriften laden, die man braucht
  • Falls man die Schrift nicht hat, alternativ mit Default-Stylings vom Browser umgehen

Der Teufel im Detail

  • Auf Satzzeichen achten
  • Apostroph sieht aus wie eine kleine 9 ’
  • Gänsefüßchen im Deutschen sehen aus wie 99 66
  • Bindestrich (Divis) am kürzesten, Gedankenstrich länger –, Geviertstrich ganz lange —

Slides, die diese Tipps beinhalten: https://zeichenschatz.net/uploads/2019/11/web-typografie-2019-a-tag.pdf

Oliver im Web: