CSS-Größenanpassung für @font-face

Beim Laden einer Web-Schriftart können Sie jetzt ihre Skalierung anpassen, um die Schriftgrößen im Dokument zu normalisieren und Layoutverschiebungen beim Wechsel zwischen Schriftarten zu verhindern.

Adam Argyle

Sehen Sie sich das folgende Demo an. Hier ist font-size ein einheitlicher 64px und der einzige Unterschied zwischen den einzelnen Headern ist der font-family. Die Beispiele auf der linken Seite wurden nicht angepasst und haben eine uneinheitliche endgültige Größe. In den Beispielen rechts wird size-adjust verwendet, um sicherzustellen, dass 64px die einheitliche endgültige Größe ist.

In diesem Beitrag wird ein neuer CSS-Schriftartdeskriptor namens size-adjust vorgestellt. Außerdem werden einige Möglichkeiten gezeigt, Schriftgrößen zu korrigieren und zu normalisieren, um die Nutzerfreundlichkeit zu verbessern, einheitliche Designsysteme zu schaffen und das Seitenlayout vorhersehbarer zu gestalten. Ein wichtiger Anwendungsfall ist die Optimierung des Renderns von Webfonts, um kumulative Layoutverschiebungen (Cumulative Layout Shift, CLS) zu verhindern.

Hier finden Sie eine interaktive Demo des Problembereichs. Ändern Sie die Schriftart über das Drop-down-Menü und beobachten Sie Folgendes:

1. Die Höhenunterschiede in den Ergebnissen.
2. Visuell störende Inhaltswechsel.
3. Interaktive Zielbereiche bewegen sich (das Drop-down-Menü springt).

Schriftarten mit size-adjust skalieren

Einführung in die Syntax:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Erstellt eine benutzerdefinierte Schriftart mit dem Namen Adjusted Typeface.
2. Mit size-adjust wird jede Glyphe auf 150% ihrer Standardgröße skaliert.
3. Betrifft nur die einzelne importierte Schriftart.

So verwenden Sie die oben genannte benutzerdefinierte Schriftart:

h1 {
  font-family: "Adjusted Typeface";
}

CLS durch nahtlosen Schriftartwechsel reduzieren

Im folgenden GIF sehen Sie die Beispiele auf der linken Seite und wie sich die Darstellung ändert, wenn die Schriftart geändert wird. Dies ist nur ein kleines Beispiel mit einem einzelnen Überschriftenelement und das Problem ist sehr auffällig.

Eine gute Methode zur Verbesserung des Schriftarten-Renderings ist Font-Swapping. Rendern Sie zuerst eine schnell ladende Systemschriftart, um den Inhalt anzuzeigen, und tauschen Sie sie dann gegen eine Web-Schriftart aus, wenn diese vollständig geladen ist. So erhalten Sie das Beste aus beiden Welten: Die Inhalte sind so schnell wie möglich sichtbar und Sie erhalten eine ansprechend gestaltete Seite, ohne dass die Nutzer lange auf die Inhalte warten müssen. Das Problem ist jedoch, dass sich beim Laden der Web-Schriftart manchmal die gesamte Seite verschiebt, da die Schriftart eine etwas andere Höhe hat.

Wenn Sie size-adjust in die @font-face-Regel einfügen, wird eine globale Glyphenanpassung für die Schriftart festgelegt. Wenn Sie den Zeitpunkt richtig wählen, ist die visuelle Änderung minimal und der Übergang nahtlos. Wenn Sie einen nahtlosen Tausch erstellen möchten, passen Sie die Größe manuell an oder verwenden Sie diesen Größenanpassungsrechner von Malte Ubl.

Zu Beginn dieses Beitrags wurde das Problem mit der Schriftgröße durch Ausprobieren behoben. size-adjust wurde im Quellcode so angepasst, dass derselbe Header in Cookie und Arial dieselbe 64px wie Press Start 2P rendert. Ich habe zwei Schriftarten an eine Zielschriftgröße angepasst.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Schriftarten kalibrieren

Sie als Autor legen die Kalibrierungsziele für die Normalisierung der Schriftgrößen fest. Sie können die Schriftart beispielsweise auf Times, Arial oder eine Systemschriftart normalisieren und dann benutzerdefinierte Schriftarten entsprechend anpassen. Oder Sie passen die lokalen Schriftarten an die heruntergeladenen an.

Strategien für die size-adjust-Abstimmung:

1. Remote-Ziel:
   Lokale Schriftarten an heruntergeladene Schriftarten anpassen.
