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;

  }

Sie möchten weiterlesen?

PAGE+ DIGITAL jetzt 3 Monate für nur 14,85 Euro* testen

• alle PAGE+ Inhalte auf page-online.de
• Alle Ausgaben digital lesen
• Zugang zum digitalen Heftarchiv bis 2012 zurück
• mehr als 100 eDossiers zu Spezialthemen
• Newsletter Daily und Weekly
• monatlich kündbar

 

Jetzt testen!

Anmelden

*) danach 99,00 € / Jahr, monatlich kündbar Alle Abo-Angebote im Überblick

Das könnte Sie auch interessieren

Branche & Karriere

08.06.2023

Berufsbilder, die Design und Strategie verbinden

Typografie

08.06.2023

TDC-Gewinner 2023: Buddyrich Coffee von Linshaobin Design

Typografie

07.06.2023

TDC-Gewinner 2023: Coral Typography Tool von Class Tao

Tools & Technik

07.06.2023

Ausprobiert: Ko-Kreation mit ChatGPT und Adobe Firefly

Kreation

06.06.2023

Nischen finden und besetzen – mit PAGE 07.2023!

Kreation

06.06.2023

Neue Identity, neues Design: Aus Jaguar Land Rover wird JLR