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

12.07.2025

Schriftfamilie Kermit: Jenseits der Muppet Show

Kreation

09.07.2025

Wie Polaroid die Schönheit der realen Welt feiert – und aufrüttelt

Kreation

08.07.2025

Zeff: Mülleimer aus Müll – und das mit einer Identity von Pentagram

Branche & Karriere

08.07.2025

DIE ZEIT im Interview: »Wir müssen besser sein als KI«

Kreation

07.07.2025

Webdesign: 10 Grundregeln für mehr Barrierefreiheit

Kreation

30.06.2025

Leuchtend, offensiv und typografisch: Die neue Identity der Villa Merkel