Passende Web-Schriften - Freigiebigkeit

Schrift gehört zum Design, passende Web-Schriften zum Web-Design — nicht nur zu besonderen Anlässen. Mit bootScore können wir Google Fonts direkt einbauen. Uns wird sogar erklärt, wie wir sie lokal hosten und so die Erwähnung im Datenschutzkonzept umgehen. Gleichwohl müssen wir uns dazu ein wenig auch auf Bootstrap einlassen:

[ de | en ]

Lösung

Wähle aus den Google Fonts Deine Schriften aus:
- eine Schrift mit Serifen (z.B. pt-serif oder noto-serif),
- eine dazu passenden serifenlose Schrift (z.B. pt-sans oder noto-sans),
- eine dazu passende Monospace-Schrift (pt-mono oer noto-sans-mono)
- und vielleicht noch eine spezielle Schrift für Überschriften (z.B. arima-madurai oder eb-garamond)
Wähle jede Schrift im google-webfonts-helper an und
- belasse den Zeichensatz (charset) auf latin
- selektiere — so weit vorhanden — die Größen 400 und 700.
- selektiere dazu — so weit vorhanden, die Stile regular, regular italic, bold und bold italic.
- kopiere den im google-webfonts-helper dazu erzeugten font-face-code in die Datei scss/_bscore_custom.scss
- lade das Zip-Paket aus dem google-webfonts-helper herunter.
Erzeuge einen Ordner fonts in Deinem Child-Thema.
Entpacke alle heruntergeladenen Zip-Pakete im Ordner fonts
Erweitere die Datei scss/_bscore_variables.scss um die Zeilen:

  $font-family-base: 'Noto sans', Verdana, sans-serif !default;
  $font-family-sans-serif: 'Noto Sans', Verdana, sans-serif, !default;
  $font-family-monospace: 'Noto Sans Mono', 'Courier New', monospace, !default;
  $font-family-code: 'Noto Sans Mono', 'Courier New', monospace, !default;
  $headings-font-family: 'EB Garamond', Garamond, serif !default;
  $display-font-family: 'EB Garamond', Garamond, serif !default;

Hintergrund

Schriften sind — begrifflich und inhaltlich gesehen — ein weites Feld¹:

In der Typografie ist es üblich zwischen Serifen-Schriften und serifenlosen Schriften zu unterscheiden. Serifenschriften seien — heißt es — für gedruckten Fließtext besser, weil sie durch ihre horizontalen Verlängerungen am Buchstaben das Auge besser führen. Im Web galt dagegen lange, dass seriflose Schriften am Bildschirm lesebarer seien. Je feiner aber die Bildschirme über die Zeit wurden, desto feiner ließen sich auch die Serifen darstellen. Das Auge ermüdete weniger. Und so wird heute gesagt, es gäbe von der Lesbarkeit her keinen wirklich Unterschied mehr: Serifenschriften und serifenlose Schriften können gleichermaßen verwendet werden.

Für alles nur eine einzige Schrift zu verwenden, langweilt allerdings. Wenigstens die Überschriften und die Textkörper sollten sich unterscheiden. Andererseits reduzieren zu viele Schriften — der Unruhe im Gesamtbild wegen — die Lesbarkeit. Und Lesbarkeit und unmittelbare Wahrnehmbarkeit ist nun einmal der Qualitätsmaßstab. So arbeitet die moderne Web-Designerin mit Paaren, mit einem Font für die Überschrift, einem für den Fließtext. Und eben deshalb werden uns heute so oft Fontpaare ‘empfohlen’, bei denen die Fonts doch recht wild kombiniert werden.

In diesem Kontext wichtig ist auch die Unterscheidung zwischen font-familiy und font-face. Mit der CSS-Anweisung font-family: XYZ; teilen wir dem Browser — ungenau gesprochen — mit, dass er den Text in einem HTML-Tag mit dem Font XYZ darstellen solle. Tatsächlich weisen wir ihn aber an, den Text mit einem passenden Font aus der Font-Familie XYZ darzustellen. Mit der CSS-Anweisung @font-face {...}² haben wir ihm zuvor gesagt, dass eine bestimmte durchgestaltete Schrift aus einer bestimmten Schriftfamilie (font-family: XYZ) mit einem bestimmten Stil (font-style: [normal|italic]) und einer bestimmten Stärke (font-weight: [<400<...<700<]) zur Verfügung steht und wo er sie findet. Es ist dann Aufgabe des Browsers, die für eine bestimmte Stelle im HTML-Quelltext am besten passende Schrift konkret herauszusuchen. Denn er muss ja nicht nur die Schrift selbst darstellen, sondern auch die Spezifikationen normal, italic, bold, bold-italic berücksichtigen.³

