Zu Variablenschriftarten migrieren

1. Einführung

Letzte Aktualisierung:11.05.2022

Mit variablen Schriftarten können Sie dynamische Variabilität in Ihre Benutzeroberfläche einbringen. Das ermöglicht eine bessere Reaktionsfähigkeit bei Layouts, Designs und Barrierefreiheit und macht Ihre Apps schneller.

Lerninhalte

Was sind variable Schriftarten?
Wie Sie damit Schriftarten anpassen können.
Wie Sie variable Schriftarten in Ihren Designs verwenden.
Wie Sie variable Schriftarten mit der Google Fonts API und in CSS implementieren.

Vorbereitung

In diesem Lab bauen wir auf einigen grundlegenden Designkonzepten auf.

Kenntnisse von Typografie-Skalen.
Kenntnisse von Figma.
Grundkenntnisse in HTML und CSS.

Voraussetzungen

Figma-Konto
Figma-Designlab-Datei
Code-Editor Ihrer Wahl für das Web

2. Jetzt starten

Einrichtung

Zuerst müssen Sie auf die Figma-Datei des Designlabs zugreifen. Alles, was Sie für das Lab benötigen, ist in der Figma-Datei enthalten. Sie können die Datei entweder herunterladen und importieren oder sie aus der Figma-Community duplizieren.

Melden Sie sich zuerst in Figma an oder erstellen Sie ein Konto.

Aus der Figma-Community duplizieren

Rufen Sie die Datei „Migrating to Variable fonts“ auf oder suchen Sie in der Figma-Community nach „Migrating to Variable fonts“. Klicken Sie rechts oben auf Duplizieren , um die Datei in Ihre Dateien zu kopieren.

Dateilayout

Die Datei ist in sich geschlossen und beginnt mit einer Einführung. Jeder Abschnitt ist in eine Reihe von Zeichenflächen unterteilt, die miteinander verknüpft sind. Es werden einige Kernkonzepte für den Abschnitt und dann Übungen vorgestellt. Die Abschnitte und Übungen bauen aufeinander auf und sollten nacheinander bearbeitet werden.

In diesem Codelab werden diese Konzepte und Übungen ausführlicher erläutert. Lesen Sie das Codelab, um mehr über die neuen Material You-Funktionen zu erfahren.

Ab der Zeichenfläche Intro gibt es Schaltflächen, die die Zeichenflächen in der richtigen Reihenfolge miteinander verknüpfen. Klicken Sie auf die Schaltfläche, um auf den Link zuzugreifen.

Nach variabler Schriftart suchen

Bevor wir beginnen, müssen wir prüfen, ob wir eine variable Schriftart haben. In dieser Datei wird Roboto Flex verwendet, das bereits in Figma verfügbar ist. Sie können es aber auch unter fonts.google.com herunterladen.

3. Was sind variable Schriftarten?

Variable Schriftarten sind ein neues innovatives Schriftformat, mit dem Nutzer mehr Kontrolle über ihre Schriftarten und Symbole erhalten. Roboto Serif und Roboto Flex sind neue Schriftarten, die speziell für die Technologie variabler Schriftarten entwickelt wurden und jeweils eine Vielzahl von Achsen haben.

Ästhetischer Ausdruck und Achsen

Designer sind nicht mehr auf ältere, fest definierte Stile wie „Normal“, „Fett“ oder „Kursiv“ beschränkt. Die Variablen in variablen Schriftarten werden durch Achsen oder Instanzen gesteuert. Wenn der Schriftgestalter es wünscht, kann jede Variable im Schriftdesign einer vom Nutzer steuerbaren Achse zugewiesen werden. Zu den gängigen Achsen gehören „Kursiv“, „Optische Größe“, „Neigung“, „Stärke“ und „Breite“. Diese fünf sind die in CSS registrierten Achsen.

Vorteile

