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

15.11.2024

Alles neu 2025: Der KLASS Kalender »next chapter«

Kreation

11.11.2024

Starkes G: Pentagrams neue Identity für die Guggenheim Museen

Kreation

09.11.2024

Leuchtend & dringlich: Grüne Clubkultur Kampagne von Karl Anders

Typografie

08.11.2024

»Prima soll Kindern das Lesen- und Schreibenlernen erleichtern«

Kreation

07.11.2024

Liebe für Aufgeschlossene: Dating-App Feeld launcht Magazin

Typografie

05.11.2024

GT Flaire: Business meets fun