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 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;

  }

Du möchtest weiterlesen?

PAGE+ Test jetzt 3 Monate für nur 14,90 Euro* testen

• 3 Monate unbegrenzter Zugriff auf alle PAGE+ Inhalte
• PAGE-Update-Newsletter
• 3 x PAGE Impuls
• 1 PAGE Magazin frei Haus und digital als E-Paper
• Digitales Heftarchiv bis 2012
• Zusätzlich mehr als 100 eDossiers zu Spezialthemen
• Newsletter Daily und Weekly

 

Jetzt testen!

Anmelden

*) danach 129,00 € im Jahresabo - monatlich kündbar Alle Abo-Angebote im Überblick

Das könnte dich auch interessieren

Kreation

18.04.2024

Geschnitten, getippt – und sehr schön: Bimmi Identity

Typografie

18.04.2024

Serifenlose Push: Blick hinter die Kulissen

IMPULS 04|24

16.04.2024

Workflow: Art Direktion mit KI

Kreation

15.04.2024

Ganz wie der Chefkoch selbst: Branding der Matheson Food Company

Branche & Karriere

11.04.2024

Wie KI der Content-Produktion zusetzt

Typografie

11.04.2024

Die neuen Schriften der PAGE