Mit variablen Schriftarten können Sie mehrere Stile in einer einzigen Schriftartdatei bereitstellen. So werden Websites nachhaltiger, kleiner und schneller. Außerdem haben Designer mehr Kontrolle über den Ausdruck.

4. Variable Schriftarten im Design verwenden

Achsen ändern

Wir gehen alle verfügbaren Parameter (oder Achsen) und ihre Auswirkungen durch. Wählen Sie rechts die Schriftart aus und öffnen Sie das Modal „Schriftdetails“ (Dreipunkt-Menü), um die Schieberegler für die Achsen zu öffnen. Gehen Sie dann jeden Parameter durch.

Mit Stärke wird die Dicke eines Buchstabens definiert. Es gibt einen vollständigen, kontinuierlichen Bereich von Strichstärken.

Breite ist das Ergebnis des horizontalen Platzes, der von den Zeichen einer Schriftart eingenommen wird.

Passen Sie den Stil von aufrecht zu geneigt an. Typografen bezeichnen das auch als „oblique“. In seltenen Fällen kann Neigung auch in die andere Richtung wirken. Das wird als „backslanted“ oder „reverse oblique“ bezeichnet.

Grad ist ein sekundärer Modifikator der optischen Stärke einer Schriftart und unabhängig von der Achse „Stärke“. Sowohl „Stärke“ als auch „Grad“ wirken sich auf die Dicke eines Buchstabens aus, aber Anpassungen mit „Grad“ sind viel feiner.

Optische Größe. Passen Sie den Stil an bestimmte Textgrößen an, die in Punkten angegeben werden. Bei kleineren Größen werden Buchstaben in der Regel für eine bessere Lesbarkeit optimiert. Sie haben einen größeren Abstand und dickere Striche mit weniger Details. Bei größeren Größen werden Buchstaben in der Regel für Überschriften mit dünneren Strichen und detaillierteren Formen sowie extremeren Stärken und Breiten optimiert.

In der Demo zu variablen Schriftarten können Sie mit den Achsen variabler Schriftarten außerhalb von Figma experimentieren.

5. Stil verbessern

Wenn Sie mit einem Markenstil-Leitfaden arbeiten, haben Sie möglicherweise eine festgelegte Typografie-Skala, die typografische Einschränkungen vorgibt. Die Verwendung variabler Schriftarten bedeutet nicht, dass Sie diese Konsistenz aufgeben müssen. Sie bietet weitere Möglichkeiten zur Optimierung innerhalb Ihrer Typografie-Skala (z. B. zum Erhöhen der Stärke bei dunklen Hintergründen) in einer einzigen Datei.

Eine Typografie-Skala kann aus mehr als einer Schriftfamilie bestehen. Hier verwenden wir jedoch nur eine, um eine komprimierte Version der Material-Standard-Typografie-Skala anzupassen.

Wir beginnen mit der Anpassung der Typografie-Skala mit dem Fließtext. So können wir zuerst die grundlegende Schriftgröße der Website festlegen und sie dann optisch anpassen. Der Standardwert für Body Large ist 18 pt, ausgewählt und auf Roboto Flex festgelegt. Um die Lesbarkeit zu verbessern, mussten bisher Schriftgröße und -stärke aktualisiert werden. Das bedeutete eine weitere Schriftartdatei. Jetzt können wir jedoch einige der Achsen optimieren. Passen Sie die optische Größe, den Grad und die Stärke an.
Fahren Sie mit Label fort. Labels sind funktionaler und werden in kürzeren, kleineren Kontexten wie Schaltflächen verwendet. Passen Sie den Grad optisch an, damit das Label in Schaltflächencontainern und Chips richtig angezeigt wird.
Optimieren Sie weiter mit Title, Headline und Display. Alle drei werden für kürzere Texte mit mittlerer bis hoher Hervorhebung verwendet, z. B. für Seitentitel und Abschnitte. Headline und Display können aufgrund ihrer Größe und hohen Hervorhebung ausdrucksstärker sein. Hier können Sie mit allen Achsen experimentieren.
Wählen Sie Text aus, klicken Sie auf die vier Punkte und fügen Sie ein Pluszeichen (+) hinzu, um einen Textstil festzulegen. So sorgen Sie für einheitliche, wiederverwendbare Schrifteinstellungen.

