Auf meiner Webseite will ich gern eine serifenbehaftete Schriftart für den Text verwenden, aber die Standardschriften haben mir nicht wirklich gefallen und es ist ein gewisses Glücksspiel, welche Schrift bei jedem Leser verwendet wird. Daher habe ich bei Google-Fonts mir vier Schriftarten ausgewählt und diese als Webfonts eingebunden.

Schriftwahl

Für alle Schriften ist mir wichtig, dass sie frei verfügbar sind. Ich werde zwar nie etwas an den Schriftsätzen verändern, aber für viele Schriftarten gibt es die Projekte bei Github, sodass man leicht Fehler melden kann. Weiterhin benötige ich natürlich das Recht, die Schriften auf meiner Webseite einsetzen zu dürfen und ich möchte die Dateien mit den Schriftsätzen von meinem Server ausliefern können, also nicht als fremde Ressourcen einbinden müssen.

Das Recht auf Bearbeitung könnte dennoch nützlich werden, wenn es zum Beispiel um die Verkleinerung der Dateien geht. Ich verwende meist den gängigen Satz an lateinischen Zeichen, sodass ich viele Zeichen entfernen oder in eigene Dateien auslagern könnte. Mir ist aufgefallen, dass Google-Fonts das so macht.

Variable-Fonts

Dann gibt es die neue Technik Variable-Fonts, bei der für eine Schriftart mehrere Schriftschnitte (Variationen wie kursiv, geneigt, fett und schmal) in einer Datei definiert werden können. Dies reduziert zum einen den Speicher- und Übertragungsbedarf und hat zum anderen den Vorteil, dass feinere Abstufungen zum Beispiel bei den Strichstärken möglich sind. Grob gesagt, sind bei Variable-Fonts die Linienverläufe »dynamisch« und nicht »in Stufen« festgelegt. Die Unterstützung für Variable-Fonts ist in allen modernen Browsern enthalten.

Mehr zum Thema gibt es hier:

Textschriftart

Da ich viel Text auf der Webseite habe und die Darstellungsgeräte bei der Auflösung immer besser geworden sind, will ich für den Text eine serifenbehaftete Schriftart verwenden, um die Lesbarkeit zu erleichtern – ja, ich glaube an die Funktionen von Serifen. Parallel dazu habe ich noch eine serifenlose Schriftart für Zitatblöcke und ähnliche Hervorhebungen ausgewählt. Meine Wahl ist auf Crimson Pro und Work Sans gefallen.

Festbreitenschrift

Als Schrift mit fester Breite für Codeblöcke und Codestücke innerhalb des Fließtexts hatte ich zum Schluss Roboto Mono und Inconsolata zur Auswahl. Im Gegensatz zu anderen Schriften sah bei beiden das @-Zeichen gut aus. Allerdings gefielen mir bei Inconsolata die Klammern besser und die Schrift ist etwas schmaler als Roboto Mono, weshalb sie im Fließtext nicht so löchrig wirkt. Die Roboto Mono passte jedoch besser von der Strichstärke zur Crimson Pro, wo der Inconsolata ein kleines My fehlt. Ich habe mich aber aufgrund der geringeren Breite für die Inconsolata entschieden und später auch bemerkt, dass ich sogar das Debian-Paket fonts-inconsolata mit dieser Schrift installiert hatte.

Das Problem der Strichstärke konnte ich, so fiel mir später ein, durch die minimale Reduktion der Strichstärke der Textschrift ausgleichen, da, wie bei den Variable-Fonts erläutert, die Strichstärken sich auch in feinen Abstufungen anpassen lässt.

Überschriften

Für Überschriften (<h1> bis <h6>) und die Kopfzeile wollte ich eine serifenlose Schrift als Kontrast zur Textschrift haben. Die Schrift Work Sans läuft für die Überschriften sehr weit und sieht daher dünn und löchrig aus. Aber mit der Einstellung letter-spacing lässt sich der Abstand zwischen den Buchstaben verkleinern.

Damit die größeren Buchstaben der Überschriften sich auch gleichmäßig in das Schriftbild einfügen, habe ich als Farbe ein dunkles Grau verwendet.

Anregungen auf anderen Seiten

Umwandlung in woff2

