Alle Zeichen einer Schrift ansehen zu können, klingt nach einer Nebensächlichkeit. Für die Arbeit mit Schriften ist es eine Grundfunktion – und ein gutes Beispiel dafür, wie sich eine Aufgabe vom eigenen Rechner ins Web verlagert hat.
Die Empfehlung von damals
Die ursprüngliche Fassung dieses Beitrags aus dem Jahr 2007 empfahl ein kleines Freeware-Programm namens Fontlister. Der beschriebene Nutzen: Es zeigt in einer Spalte alle installierten Schriften an, im übrigen Programmfeld lassen sich beliebige Zeichen darstellen. Man konnte einen eigenen Text eingeben, die Standardvorgabe wählen – „ABC…abc…123…“ – oder eine Art ASCII-Tabelle anzeigen lassen, die den Blick auf wirklich alle Zeichen einer Schrift erlaubte. Außerdem ließen sich Schriften vergleichen und in der Größe verstellen.
Der genannte Anwendungsfall verrät die Zeit: bei einem Dingbat-Font nach einem Symbol für eine Grafik suchen. Symbolschriften waren damals die übliche Quelle für Icons – ein Pfeil, ein Briefumschlag, ein Telefon kamen aus einer Schrift wie Wingdings oder Webdings, wurden im Grafikprogramm gesetzt und als GIF exportiert.
Zwei Dinge waren dabei selbstverständlich, die es heute nicht mehr sind. Erstens: Die Schrift war auf dem eigenen Rechner installiert – Webfonts gab es nicht. Zweitens: Die Frage lautete, welche Zeichen eine Schrift hat, weil ein fehlendes Zeichen bedeutete, dass es auf der Seite nicht darstellbar war.
Was aus dem Problem geworden ist
Symbole kommen nicht mehr aus Schriften
Der Hauptanwendungsfall des alten Beitrags ist entfallen. Icons werden heute als SVG eingebunden – als Vektorgrafik, die sich färben, skalieren und beschriften lässt:
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 6h16v12H4z M4 6l8 6 8-6" fill="none"
stroke="currentColor" stroke-width="2"/>
</svg>
Der Wert currentColor ist dabei der Punkt: Das Symbol übernimmt die Textfarbe seiner Umgebung – etwas, das eine als Grafik exportierte Dingbat nie konnte.
Wo es nur um ein einzelnes Zeichen geht, tut es auch ein Emoji oder ein Unicode-Zeichen direkt im Text. Beides braucht keine Datei und keine installierte Schrift.
Aus ASCII wurde Unicode
Der alte Beitrag sprach von einer ASCII-Tabelle. ASCII umfasst 128 Zeichen – das lateinische Alphabet, Ziffern, ein paar Satzzeichen. Kein Umlaut, kein ß, kein Euro-Zeichen.
Was der Fontlister anzeigte, war genau genommen der 256 Zeichen umfassende Zeichensatz einer Schrift nach Windows-1252 oder ISO-8859-1. Genau daraus entstanden die Darstellungsfehler, die das Web dieser Jahre prägten – aus „Größe“ wurde „Größe“, wenn Datei und Deklaration nicht zusammenpassten.
Unicode löst das: über 149.000 Zeichen, alle Schriftsysteme, ein Standard. Die Frage „welche Zeichen hat diese Schrift“ ist damit eine andere geworden – keine Schrift enthält alle. Sie enthält eine Auswahl, und relevant ist, ob die Auswahl das abdeckt, was auf der Seite steht.
<meta charset="utf-8">
Diese eine Zeile im Kopfbereich erledigt heute, was damals eine ständige Fehlerquelle war. Sie sollte in den ersten 1024 Bytes des Dokuments stehen.
Die Werkzeuge sind ins Web gewandert
Was ein installiertes Programm brauchte, läuft heute im Browser. Der Grund ist einfach: Die Schrift muss nicht mehr installiert sein, sie wird geladen.
Der lokale Weg existiert weiterhin – die Zeichentabelle unter Windows, die Zeichenübersicht unter macOS. Für die Arbeit mit Webfonts sind aber die Übersichten der Schriftanbieter praktischer, weil sie den vollständigen Zeichenvorrat einer Schrift auflisten und die Schnitte direkt vergleichbar machen.
Die Frage, die heute wichtiger ist
Nicht mehr „welche Zeichen hat diese Schrift“, sondern „welche Zeichen brauche ich“. Denn jedes Zeichen im Font kostet Ladezeit, und eine vollständige Unicode-Schrift kann mehrere Megabyte groß sein.
Deshalb liefert man nur den benötigten Ausschnitt aus. Der Bereich für Westeuropäisch:
@font-face {
font-family: "Meine Schrift";
src: url("/fonts/meineschrift-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+2000-206F, U+20AC, U+2122;
font-display: swap;
}
Der Browser lädt diese Datei dann nur, wenn auf der Seite tatsächlich ein Zeichen aus diesem Bereich vorkommt. Wer weitere Sprachen unterstützt, legt für jeden Bereich eine eigene Datei an – wer nur Deutsch braucht, spart den Rest vollständig ein.
Der Ersparniseffekt ist erheblich: Eine auf Westeuropäisch beschränkte Schrift liegt typischerweise bei 15 bis 30 Kilobyte, dieselbe Schrift mit vollem Zeichenvorrat bei mehreren hundert.
Was passiert, wenn ein Zeichen fehlt
Fehlt ein Zeichen in der geladenen Schrift, greift der Browser auf die nächste Schrift der Liste zurück – für dieses eine Zeichen. Ein Wort kann dadurch in zwei Schriften erscheinen. Das ist der heutige Nachfolger des Problems, das der alte Beitrag mit dem Zeichentabellen-Blick lösen wollte:
body {
/* die Ersatzschriften sollten aehnlich proportioniert sein */
font-family: "Meine Schrift", "Helvetica Neue", Arial, sans-serif;
}
Prüfen lässt sich das mit einer Zeile im Browser – sie sagt, ob ein Zeichen tatsächlich aus der gewünschten Schrift stammt:
document.fonts.check('16px "Meine Schrift"', '€');
Fazit
Der Beitrag von 2007 löste ein Problem, das es so nicht mehr gibt: Schriften waren lokal installiert, Symbole kamen aus Dingbat-Fonts, und der Zeichenvorrat einer Schrift entschied darüber, was auf einer Seite überhaupt darstellbar war.
Unicode und Webfonts haben das aufgelöst – und die Frage umgedreht. Sie lautet heute nicht mehr, ob ein Zeichen vorhanden ist, sondern welchen Ausschnitt man ausliefert, damit die Seite schnell bleibt.
Bei Typografie, Webfonts und Ladezeitoptimierung unterstützen wir Sie als Webdesign-Agentur gerne.
Kommentare