Sie können die Standard-Typografie-Skala von Material mit dem Material Theme Builder als Figma-Stile generieren oder das M3-Designkit duplizieren.

6. Auf Benutzeroberfläche anwenden

Nachdem Sie eine Typografie-Skala eingerichtet haben, wenden wir sie auf Benutzeroberflächenelemente an, um sie im Code zu implementieren. Überlegen Sie, wie Sie mit variablen Schriftarten mehr Ausdruckskraft und Lesbarkeit erzielen können. Wenn Sie in der letzten Übung Figma-Stile eingerichtet haben, können Sie diese anwenden und dann die Achsen des Stils aktualisieren.

Sehen Sie sich die Benutzeroberflächenelemente links an. Die erste Karte enthält einen Pflanzentyp, eine Beschreibung und einige Kategorietags. Auf den anderen Karten werden Anleitungen zur Pflanzenpflege beschrieben. Der Pflanzentyp ist eine wichtige Rolle, daher verwenden wir den Stil „headline“. Legen Sie ihn auf das fest, was wir zuvor als Überschrift eingerichtet haben. Die Pflegekarten haben auch einen Titel, aber nicht die gleiche Hervorhebung. Legen Sie sie daher als „title“ fest.
Die Details zur Pflanze und die Anleitung können „body large“ zugewiesen werden, die Kategorielabels „label large“.
Experimentieren Sie mit verschiedenen Rollen und passen Sie die Benutzeroberflächenelemente und Ihre Typografie-Skala an, um die richtige Balance zu finden.

7. Im Code implementieren

Die Implementierung variabler Schriftarten im Code mit CSS ähnelt der Verwendung einer beliebigen Webschriftart, bei der ein Schriftartbereitstellungsdienst verwendet wird, um die Schriftart zu laden und mit CSS-Eigenschaften anzupassen.

Wir verwenden für die Implementierung einfaches HTML und CSS und nicht MWC oder ein Framework.

Variable Schriftarten in Google Fonts

Verwenden Sie Google Fonts als Schriftartbereitstellungsdienst, um auf Ihrer Website auf einfache Weise eine Vielzahl von Schriftarten, einschließlich variabler Schriftarten, zu implementieren.

Unter fonts.google.com können Sie sich ansehen, welche variablen Schriftarten verfügbar sind. Aktivieren Sie unter „Suchen“ das Kästchen Nur variable Schriftarten anzeigen , um zu filtern. Variable Schriftarten enthalten unten auf der Seite einen Playground, in dem Sie Schieberegler für jede der in der Familie verfügbaren Achsen festlegen können.

Mit CSS gestalten

Nicht alle Schriftarten haben die gleiche Anzahl von Achsen, die angepasst werden können. Derzeit sind „Stärke“, „Breite“, „Neigung“, „Kursiv“ und „Optische Größe“ die häufigsten.

Diese können mit grundlegenden CSS-Schriftarteigenschaften festgelegt werden, die es schon vor variablen Schriftarten gab. Obwohl noch nicht alles weitgehend unterstützt wird (Stand: Mai 2022), können alle Achsen zuverlässig mit der neuen Eigenschaft font-variation-settings festgelegt werden.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

* „Neigung“ (`slnt`) und „Kursiv“ (`ital`) in „font-style“ sind nicht zuverlässig.

8. Mit der Google Fonts API importieren

Wir haben bisher nur Roboto verwendet. Unter fonts.google.com sehen Sie alle Schriftarten, die uns jetzt zur Verfügung stehen.

