Typografie/Variable Fonts

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Browserunterstützung
caniuse.com

Variable Fonts bestehen aus nur einem Font (und damit einer Datei), der aber die gesamte Palette der verfügbaren Schnitte, Breiten und Stile abdeckt und nicht nur die wenigen, die du zuvor separat geladen hättest.

Beachte: Die richtige Darstellung von Variablen Fonts hängt nicht nur vom Browser, sondern auch vom Betriebssystem ab. Linux-Systeme benötigen eine aktuelle FreeType-Version; macOS muss neuer als 10.13 sein.
Da du keinen Einfluss auf die Betriebssysteme deiner Nutzer hast, musst du abwägen, ob du Variable Fonts als progressive enhancement einsetzen willst. Einem Teil deiner Nutzer würde so nur die Default-Einstellungen des Systems angezeigt werden.
--Matthias Scharwies (Diskussion) 12:02, 28. Jul. 2023 (CEST)

Funktionsweise

Bisher bestanden Schriftarten aus mehreren einzelnen Schriftschnitten, wobei jeder Schriftschnitt eine bestimmte Kombination aus Breite, Gewicht und Stil repräsentierte. So gab es separate Dateien für „Roboto Regular“, „Roboto Bold“ und „Roboto Bold Italic“.

Wollte man weitere Schriftschnitte hinzufügen, z. B. einen helleren für Bildunterschriften oder einen schwereren für zusätzliche Betonung, wären mehrere weitere Dateien erforderlich. Dies führt zu mehr HTTP-Anfragen und zum Herunterladen von mehr Daten.

Links: Beispiele aus der Roboto-Schriftfamilie. Rechts: benannte Schriftschnitte innerhalb der Familie.[1]

Variable Fonts integrieren verschiedene Schriftstile einer Schrift in einer einzigen Datei. Anstelle der einzelnen Schriftschnitte sind verschiedene Achsen definiert. So können z. B. die Werte für font-weight ausgehend vom Standardwert regular bis zu Werten wie thinner und bolder festgelegt werden. Anders als bei den bisherigen Abstufungen kann die Schriftstärke nun stufenlos berechnet werden.

Variable Fonts verknüpfen den Basisschriftschnitt mit den Extremwerten einer Schrifteigenschaft. So entsteht eine Achse, entlang derer die Schriftstärke stufenlos interpoliert werden kann.[2]

In der OpenType-Spezifikation sind fünf Standardachsen hinterlegt:

Achsenname CSS-Wert
wght Weight (Schriftstärke)
wdth Width (Schriftbreite)
slnt Slant (Neigung)
opsz Optical Size (optische Größe)
ital Italic (Kursive)


font-variant

Mit der ursprünglichen Variante der CSS-Eigenschaft font-variant konnten als besondere Schriftvariante Kapitälchen (kleine Großbuchstaben) statt der kleinen Buchstaben angezeigt werden:

das klassische font-variant ansehen …
p { font-size: 16px; }
h1, span, cite { font-variant: small-caps; }
blockquote { width: 30em; }
blockquote p { font: 20px Georgia, Times, sans-serif; }
cite { display: block; text-align: right; }

Überschrift, span-Element und die Quellenangabe innerhalb des cite-Elements werden in Kapitälchen angezeigt.

Mit dem CSS Fonts Module Level 4 wird font-variant zur zusammenfassenden Eigenschaft für …

Ergänzend gibt es die Low-Level-Eigenschaften font-feature-settings und font-variation-settings. Mit diesen Eigenschaften kannst du OpenType-Schriften beliebig in Form und Größe gestalten.

font-feature-settings

Verwende die CSS-Eigenschaft font-feature-settings, um mit Hilfe von Parametern erweiterte typografische Funktionen im Gestaltungsraum der Schrift auszuwählen:

Kapitälchen mit font-feature-settings 
/* Common ligatures (ff, fi, ffi, fl, ffl, fj, …) */
font-feature-settings: "liga";

/* Small caps */
font-feature-settings: "smcp";