Die ausgewählten Schriften kommen alle im True Type Format als ttf-Dateien. Für das Web ist das woff2-Format besser geeignet, da die Schriftdateien durch die Brotli-Komprimierung kleiner sind. Mit dem Kommandozeilenprogramm woff2_compress (bei Debian im Paket woff2 enthalten) lässt sich das Format leicht umwandeln:

% woff2_compress CrimsonPro-VariableFont_wght.ttf
Processing CrimsonPro-VariableFont_wght.ttf => CrimsonPro-VariableFont_wght.woff2
Compressed 200905 to 75897.

Für Roboto gibt es auch das Debian-Paket fonts-roboto-fontface (Projekt roboto-fontface-bower bei Github), indem woff, woff2 und andere Formate enthalten sind.

CSS-Einstellungen

Um eigene Schriften in CSS verwenden zu können, muss man diese mit @font-face deklarieren, bevor man sie mit font-family: … verwenden kann.

@font-face {
  font-family: CrimsonPro;
  src: local("CrimsonPro-Italic-VariableFont"),
    local("CrimsonPro Italic VariableFont"),
    local("CrimsonProItalicVariableFont"),
    local("CrimsonPro-Italic"),
    local("CrimsonPro Italic"),
    local("CrimsonProItalic"),
    url(/CrimsonPro-Italic-VariableFont_wght.woff2) format("woff2"),
    url(/CrimsonPro-Italic-VariableFont_wght.ttf) format("ttf");
  font-style: italic;
  font-display: swap;
}

Wie man auf die Namen für local() kommt, weiß ich nicht. Ich habe nur geraten und durch Zufall auch bei Inconsolata, wo oben erwähnt, einen Treffer gelandet. Durch font-display: swap blockiert das Laden der Schriftdatei nicht die Darstellung des Textes und wenn die Daten irgendwann geladen wurden, wird der Text neu dargestellt.

Die Einträge lassen sich auch aus der Einbindung von Google-Fonts ermitteln: https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap Für Roboto kann man die Einträge auch aus der Datei /usr/share/fonts-roboto-fontface/css/roboto/roboto-fontface.css aus dem Debian-Paket fonts-roboto-fontface entnehmen.

Google-Webfont-Helper

Für den Export der Schriftdateien und die Erstellung der CSS-Einträge gibt es das Projekt Google-Webfonts-Helper (Quelltext bei Github), bei dem man die gewünschte Schriftart, den Zeichensatz und die Schriftschnitte auswählen kann und bekommt eine Zip-Datei mit allen notwendigen Dateien.

Schriften untersuchen und bearbeiten

Um herauszufinden, welche Zeichen in den jeweiligen Schriften definiert sind, habe ich mir die ttf-Dateien mit FontForge (Debian-Paket fontforge) geöffnet und konnte so die Schriften inspizieren.

Experimente mit Google-Fonts

Um an meinen eigenen Texten verschiedene Schriftarten auszuprobieren, habe ich die Schriften direkt von Google-Fonts mit folgendem Tag im <head> eingebunden:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?↵
  display=swap&family=Crimson+Pro&family=Work+Sans" />

Dabei habe ich auch gemerkt, dass die Schriften nicht immer zügig geladen wurden, weshalb die Einbindung vom eigenen Server besser ist.

Mit den geladenen Schriftsätzen konnte ich dann im Firefox im Inspector (Strg+Alt+c) Schriftart, -größe und andere Parameter direkt verändern. Durch Veränderungen an nur einem Absatz konnte ich auch die Gesamtwirkung der verschiedenen Schriftarten miteinander ausprobieren.

Im Inspector gibt es noch einen speziellen Dialog Fonts, indem man sehen kann, ob wirklich die gewünschte Schrift verwendet wird und einige Schrifteinstellungen lassen sich dort auch angenehm mit Schiebern verändern. Wenn man einen größeren HTML-Abschnitt – im Extremfall <body> – auswählt und mit der Maus über den Schriftnamen fährt, wird in der Darstellung der entsprechende Teil hervorgehoben, der diese Schriftsatz nutzt. So lässt sich leicht feststellen, wo noch CSS-Einstellungen fehlen oder Zeichen vom gewählten Schriftsatz nicht unterstützt werden.

Weitere Informationen