PAGE online

Variable Fonts Tutorial: Konturen anpassen

Björn Münker, Senior Software Developer bei Struggly, erklärt den Umgang mit Variable Fonts in CSS und warum die Verwendung der variablen GT Maru von Grilli Type bei der Entwicklung der Lernplattform Struggly so praktisch war.

Variable Font GT Maru für die Lernplattform Struggly
Durch die Verwendung der GT Maru als Variable Font ließen sich Schrift und UI Design detailliert und stufenlos aufeinander abstimmen. Hier passt die Strichstärke von Typo und Kontur. Mehr zur Entwicklung der preisgekrönten Lernplattform Struggly

Variable Fonts definieren wir zunächst wie herkömmliche Fonts in CSS per @font-face – teilen dem Browser aber mit, dass es sich um einen variablen Font handelt. In unserem Fall wird eine mögliche Range für die Schriftstärke definiert: alle Werte zwischen 200 und 900.

  @font-face {
  font-family: “GT Maru”;
  src: url(“GT-Maru-VF.woff2”) format(“woff2”) tech(“variations”),
  url(“GT-Maru-VF.woff2”) format(“woff2-variations”);
  font-weight: 200 900;
  }

Mit einer Abfrage kann man herausfinden, ob ein Browser Variable Fonts unterstützt. Abgesehen von Internet Explorer lässt sich eine solche Abfrage ebenfalls direkt in CSS umsetzen:

@supports (font-variation-settings: normal) {
/* Der Browser unterstützt Variable Fonts */
}

Je nachdem, welche Achsen im Font definiert sind, etwa Stärke (Weight), Breite (Width), Neigung (Slant) oder auch Farbe (Color), kann man diese nun ansprechen und frei kombinieren. In unserem Fall – der GT Maru – sind für die CSS Property font-weight nun nicht nur wie bei herkömmlichen Schriften fixe Werte wie 500 oder Light möglich, sondern alle Wer­te zwischen 200 und 900. Beispiel:

.text {
font-weight: 540; /* setzt die Schriftstärke exakt auf den Wert 540, also irgendwo zwischen dem herkömmlichen Medium und Bold */
}

So können wir die Schriftstärke stufenlos definieren und in unserem Fall die Outlines der Buttons perfekt auf die Zahlen und Rechenzeichen anpassen, die alle aus der variablen Version der GT Maru gesetzt sind. Bei Verwendung von statischen Fonts hätten wir uns hier vermutlich zwischen Medium und Bold entscheiden müssen, auch wenn die für uns perfek­te Stärke irgendwo dazwischen liegt.

Da variable Fonts eine Vielzahl von Achsen enthalten und Typedesigner:innen diese teils frei benennen können, ist es nicht möglich, jede Achse mit einer bestehenden CSS Property anzusprechen. In solchen Fällen kann man stattdessen die Property font-variation-settings nutzen, mit der sich dann auf alle vorhandenen Achsen zugreifen lässt. Eine Achse wird dabei immer mit einer vierstelligen Buch­stabenkombination angesprochen (beispielsweise wght für Weight), gefolgt vom Wert, der für die­se Achse ge­setzt werden soll.

.text {
font-variation-settings: “wght” 540; /*entspricht font-weight: 540, nutzt aber font-variation-settings für den Zugriff */
}

.special-text {
font-variation-settings: “wght” 540, “slnt” 10; /* spricht zwei Achsen an, die Schriftstärke und die Neigung (in Grad) */
}

Variable Font GT Maru für die Lernplattform Struggly. Font auf dunklem Hintergrund
Bei der Verwendung auf dunklen Hinter­gründen wird die Schrift fetter dargestellt, sodass sie optisch genauso groß wirkt wie auf hellen Hintergründen

So funktionieren Variable Fonts in der Praxis!

Dieses Tutorial gehört zum Artikel »So funktionieren Variable Fonts in der Praxis!«

Dieser Artikel ist zuerst in PAGE 01.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.

PDF-Download: PAGE 01.2023

Excel Yourself! Design & Beratung ++ Making-of: Innovative Mathe-Lernplattform ++ Botanical Branding ++ ENGLISH SPECIAL Studio Safar ++ Trend: Übersinnliches ++ Corporate Font BMWTypeNext ++ Zoom-Illustrationen: Tools & Tipps ++ Variable Fonts in der Praxis

9,90 €
AGB

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren