Font Weight kurz erklärt
Die CSS Font-Weight Eigenschaft legt fest wie die Schriftstärke einer Schriftart gewählt wird. Im Wesentlichen wird danach ausgewählt welche @font-face Deklaration wirksam wird. Man kann allerdings mehrere Schriftschnitte einbinden.
Erstmal wird vom Browser geprüft, ob für ein Element ein „font-weight“ definiert wurde. Der wert „normal“ entspricht hier 400 und „bold“ entspricht 700 in den meisten Browsern.
Hier findest du übrigens ein geiles Video zur Font-Performance (auf englisch, aber das beste, das man finden kann):
Es kann aber auch ein numerischer Wert, wie 100, 200, 300, 400, 500, 600, 700, 800 oder 900 definiert werden.
Bindest du mehrere Schriftstärken ein, fragst du dich sicherlich, welche Stärke verwendet wird oder?
Was sagt W3C und Google Chrome?
Auf deutsch findet man hier wenige Ressourcen. Doch Google hat (hier) einen tollen Beitrag über Performance und Rendering von Schriften.
In dem Beitrag findest du einen tollen Satz mit Link zum W3C
Wenn eine Stärke angegeben ist, für die keine Schrift vorhanden ist, wird eine Schrift mit ähnlicher Stärke verwendet. Grundsätzlich werden Fettformatierungen Schriften mit höherer Stärke und helle Formatierungen Schriften mit geringerer Stärke zugeordnet.
Doch weil ich mich echt lange durch diese Beiträge graben musst, habe ich anhand des verlinkten W3C Vorgaben das Verhalten im Chrome für ein Tutorial und diesen Beitrag (stundenlang) überprüft und bin zu dem Ergebnis gekommen: Chrome hält sich daran.
Und damit du nicht stundenlang die Vorgaben der Schriftstärke-Auswahl (Font-Matching Algorithmus) des W3C suchen musst, habe ich sie dir unten nochmal aufgeschrieben und erklärt. Nicht nur das – ich habe sie auch übersetzt, damit du sie besser erfassen kannst
Aber kommen wir erstmal zum Offensichtlichen.
Das Offensichtliche zuerst – Die angeforderte Schriftart ist vorhanden
Was passiert wenn eine angeforderte Schriftstärke (z. B. 300) vorhanden ist?
Wird z. B. 300 wird von einer @font-face Deklaration eingebunden und wird 300 angefordert im CSS (durch font-weight: 300), dann wird auch 300 ausgeliefert. Logisch.
Wird ein html Tag mit strong auf „bold“ gesetzt, wird in diesem Fall von den meisten Browsern 700 angefordert. Ist 700 vorhanden wird auch hier logischerweise 700 ausgeliefert.
Doch was passiert, wenn eine Schriftstärke nicht definiert oder gar eingebunden wird.
Das klären wir in den folgenden Abschnitten nach den Vorgaben des W3C, die im Chrome so umgesetzt sind.
Du kannst es gerne ausprobieren.
Vorhandene Stärke nicht verfügbar – Der Font-Matching Algorithmus
Das W3C gibt eine Richtlinie vor, wie Browser die Schriftstärke auswählen, falls die angeforderte nicht vorhanden ist. Hier kommt das Stichwort „Font Matching Algorithm“ ins Spiel. Das heißt es gibt einen Algorithmus nach welchem die Schriftstärke festgelegt wird – das muss natürlich nur festgelegt werden, wenn die angeforderte Schriftstärke nicht vorhanden ist.
Der W3C gibt auf seiner Website 4 Regeln an. Diese kannst du hier auf Englisch einsehen: https://www.w3.org/TR/css-fonts-3/#font-style-matching
Damit du eine schnelle Übersicht bekommst, haben ich dir hier diese Regeln übersetzt:
If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
- Falls die angeforderte Stärke kleiner als 400 ist, werden Stärken in absteigender Reihenfolge unterhalb der angeforderten Stärke geprüft. Ist hier keine Stärke verfügbar, wird überhalb der angeforderten Stärke in aufsteigender Reihenfolge geprüft, bis eine vorhandene Stärke gefunden wird.
- Falls die angeforderte Stärke größer als 500 ist, werden Stärken in aufsteigender Reihenfolge überhalb der angeforderten Stärke geprüft. Ist hier keine Stärke verfügbar, wird unterhalb der angeforderten Stärke in absteigender Reihenfolge geprüft, bis eine vorhandene Stärke gefunden wird.
- Ist die angeforderte Stärke 400, wird 500 geprüft. Ist diese nicht verfügbar, wird die Regel 1 (kleiner als 400) angewendet.
- Ist die angeforderte Stärke 500, wird 400 geprüft. Ist diese nicht verfügbar, wird die Regel 1 (kleiner als 400) angewendet.
Regel (1) und Regel (2) sind sehr verständlich. Regel (3) hört sich auch sofort plausibel an. Für 400 kann 500 genommen werden. Falls nicht, wird in absteigender Reihenfolge geprüft und danach erst in aufsteigender.
Nur die Regel 4 scheint etwas anders zu sein.
Erstmal sieht es so aus, als hätte man sich bei Regel 4 verschrieben. Aber hier läuft meiner Meinung nach die Gefahr, dass bei Schriftstärke 500 sofort auf 900 zugegriffen wird, falls Regel 4 genau das Komplementär zu Regel 3 wäre. Somit ist die Regel fast wie Regel 3. Dies kann je nach Schriftart die Lesbarkeit eines Textes schier unerträglich machen. Würde allerdings Schriftstärke 200 genommen werden, wäre das ein Erträglicher Kompromiss! Fettdruck wird dann also wirklich auch nur für Fettdruck verwendet.
Meine Interpretation der W3C Regeln
Da man über die Regeln des W3C’s lange nachdenken kann und hier auch eine Logik hintersteckt habe ich die folgenden „Eselsbrücken“, bzw. Erklärungen aufgeschrieben.
Das diese Regeln super viel Sinn ergeben, merkt man, wenn man sie übersetzt und zusammenfasst. Regel 3 und 4 lassen sich zusammenfassen in Regel 3 und 1 und 2 lassen sich auch etwas ausdrücken. Hier meine Übersetzung:
- Wer eine leichte Schriftart anfordert, soll diese zu jedem Preis bekommen. Es werden erst alle leichten Stärken gecheckt. Ist absolut keine passende Vorhanden wird natürlich die kleinste vorhandene Stärke verwendet! Somit wird die leichteste Schrift gefunden, die der angeforderten am ähnlichsten ist.
- Wer eine fette Stärke anfordert, soll diese auch hier die möglichst ähnlichste Variante bekommen. Diese soll nach Möglichkeit fett sein, denn sonst muss synthetisiert werden (siehe unten). Ist die angeforderte Stärke nicht vorhanden, wird die immer die jeweils stärkere Schrift geprüft, bis nach oben hin alle geprüft wurden. Danach wird nach unten hin geprüft. Wenn z. B. 400 Vorhanden ist und 700 angefordert wurde, wird aus 400 ein Fettdruck synthetisiert.
- Wird eine mittlere Schrift (medium = 400, 500) angefordert, soll der User auf jeden Fall eine der beiden mittleren Stärken (wahlweise die angeforderte) bekommen oder eine die etwas schwächer ist, damit er noch eine gute User-Experience erfährt. Ist wirklich keine unter 500 vorhanden, muss leider der gesamte Text im Fettdruck ausgegeben werden, denn es wir dann die kleinstmögliche Stärke über 500 gewählt, sogar wenn dies 800 sein sollte.
Nach diesem Algorithmus bekommt der Besucher übrigens immer die möglichst ähnlichste Stärke präsentiert!
Doch was passiert, wenn gar keine Stärke explizit angefordert wird?
Der Sonderfall, falls font-weight nicht definiert wird
Ein Sonderfalls ist es, wenn nichts definiert wird für ein Element (zum Beispiel ein Paragraph, p-Tag). Hier sehe ich zum Beispiel, dass Chrome die kleinste vorhandene Schriftstärke wählt. Werden mit @font-face die Schnitte mit 200, 300 eingebunden, wird also dementsprechend 200 gewählt.
Und das passiert mit strong
Zum Glück werden in den meisten Designs alle strong-Tags auf „font-weight: bold“ gesetzt. Das heißt es gibt hier meistens keinen Sonderfall mehr, dass font-weight nicht definiert ist.
Alle strong-Tags und weitere Elemente, bei denen font-weight auf bold gesetzt wird, bekommt 700 oder höher zugeordnet falls vorhanden.
Sonderfalls bei strong – der Browser synthetisiert Fettdruck
Ist nichts über 400 vorhanden wird Fettdruck vom Browser synthetisiert, was meistens etwas stärker als 400 aussieht. Aber abhängig vom Browser ist diese synthetisierte Fettdruck meist nicht gut von der restlichen Schrift abgehoben. Ist die Stärke 500 vorhanden, wird 500 gewählt.
Also Achtung: es sollte eine Schriftstärke gleich oder größer 500 vorhanden sein, sonst wirkt deine Schrift nicht in allen Browsern. Vor allem der Fettdruck wirkt sehr unterschiedlich.