2. Lokales Ziel:
   Heruntergeladene Schriftarten an lokale Zielschriftarten anpassen.

Beispiel 1: Remote-Ziel

Im folgenden Snippet wird eine lokal verfügbare Schriftart an die Größe einer benutzerdefinierten Schriftart mit Remote-SRC angepasst. Eine benutzerdefinierte Schriftart, die nicht lokal gespeichert ist, ist das Ziel für die Abstimmung, z. B. eine Markenschriftart:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

In diesem Beispiel wird die lokale Schriftart Arial in Erwartung einer geladenen benutzerdefinierten Schriftart angepasst, um einen nahtlosen Übergang zu ermöglichen.

Diese Strategie hat den Vorteil, dass Designer und Entwickler dieselbe Schriftart für die Größenanpassung und Typografie verwenden können. Die Marke ist das Kalibrierungsziel. Das ist eine gute Nachricht für Designsysteme.

Die Verwendung einer Markenschriftart als Ziel ist auch die Grundlage für Maltes Rechner. Wählen Sie eine Google-Schriftart aus. Es wird berechnet, wie Arial angepasst werden muss, damit sie nahtlos mit der ausgewählten Schriftart ausgetauscht werden kann. Hier ist ein Beispiel für Roboto-CSS aus dem Rechner, in dem Arial geladen und „Roboto-fallback“ genannt wird:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Im folgenden Beispiel wird eine vollständig plattformübergreifende Anpassung erstellt. Es werden zwei angepasste lokale Ersatzschriftarten für den Fall bereitgestellt, dass eine Markenschriftart verwendet wird.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Beispiel 2: Lokales Ziel

Im folgenden Snippet wird eine benutzerdefinierte Schriftart einer Marke an Arial angepasst:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Diese Strategie hat den Vorteil, dass sie ohne Anpassungen gerendert wird und dann alle eingehenden Schriftarten entsprechend angepasst werden.

Feinabstimmung mit ascent-override, descent-override und line-gap-override

Wenn die allgemeine Skalierung von Glyphen nicht ausreicht, um Ihr Design oder Ihre Ladestrategien anzupassen, können Sie die folgenden Optionen für die Feinabstimmung verwenden, die mit size-adjust funktionieren. Die Eigenschaften ascent-override, descent-override und line-gap-override sind derzeit in Chromium 87+ und Firefox 89+ implementiert.

ascent-override

Der Deskriptor ascent-override definiert die Höhe über der Grundlinie einer Schriftart.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Bei der roten Überschrift (nicht angepasst) ist über den Großbuchstaben A und O Platz, während die blaue Überschrift so angepasst wurde, dass die Versalhöhe genau in den Gesamtbegrenzungsrahmen passt.

descent-override

Der descent-override-Deskriptor definiert die Höhe unter der Grundlinie der Schriftart.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Die rote Überschrift (nicht angepasst) hat unter den Grundlinien von „D“ und „O“ Platz, während die blaue Überschrift so angepasst wurde, dass die Buchstaben direkt auf der Grundlinie aufliegen.

line-gap-override

Der line-gap-override-Deskriptor definiert den Messwert für den Zeilenabstand für die Schriftart. Dies ist der empfohlene Zeilenabstand oder die externe Vorlaufzeile für die Schriftart.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Die rote Überschrift (nicht angepasst) hat keinen line-gap-override, sie befindet sich also bei 0%. Die blaue Überschrift wurde um 50 % nach oben angepasst, wodurch entsprechend Platz über und unter den Buchstaben geschaffen wurde.

Zusammenfassung

Jede dieser Überschreibungen bietet eine zusätzliche Möglichkeit, überschüssigen Text aus dem sicheren Text-Bounding-Box des Webs zu entfernen. Sie können das Textfeld für eine präzise Darstellung anpassen.

Fazit

Mit dem CSS-Feature @font-face size-adjust lässt sich die Text-Bounding Box Ihrer Weblayouts anpassen, um das Schriftart-Swapping zu optimieren und Layoutverschiebungen für Ihre Nutzer zu vermeiden. Weitere Informationen finden Sie in den folgenden Ressourcen:

• CSS Fonts Level 5 Spec
• Größenanpassung auf MDN
• Nahtloser Wechsel des @font-face-Generators
• Cumulative Layout Shift (CLS) auf web.dev
• Neue Methode zur Reduzierung der Auswirkungen des Schriftartenladens: CSS-Schriftartdeskriptoren

Foto von Kristian Strand auf Unsplash