Wenn ein spezifizierter Font doch nicht zu Verfügung steht — etwa, weil der Browser ihn nicht hat herunterladen oder verstehen können -, dann wählt der Browser einen anderen, möglichst ‘ähnlichen’ Font aus seinem Bestand. Und ‘ähnlich’ meint hier nur, ob es sich dabei auch um einen serifenlosen Font oder auch um eine serifenlose Schrift handelt. Wenn für die anderen geforderten Eigenschaften kein genau passender Font einer Familie bereitsteht, kann der Browser diese Eigenschaften ‘herstellen’, indem er den gewählten Font rechnerisch kippt oder verstärkt. Solche ‘berechneten’ Schriftypen sehen aber schlechter aus, als die explizit so gestalteten.⁴

Im Prinzip kann die Web-Designerin also nicht sicher sein, wie ihr Text auf dem Rechner einer Leserin tatsächlich aussieht. Um die Wahrscheinlichkeit zu erhöhen, dass die Designerin ihrer Leserin das liefern kann, was sie vorhat, dürfen in der CSS-Anweisung font-family: XYZ; mehrere Font-Familien kombiniert werden — bis hin zur generischen Familie serif, sans-serif oder monospace. Der Browser sichert zu, — für jeden Buchstaben — den ersten Font aus einer der Familien zu nehmen, mit dem er den Buchstaben wie gefordert darstellen kann. Ob und wie gut das klappt, hängt auch von Art und Güte des Browsers ab. Und um der Designerin noch mehr Gewissheit zu bieten, ist das Konzept der Web Safe Fonts entstanden⁵: Fonts, von denen frau weiß, dass sie auf den Geräten (meistens) zur Verfügung stehen. Aus diesen wählt sie ersatzweise die, die ihren Designvorstellungen zwar nicht optimal, aber noch gut gerecht werden.

Damit entsteht eine Strategie, Google-Fonts lokal zu integrieren⁶:

Wir entscheiden uns für eine Font-Paar und nutzen — wie von bootScore empfohlen — den google-webfonts-helper, um die entsprechenden Google-Fonts herunterzuladen und die auch generierten @font-face-Anweisungen in Datei scss/_bscore_custom.scss einzufügen.

In der Datei scss/_bscore_variables.scss legen wir dann fest, wofür die Schriften überhaupt verwendet werden sollen. Dazu nutzen wir die Boostrap-Methodik:

Bei Bootstrap legen wir über die Variable $font-family-base die ‘Hauptschrift’ fest. Das kann die Familie einer Serifenschrift oder einer serifenlosen Schrift sein. Über die Variable $font-family-sans-serif legen wir die serifenlosen Hauptschrift fest. Eine Variable $font-family-serif gibt es nicht. Wollen wir für die Überschriften eine andere Familie nehmen, als die der generellen Hauptschrift, wären dafür die Variablen $headings-font-family und $display-font-family zuständig. So lassen sich alle Kombinationen einfach abbilden.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

vgl. https://kinsta.com/de/blog/html-fonts/ [↩]
vgl. https://www.w3schools.com/cssref/css3_pr_font-face_rule.php [↩]
vgl. https://technicalcommunicationcenter.com/2020/06/10/whats-a-font-font-family-typeface-font-face/ [↩]
Deshalb ist es wichtig, die gewünschte Schriftfamilie mindestens in den Stärken ‘400’ und ‘700’ und die jeweils in den Typen ‘regular’ und ‘italic’ bereitzustellen. [↩]
vgl. https://www.w3schools.com/cssref/css_websafe_fonts.php [↩]
Die Alternative wäre, die Fonts fallweise direkt von Google-Font-Servern hinzuladen zu lassen. Das erleichtert Deine Arbeit. Und kompliziert Dein Datenschutzkonzept: Denn beim Herunterladen fragt Google Nutzerdaten ab, also die Deiner Leserin. Das verursacht Deine Site. Mithin müsstest in Deinem Datenschutzkonzept darauf hinweisen. Besser also, Du lädst die Fonts selbst herunter, integrierst sie in Deine Site und lieferst sie selbst mit aus. [↩]