Veröffentlicht: 23. Juli 2024
Die CSS-Property font-size-adjust wird heute in Chrome eingeführt und ist Teil der Baseline Newly Available. Mit dieser Eigenschaft lässt sich verhindern, dass Ihr Layout beim Laden von Fallback-Schriftarten verschoben wird, und die Lesbarkeit von Fallback-Schriftarten bei kleineren Schriftgrößen wird sichergestellt. Die Property font-size-adjust ist Teil von Interop 2024. Das ist ein weiterer Erfolg bei der Verbesserung der Interoperabilität der Webplattform.
Das Problem
Wenn Sie zwei Schriftarten mit derselben Größe vergleichen, kann der angezeigte Text je nach Form und Größe der Schriftzeichen sehr unterschiedlich viel Platz einnehmen. In der folgenden Demo wird beispielsweise Text in Verdana und Arial mit einer Schriftgröße von 16 Pixeln gezeigt.
Der Größenunterschied ist darauf zurückzuführen, dass der Aspektwert, also die Höhe von Kleinbuchstaben im Vergleich zu Großbuchstaben in einer Schriftart, zwischen den Schriftarten variiert.
Dies kann zu zwei Problemen führen, wenn eine Schriftart mit einem anderen Aspektwert als Fallback verwendet wird. Erstens ändert sich der Platzbedarf der Schrift. Zweitens ist die von Ihnen ausgewählte Fallback-Schrift möglicherweise weniger lesbar als die zuerst angegebene, insbesondere bei kleinen Schriftgrößen. Das liegt daran, dass die relative Höhe von Kleinbuchstaben im Vergleich zu Großbuchstaben ein wichtiger Faktor für die Lesbarkeit ist.
Vorteile von font-size-adjust
Mit der Eigenschaft font-size-adjust können Sie die Fallback-Schriftart so anpassen, dass sie besser zur ersten Schriftart passt. Das folgende Beispiel zeigt die beiden zuvor gezeigten Schriftarten. Dieses Mal wurde die zweite Schriftart so angepasst, dass sie der ersten entspricht.
font-size-adjust verwendenIn diesem Beispiel wird ein einzelner Wert, eine Zahl, verwendet, um die Schriftarten mit dem Standardschriftschnitt ex-height anzupassen. Das ist das Verhältnis der x-Höhe, also der Höhe eines Kleinbuchstabens „x“ in der Schrift, zur Schriftgröße. Sie können auch das verwendete Schriftmessgerät angeben. Im nächsten Beispiel habe ich die Schriftarten zusätzlich zur Zahl mit dem Schlüsselwort ch-width normalisiert.
font-size-adjust mit dem Schriftmesswert „ch-width“ verwendenEine Liste aller möglichen Werte finden Sie in der MDN-Dokumentation zu font-size-adjust.
Es lohnt sich, Ihre Website mit der Fallback-Schriftart zu überprüfen und zu sehen, ob eine kleine Optimierung mit font-size-adjust die Lesbarkeit für Nutzer, die die Fallback-Schriftart verwenden, verbessern kann. Das gilt vor allem jetzt, da font-size-adjust überall verfügbar ist.