Intersim AG – Zur Startseite
Kontakt

Typografie im Web

Symbolbild Typografie im Web

Schriften und der Umgang damit – Typografie – haben eine lange Tradition und gehören zur Kultur in Europa. Dieser Artikel gibt einige Gedanken dazu weiter und stellt die Möglichkeiten von aktuellen Schrift-Technologien dar.

Autor:in
Christoph Blum
Veröffentlicht

Schriftkultur durch die Jahrhunderte bis heute

Die Wurzeln der Typografie reichen in der Geschichte sehr weit zurück, gemeinhin werden die Fünfziger-Jahre des fünfzehnten Jahrhunderts genannt, als Johannes Gutenberg die Idee hatte, einzelne Lettern in Blei zu giessen. Über die Jahrhunderte entwickelte sich eine reiche Tradition im Umgang mit dem Schneiden und Giessen von Lettern, Schriften und dem Druck. Eine eigene Kultur entstand. Gepflegt wurde sie von Schriftsetzern, von «Jüngern Gutenbergs». Man sprach auch von «Schwarzer Kunst», wegen der schwarzen Druckfarbe und der davon schwarzen Hände. In der Typografie-Kultur gibt es einen eigenen Wortschatz: Lustig klingende Fachbegriffe (1) wie «Punze» oder «Marginalie», und ganz deftige wie «Schusterjunge» oder «Hurenkind». Es gibt viele Regeln, beispielsweise zu Abständen. Der normale Wortabstand ist bloss einer von vielen.

Die Gilde der Typografie herrschte unangefochten bis ungefähr Ende der Achtzigerjahre, als sich Desktopcomputer und Layout-Software verbreiteten. Das führte zu einer Verrohung der Typografie und einem Bruch mit der Typo-Kultur: Die Software beherrschte viele Details im Umgang mit Schriften nicht, und unwissende Nicht-Schriftsetzer:innen hatten die Möglichkeit, eine Publikation selbst zu gestalten.

Heute wird gepflegte Typografie vor allem in Printmedien praktiziert, durch Polygraf:innen, Typograf:innen und Grafiker:innen. Sie entwickeln in der Regel jedoch keine Schriften, das machen Type Designer:innen. Sie arbeiten oft allein oder schliessen sich zu kleinen Type Foundries zusammen. Lokal sind das zum Beispiel Extraset in Genf oder Grillitype aus Luzern und New York City. Weltweit gibt es unzählige mehr, zum Beispiel Zetafonts in Italien.

Alle zeichnet aus, dass sie grossartige zeitgenössische Schriften herstellen. Dabei greifen sie auf die reiche Kultur und die Traditionen der Typografie zurück, brechen aber gleichzeitig aus und schaffen viel Neues und Frisches.

Auswahl an zeitgenössischen Schriften

Möglichkeiten aktueller Schriften

Ein Aspekt der Qualität einer Schrift ist deren «Ausbau». Ein gut ausgebauter Font – ein Font ist eine in elektronischer Form vorliegende Schrift – enthält viele Zeichen, sogenannte Glyphen. Beispielsweise einer Ziffer. Von ein und derselben Ziffer kann es mehrere Glyphen geben: Eine für den Einsatz in einer Tabelle, damit die Zahlen bei mehreren Zeilen immer übereinanderstehen, eine in Mediävalform, damit sie in einem Text neben Buchstaben optisch gut passen, und einige in hoch- und tiefgestellter Form, damit sie nicht nur verkleinert und an eine falsche Position hinauf- oder hinuntergeschoben werden und damit zu dünn und unleserlich werden.

Damit alle Geräte – egal ob Layout-Software für den Print, oder Displays und Bildschirme für elektronische Medien – automatisch die richtige Variante eines Buchstabens oder einer Ziffer verwenden, wurde Mitte der Neunzigerjahre das Dateiformat «Open Type» (2) für Schriften definiert. In solchen Schriftdateien können nebst den Zeichen auch noch Regeln und deren Logik definiert werden. Damit können etwa individuelle Abstände zwischen bestimmten Buchstabenpaaren geregelt oder die Verwendung von Ligaturen (Verbindung von mehreren Buchstaben) gesteuert werden, so dass zum Beispiel beim Eintippen von zwei «s» ein «ß» erscheint. Viel der althergebrachten Typo-Kultur kann mit dem OpenType-Format in die heutige Zeit und vor allem auch ins Digitale Zeitalter transferiert werden. In den vergangenen Jahren war diesbezüglich eine positive Entwicklung zu beobachten, hin zu verbesserter Qualität und zu einer Bereicherung kultureller und visueller Natur.

Auswahl an OpenType Features

Bei der Wahl einer Schrift kann die Anzahl der verfügbaren Zeichen eine tragende Rolle spielen. Für ein Unternehmen, welches viel mit Zahlen zu tun hat, können Tabellenziffern zwingend sein, um eine adäquate visuelle Erscheinung zu gewährleisten. Ist das Unternehmen noch in mehreren Sprachregionen tätig, ist ein guter Ausbau oder gar das vorhanden sein einer Schriftsippe mit mehreren Zeichensystemen unabdingbar. Dazu untenstehend ein Bild mit der Übersicht der Glyphen eines gut ausgebauten Fonts, der «Noto». Von ihr gibt es mehre Zeichensysteme, unter anderem auch Japanisch und Chinesisch.

Glyphen eines gut aufgebauten Fonts

Zukunftsweisende Variable Fonts

Bis anhin wurde für jeden Schriftschnitt, zum Beispiel «Dünn», «Normal», «Fett» und «Schräg» je eine eigene Schrift-Datei benötigt. Wenn eine Website alle diese Schnitte laden muss, kommt eine gewichtige Datenmenge zusammen. Mit Variable Fonts kann das umgangen werden; es braucht nur noch ein Font geladen zu werden. Variable Fonts (3) lassen sich von aussen steuern, wie fett, schräg oder breit sie dargestellt werden sollen. Man nennt diese steuerbaren Eigenschaften «Achsen». Ein Variable Font weist mindestens eine Achse auf – zum Beispiel die Stärke – kann aber auch ein Dutzend Achsen aufweisen. Das sind einige der am meisten verwendeten:

  • Gewicht/Strichstärke: von light bis black
  • Breite: schmal bis breit
  • Kursive Formen: ein-aus
  • Neigung/Schräge: von gerade bis geneigt
  • Optische Grösse: variieren der X-Höhe
Variable Font Beispiel

Fazit

Hoffentlich findet das Bewusstsein für Typografie immer mehr den Weg in die digitale Welt. An engagierten Schriftentwicklern fehlt es nicht; sie begeistern uns immer wieder mit ansprechenden Fonts. Persönlich glaube ich, dass auch das Bewusstsein für Schönes und Gepflegtes geschärft werden muss, da dies durchaus einen Wert hat; wie ein Schmetterling, dessen Anblick einem freut.

Verwandte Themen

Weiterführende Projekte und Inhalte zum Thema

Coaching

Quellen

(1) Typografische Fachbegriffe und ihre Beschreibung

(2) a) Wikipedia Open Type

(2) b) GitHub Web Fonts

(2) c) Adobe Open Type Fonts

(2) d) t3n Typografie

(3) [a) Typolexikon]https://www.typolexikon.de/variable-fonts/

(3) b) Variable Fonts web.dev

(3) c) t3n Magazin - Variable Fonts

(3) d) Variable Fonts Google

(3) e) Monotype Fonts

(3) f) GitHub Variable Fonts