Fallback für Handschriften im Web

Eine Kundin möchte eine Schriftauswahl sehen, wie ihr Name im Logo erscheinen könnte. Das Logo soll der Animator, Illustrator und Musiker Markus Kempken erstellen. Damit ich schon mal alles in WordPress aufsetzen kann entscheide ich mich dafür, erst einmal eine „Fantasie-Schrift“ von Fonts.Google.com einzusetzen. Gesagt getan – aber wie sieht eigentlich der Fallback für Handschriften im Web aus?

Schriften werden im Webdesign immer mehrstufig angegeben:

  1. Name des Webfonts, also der Schrift die extra für die Seite geladen werden muss
  2. Name der Systemschrift die angezeigt werden soll wenn der Webfont nicht geladen werden kann
  3. Generischer Name der Schrift (generic font) – eine Angabe in welchem Stil die Schrift sein soll

Von den generischen Schriften kannte ich in den 20 Jahren, die ich mich inzwischen mit HTML beschäftige immer nur serif, sans-serif und monospace.

Erst im Rahmen dieses Projektes habe ich auf der (20 Jahre alten) Seite des W3 über Schrift-Familien (auf Englisch) mit fantasy den generischen Namen für Schreibschriften.

Und eine weitere Entdeckung: auch für kursive Schriftarten gibt es einen generischen Schriftnamen – cursiv.

Fallback für Handschriften im Web im Browser-Vergleich

Natürlich wollte ich erst einmal wissen, wie dieser Default von den verschiedenen Browsern dargestellt wird:

Standard Fantasy-Schrift im Chrome-Browser
Standard Fantasy-Schrift im Chrome-Browser
Standard Fantasy-Schrift im Edge-Browser
Standard Fantasy-Schrift im Edge-Browser
Standard Fantasy-Schrift im Firefox-Browser
Standard Fantasy-Schrift im Firefox-Browser
Standard Fantasy-Schrift im Opera-Browser
Standard Fantasy-Schrift im Opera-Browser
Verschnörkelte Fantasy-Schrift im Safari-Browser
Verschnörkelte Fantasy-Schrift im Safari-Browser

Von den fünf getesteten Browsern sind die Ergebnisse auf vier davon identisch. Nur Safari fällt aus der Rolle. Wenn die gewünschte Schrift nicht geladen werden kann würde diese wesentlich größere Darstellung zu Überlappungen im Safari führen. Dies kann im schlimmsten Fall nur durch eine Browser-Weiche abgefangen werden. Ob der Aufwand lohnt ist im Einzelfall zu entscheiden.

Der Satz „The Quick Brown Fox Jumps Over The Lazy Dog“ ist übrigens ein Pangramm: ein Satzin dem alle Buchstaben aus dem Alphabet vorkommen. Designer in Action haben eine Zusammenstellung mit verschiedenen Pangrammen veröffentlicht.

Standard-Schriften

Noch vor ein paar Jahren gab es wunderbare Webseiten, die die Schriften, die auf allen Betriebssystemen zuverlässig installiert sind gelistet haben. Inzwischen sind jedoch auf allen Geräten so viele Schriften installiert, das kaum noch verlässliche Daten zu finden sind.

Um die Datenübertragung gering zu halten sollte eine Schrift nur geladen werden, wenn sie nicht auf dem Gerät des Users installiert ist. Um dies zu erreichen wird vor der verlinkten URL versucht die Schrift lokal zu finden:

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/raleway-v12-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Raleway Bold"), local("Raleway-Bold"), url("fonts/raleway-v12-latin-600.eot?#iefix") format("embedded-opentype"), url("fonts/raleway-v12-latin-600.woff2") format("woff2"), url("fonts/raleway-v12-latin-600.woff") format("woff"), url("fonts/raleway-v12-latin-600.ttf") format("truetype"), url("fonts/raleway-v12-latin-600.svg#Raleway") format("svg");
  /* Legacy iOS */
}

Weitere Links zu Typographie-Themen auf meiner Webseite