Anne H. Typografie ist das wichtigste Instrument der Inhaltsvermittlung, sie strukturiert und ordnet Information und macht Schrift lesbar.
„Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift“. (Kurt Weidemann)
Der Umgang mit Typografie wurde im Web lange vernachlässigt, man konzentrierte sich eher auf Farben, Bilder und die Anordnung der Elemente, die Folge waren schlecht lesbare Texte. Die Weiterentwicklung von Webtechnologien und der Einsatz von Web-Schriften und CSS3 bieten neue Möglichkeiten für Typografie im Web, macht diese jedoch auch komplexer. Webdesigner müssen sich heute mit dem richtigen Umgang mit Typografie und ihren Regeln, Schriftauswahl und Lesbarkeit beschäftigen.
Bei Jürgen Genser haben wir unserer Lehrveranstaltung „Typographie & Design“ eine Zeitreise im Webdesign gemacht. Über die „Wayback-Machine“ können Websites im zeitlichen Verlauf aufgerufen werden. Hier werden die unterschiedlichen Gestaltungsphasen im Web und ihr jeweiliger Umgang mit Typografie deutlich. Ich habe mir die Mercedes-Benz Website, Redbull und Nivea im Zeitverlauf in der Wayback-Machine angesehen. Das Ergebnis könnt ihr euch hier ansehen:
Nach einem Ausflug in die „Webdesign-Geschichte“ widmeten wir uns den Grundlagen der Typografie und dem Einsatz von Webtypografie. Für die Kommunikation mit den Typografie-Profis, gibt es ein paar Fachbegriffe, die man kennen sollte.
Typografie-Begriffe, die man kennen sollte:
- Schriftfamilie: Eine Gruppe zusammengehörender Schriftschnitte mit unterschiedlichen Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …), die in der Regel von einem Entwerfer stammen und gemeinsame Formmerkmale aufweisen.
- Schriftart: Untergruppe oder Nebengruppe einer Schriftgattung.
- Font: Begriff aus der Informationstechnik für den digitalen Zeichensatz bzw. englisch für „Schriftart“
- Schriftschnitt: eine Variation einer Schriftart. Hierbei werden unter anderem die Stärke, Laufweite und Lage der Schrift verändert.
- Kerning (dt. Unterschneidung): Verringerung des horizontalen Abstands zwischen mehreren Buchstaben durch optischen Ausgleich, dass er gleichmäßig erscheint und so vom Betrachter als angenehmer empfunden wird.
- Laufweite: Der Abstand der Buchstaben, Arabischen Ziffern bzw. Satzzeichen zueinander.
Viele weitere Typografie-Begriffe werden hier im Typolexikon umfassend erklärt:
Typografie in meinem Blog
Nach der Lehrveranstaltung habe ich mich gleich an meinen eigenen Blog gemacht und optimiert :). Leider habe ich in der Euphorie vergessen vorher einen Screenshot zu machen, um einen Vorher-Nachher-Vergleich zu zeigen.
In meinem Blog habe ich mich für eine Kombination einer Serifen-Schrift mit einer serifenlosen Schriftart entschieden. In den Headlines verwende ich Playfair Display, die elegant wirkt und im Fließtext verwende ich OpenSans, die speziell für den Bildschirm entwickelt wurde und somit besonders gut lesbar ist. Ich habe die Schriftgrößen besser aufeinander abgestimmt, um die Lesbarkeit auf allen Geräten zu optimieren. Der Kontrast der beiden Schriftarten ist harmonisch und trägt zu einem modernen Schriftbild bei.
Schriftarten
Playfair Display
Open Sans – Fließtext
Headlines
Headline 1
Headline 2
Headline 3
Headline 4
Mein Fazit
Jürgen Genser hat uns viele interessante weiterführende Artikel und Tools zum Thema Typografie bereitgestellt. Da die Lehrveranstaltung leider etwas spät im Semester angesetzt war, hatte ich zu wenig Zeit, tiefer in die Thematik einzutauchen. Zum Beispiel möchte ich mich noch näher mit Typografie im Responsive Design beschäftigen, ich komme allerdings momentan einfach nicht dazu.
Lesetipp:
- Der Ratgeber „Professional Web Typography“ vermittelt sowohl technische als auch ästhetische Gesichtspunkte im Umgang mit Typografie.
- Typecast-Artikel, der sich mit Web Typografie und Responsive Webdesign beschäftigt: A more modern Scale of Web Typography