font-variation-settings

Verwende die CSS-Eigenschaft font-variation-settings, um mithilfe von Parametern eine (oder mehrere) Instanz(en) im Gestaltungsraum der Schrift auszuwählen:

Schriftgewicht und Laufweite mit font-variation-settings 
.example { font-variation-settings: "wght" 500, "wdth" 327; }

Im Beispiel wurden für die Schriftstärke ein Wert von 500 festgelegt (also semibold), während die Laufweite 327 beträgt.

Woher weiß ich nun, welche Werte ich setzen kann?

Um zu erkennen, welche Achsen bei einer Schrift mit welchen Mindest- und Maximal-Werten definiert werden können, benötigt man ein Analysetool wie …

Gestaltung mit CSS

Einfacher ist es, hier auf die gewohnten, im vorherigen Kapitel eingeführten „normalen“ CSS-Eigenschaften zurückgreifen zu können:

font-weight und font-stretch

Mit font-weight kannst du die Schriftstärke, mit font-stretch die Laufweite eines Fonts anpassen. In diesem Generator kannst du beide Werte und die Schriftgröße stufenlos anpassen:

Angabe des Schriftgewichts ansehen …
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  src: url(.../robotoflex.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}	

#changingText {
	font-family: "Roboto Flex", sans-serif;
	text-align: center;
  --fontSize: 78px;
  font-size: var(--fontSize);
  --fontWeight: 550;
  font-weight: var(--fontWeight);
  --fontStretch: 100%;
  font-stretch: var(--fontStretch);
}

Um die gewohnten Eigenschaften verwenden zu können, müssen sie vorher innerhalb der @font-face-Regel deklariert werden. Der Container mit der id changingText ist einerseits contenteditable, d. h. du kannst den Text beliebig ändern, andererseits durch font-size, font-stretch und font-weight formatiert. Als Wert dient je eine custom property, die über einen Schieberegler verändert werden kann.

Beachte, dass der font-stretch-Wert für h2 nicht vom Container #changingText übernommen wird.

Verwende für kleinere Viewports leichtere Schriftvarianten, um mehr Informationen zu vermitteln.[3]

Neigung – kursiv oder oblique?

Mit der Eigenschaft font-style steuerst du die Neigung der Schrift, auch als Schriftstil bezeichnet.

Schriftstile ansehen …
.kursiv  { font-style: italic; }
.oblique { font-style: oblique; }

Du wirst kaum einen Unterschied zwischen „kursiv“ und „oblique“ feststellen können. Bisher galt dabei, dass besonders im Printdesign für den Schriftstil „kursiv“ besondere kursive Zeichen verwendet, für einen „schräg gestellten“ Schriftstil die normalen Zeichen gedreht wurden.

Bei variablen Fonts können Neigung (slnt) und Kursivschnitt (ital) als Achsen verfügbar sein; ob echte kursive Formen vorhanden sind, hängt vom jeweiligen Font ab.

Vergleiche die künstlich abgeschrägten Darstellungen von Palatino „a“ und Baskerville „N“ in Grau mit den tatsächlichen kursiven Versionen.[4]

Animation

Du kannst die oben vorgestellten Werte auch mit CSS animieren. Viele Tutorials zeigen Tricks, die früher nur mit SVG und JavaScript möglich waren. Allerdings solltest du immer die Performance deiner Webseite im Blick haben und auf nutzlose Gimmicks verzichten. [5]



Weblinks

interaktive Demos:

Deutsch:


Quellen

  1. ↑ Introduction to variable fonts on the web (web.dev)
  2. ↑ Anatomy of a variable font (web.dev)
  3. ↑ smashing magazine: Benton Modern, A Case Study On Art-Directed Responsive Web Typography vom 27.05.2015
  4. ↑ csswg.org: font-style-prop
  5. ↑ Silly hover effects and the future of web typography (pixelambacht.nl) December 7, 2017

Abgerufen am 25.08.2026
von "http://wiki.selfhtml.org/wiki/Typografie/Variable_Fonts"