Wir bleiben für den Rest des Codelabs bei Roboto und passen die Schriftart in den folgenden Karten basierend auf unserer vorherigen Übung an.

Kopieren Sie diesen Code mit der Beispiel-UI für die Karte in Ihre Web-IDE.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

Notieren Sie sich die Stilspezifikationen, die wir in der letzten Übung für headline, title, body und label festgelegt haben. Rufen Sie dann die Seite für Roboto Flex auf. Legen Sie die Schieberegler so fest, dass sie den Spezifikationen entsprechen, die Sie in Figma festgelegt haben, und wählen Sie dann für jede Option Diesen Stil auswählen aus, um sie der Seitenleiste hinzuzufügen.
Suchen Sie in der Seitenleiste unter den ausgewählten Stilen nach „Im Web verwenden“. Es gibt zwei Möglichkeiten, die Schriftart zu Ihrem Code hinzuzufügen: mit <link> oder @import. Sie benötigen nur eine. Wählen Sie @import aus.
Kopieren Sie den Code von @import bis zum Semikolon und fügen Sie ihn nach dem Importkommentar in die Stiltags ein.
Da nur Roboto Flex verwendet wird, legen Sie den Textkörper so fest, dass die Schriftfamilie aufgerufen wird. Fügen Sie dazu die CSS-Regeln zum Angeben von Familien hinzu, die unter dem Importcode enthalten sind.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Dadurch werden die ausgewählte Schriftart und die festgelegten Stile importiert. Mit Achsenbereichen können Sie jedoch den kontinuierlichen Bereich von Stilen anstelle der einzelnen Stile verwenden. Um einen Bereich zu erstellen, verbinden Sie zwei Werte mit „..“ (z. B. 100..900). Fügen Sie nur Bereiche hinzu, die in den Schiebereglern der Schriftart vorhanden sind. Andernfalls wird sie nicht richtig geladen.

Das ist am besten für reibungslose Animationsübergänge und Experimente im Browser geeignet, da der gesamte Bereich geladen wird und die Downloadanfrage größer ist.

9. CSS-Eigenschaften für variable Schriftarten

Nachdem Sie Ihre Schriftart importiert haben, kehren wir zu Figma zurück, um einige CSS-Eigenschaften für das Design abzurufen, und sehen uns die CSS-Eigenschaft font-variation-settings an.

Wählen Sie im rechten Bereich zuerst die h1-Überschriften aus und dann oben den Tab Prüfen. Dadurch wird der Bereich in einen Codeprüfmodus für die Übergabe an Entwickler umgeschaltet. „Code“ ist der letzte Abschnitt.
Ändern Sie das Format im Drop-down-Menü in CSS, falls noch nicht geschehen. Die Standardattribute werden aufgeführt, falls sie verwendet werden (font-weight, font-stretch, font-style, font-optical-sizing), gefolgt von den Low-Level-Einstellungen für font-variation-settings, die nicht registrierte benutzerdefinierte Achsen enthalten. Verwenden Sie zuerst Standardattribute, bevor Sie zu font-variation-settings wechseln.

In Figma wird „font-variation-settings“ für die Breite (`wdth`) anstelle von „font-stretch“ verwendet.

Kopieren Sie diesen CSS-Code für die Schriftart, um unseren `h1`-Selektor zu gestalten.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

Der Stil des Titels der Pflegekarte kann in h2 kopiert werden. Wiederholen Sie diesen Schritt für den Fließtext und kopieren Sie ihn in p. Labelstile können in .label kopiert werden.

10. Glückwunsch

Sie haben variable Schriftarten verwendet, gelernt, wie Sie sie in Ihren Designs einsetzen, und sie für das Web implementiert.

Wenn Sie Fragen haben, können Sie uns jederzeit über Twitter unter @MaterialDesign kontaktieren.

Weitere Designinhalte und Tutorials finden Sie unter youtube.com/MaterialDesign.