Zu Variablenschriftarten migrieren

1. Einführung

Zuletzt aktualisiert:11.05.2022

Mit variablen Schriftarten können Sie dynamische Variabilität in Ihrer Benutzeroberfläche erzielen. So lassen sich Layouts, Themen und Barrierefreiheit besser anpassen und Ihre Apps werden gleichzeitig schneller.

Lerninhalte

• Was sind variable Schriftarten?
• Wie Sie damit Text anpassen können.
• Variable Schriftarten auf Ihre Designs anwenden
• Informationen zum Implementieren variabler Schriftarten mit der Google Fonts API und in CSS

Vorbereitung

In diesem Lab bauen wir auf einigen grundlegenden Designkonzepten auf.

• Kenntnisse über Schriftschnitte
• Kenntnisse in Figma
• Grundkenntnisse in HTML und CSS

Voraussetzungen

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

2. Jetzt starten

Einrichtung

Zuerst müssen Sie auf die Figma-Datei von Designlab zugreifen. Alles, was Sie für das Lab benötigen, befindet sich in der Figma-Datei. Sie können die Datei entweder herunterladen und importieren oder sie in 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 (Zur Migration zu variablen Schriftarten) auf oder suchen Sie in der Figma-Community nach „Migrating to Variable Fonts“ (Zur Migration zu variablen Schriftarten). 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 Artboards unterteilt, die miteinander verknüpft sind. Auf diese folgen einige Kernkonzepte für den Abschnitt und dann Übungen. Die Abschnitte und Übungen bauen aufeinander auf und sollten nacheinander abgeschlossen 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.

Beginnend mit dem Artboard Intro gibt es Schaltflächen, mit denen die Artboards der Reihe nach miteinander verknüpft werden. Klicken Sie auf die Schaltfläche, um den Link aufzurufen.

Nach variabler Schriftart suchen

Bevor wir beginnen, müssen wir dafür sorgen, dass wir eine variable Schriftart haben. In dieser Datei wird Roboto Flex verwendet, die bereits in Figma verfügbar ist. Sie können sie auch unter fonts.google.com herunterladen.

3. Was sind variable Schriftarten?

Variable Schriftarten sind ein neues innovatives Schriftformat, mit dem Nutzer die Kontrolle über Schriftart und Symbole erhalten. Roboto Serif und Roboto Flex sind neue Schriftarten, die speziell für die variable Schrifttechnologie entwickelt wurden. Beide haben eine breite Palette von Achsen.

Ästhetischer Ausdruck und Achsen

Designer sind nicht mehr auf ältere, fest vorgegebene Stile wie „normal“, „fett“ oder „kursiv“ beschränkt. Die Variablen in variablen Schriftarten werden durch Achsen oder Instanzen gesteuert. Der Schriftdesigner kann einer benutzersteuerbaren Achse eine beliebige Variable im Schriftdesign zuweisen. Gängige Achsen sind „kursiv“, „optische Größe“, „Schrägstellung“, „Schriftschnitt“ und „Breite“. Dies sind die fünf registrierten Achsen in CSS.

Vorteile

Mit variablen Schriftarten können Sie mehrere Stile in einer einzigen Schriftdatei bereitstellen. Dadurch werden Websites nachhaltiger, kleiner und schneller und Designer erhalten mehr Ausdrucksmöglichkeiten.

4. Variable Schriftarten im Design verwenden

Achsen ändern

Sehen wir uns die verfügbaren Parameter (oder Achsen) und ihre Auswirkungen an. Wählen Sie den Typ rechts aus und öffnen Sie das Modalfenster „Typdetails“ (Dreipunkt-Menü), um die Achsen-Schieberegler zu öffnen und die einzelnen Parameter zu prüfen.

1. Mit dem Schriftschnitt wird die Stärke eines Buchstabens definiert. Sie bietet eine vollständige, kontinuierliche Auswahl an Strichstärken.

2. Die Breite ergibt sich aus dem horizontalen Raum, den die Zeichen einer Schriftart einnehmen.

3. Sie können den Stil von aufrecht zu schräg ändern, was von Typografen auch als „Schrägdruck“ bezeichnet wird. In seltenen Fällen kann Schräg auch in die andere Richtung verwendet werden. Dieser Stil wird als „Schrägstrich“ oder „umgekehrter Schrägstrich“ bezeichnet.

4. Der Grad ist eine sekundäre Modifizierung des optischen Gewichts einer Schriftart und unabhängig von der Gewichtsachse. Sowohl das Gewicht als auch der Schriftschnitt beeinflussen die Dicke eines Buchstabens, aber Anpassungen mit dem Schriftschnitt sind viel detaillierter.

5. Optische Größe Sie können den Stil an bestimmte Textgrößen anpassen, die in Punkten angegeben werden. Bei kleineren Schriftgrößen werden Buchstaben in der Regel für eine bessere Lesbarkeit optimiert, mit lockerem Abstand/Kerning und dickeren Strichen mit weniger Details. Bei größeren Schriftgrößen sind Buchstaben in der Regel für Überschriften mit dünneren Strichen und detaillierteren Formen sowie extremeren Stärken und Breiten optimiert.

In der Demo für variable Schriftarten können Sie sich mit den Achsen für variable Schriftarten außerhalb von Figma vertraut machen.

5. Mehr Stil

Wenn Sie mit einem Markenstilguide arbeiten, haben Sie möglicherweise eine festgelegte Schriftgrößenskala, die typografische Einschränkungen vorgibt. Die Verwendung variabler Schriftarten bedeutet nicht, dass Sie diese Konsistenz aufgeben müssen. Sie bietet eine weitere Flexibilität bei der Schriftgrößenskala (für Anwendungsfälle wie die Erhöhung des Gewichts bei einer Schriftart auf dunklen Hintergründen) innerhalb einer einzigen Datei.

Eine Schriftgradskala kann aus mehreren Schriftfamilien bestehen. Hier verwenden wir nur eine, um eine komprimierte Version der Standardschriftgradskala von Material Design anzupassen.

1. Beginnen wir mit der Anpassung der Schriftgröße für den Fließtext. So können wir zuerst die Grundschriftgröße der Website festlegen und sie dann optisch anpassen. Die Standardeinstellung für Body Large ist 18 pt, ausgewählt und auf Roboto Flex festgelegt. Früher musste die Schriftgröße und -stärke angepasst werden, was eine weitere Schriftdatei erforderte. Jetzt können wir einige Achsen optimieren. Passen Sie die optische Größe, den Grad und das Gewicht an.
2. Fahren Sie mit Label fort. Labels sind praktischer und werden in kürzeren, kleineren Kontexten wie Schaltflächen verwendet. Passen Sie die Stärke optisch an, damit das Label auf Schaltflächencontainern und Chips richtig angezeigt wird.
3. Optimieren Sie die Anzeige mit den Optionen Titel, Anzeigentitel und Anzeigenanzeige. Alle drei werden für kürzere Texte mit mittlerer bis hoher Betonung verwendet, z. B. Seitentitel und Abschnitte. Headline und Display können aufgrund ihrer Größe und Betonung ausdrucksstärker sein. Hier kannst du alle Achsen ausprobieren.
4. Wenn Sie den Typ ausgewählt haben, klicken Sie auf die vier Punkte und fügen Sie ein Pluszeichen (+) hinzu, um einen Textstil festzulegen. So erhalten Sie einheitliche, wiederverwendbare Schrifteinstellungen.

Sie können die Standardskala für Materialtypen mit dem Material Theme Builder oder durch Duplizieren des M3-Designkits als Figma-Stile generieren.

6. Auf die Benutzeroberfläche angewendet

Nachdem wir eine Schriftgradskala eingerichtet haben, wenden wir sie auf UI-Elemente an, die wir im Code 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.

1. Sehen Sie sich die UI-Elemente auf der linken Seite an. Die erste Karte enthält einen Pflanzentyp, eine Beschreibung und einige Kategorie-Tags. Auf den restlichen Karten werden Pflegeanleitungen für die Pflanzen beschrieben. Der Pflanzentyp eignet sich für eine Rolle mit hoher Betonung. Verwenden Sie daher den Stil „Überschrift“. Legen Sie den Wert auf den zuvor als Überschrift festgelegten Wert fest. Die Infokarten haben auch einen Titel, sind aber nicht so wichtig. Legen Sie sie daher als „Titel“ fest.
2. Die Details zur Pflanze und die Anleitung können „body large“ zugewiesen werden, die Kategorielabels hingegen „label large“.
3. Experimentieren Sie mit verschiedenen Rollen und passen Sie die UI-Elemente und die Schriftgröße an, um das richtige Gleichgewicht zu finden.

7. Im Code implementieren

Die Implementierung variabler Schriftarten in Code mit CSS ähnelt der Methode für jede Webschriftart, bei der ein Schriftdienst zum Laden der Schriftart und zum Anpassen mit CSS-Eigenschaften verwendet wird.

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

Variable Schriftarten bei Google Fonts

Wenn Sie Google Fonts als Dienst zur Bereitstellung von Schriftarten verwenden, können Sie ganz einfach eine Vielzahl von Schriftarten, einschließlich variabler Schriftarten, auf Ihrer Website implementieren.

Welche variablen Schriftarten verfügbar sind, sehen Sie unter fonts.google.com. Klicken Sie unter „Suchen“ auf Nur variable Schriftarten anzeigen, um die Ergebnisse 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.

Stil mit CSS

Nicht für alle Schriftarten sind dieselben Achsen zur Anpassung verfügbar. Derzeit sind „Schriftschnitt“, „Breite“, „Schrägstellung“, „Kursiv“ und „Optische Größe“ am häufigsten.

Diese können mit den grundlegenden CSS-Schrifteigenschaften festgelegt werden, die es schon vor variablen Schriftarten gab. Die neue Property font-variation-settings kann zwar noch nicht für alle Achsen verwendet werden, ist aber (Stand Mai 2022) weitgehend unterstützt.

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

*Die Schriftschnitte „Slant“ (slnt) und „Italic“ (ital) sind nicht zuverlässig.

8. Mit der Google Fonts API importieren

Bisher haben wir nur Roboto verwendet, aber sehen Sie sich alle Schriftarten an, die uns jetzt auf fonts.google.com zur Verfügung stehen.

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

1. Kopieren Sie diesen Code mit der Beispiel-UI für die Karte in Ihre bevorzugte 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>

2. Notieren Sie sich die Stilspezifikationen, die wir in der letzten Übung für headline, title, body und label festgelegt haben. Rufen Sie die Seite für Roboto Flex auf. Stellen Sie die Schieberegler so ein, dass sie den in Figma festgelegten Spezifikationen entsprechen, und wählen Sie dann für jeden Diesen Stil aus, um ihn dem seitlichen Bereich hinzuzufügen.
3. Suchen Sie in der Seitenleiste unter den ausgewählten Stilen nach „Im Web verwenden“. Es gibt zwei Möglichkeiten, den Schriftschnitt in den Code einzufügen: über <link> oder @import. Sie benötigen nur eine. Wählen Sie @import aus.
4. Kopieren Sie den Text von @import bis zum Semikolon und fügen Sie ihn nach dem Importkommentar in die Style-Tags ein.
5. Da Roboto Flex die einzige verwendete Schriftart ist, legen Sie im Body fest, dass die Schriftfamilie aufgerufen werden soll. Fügen Sie dazu die „CSS-Regeln zum Angeben von Familien“ hinzu, die im 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 ausgewählten Stile importiert. Mithilfe von Achsenbereichen können Sie jedoch den kontinuierlichen Stilbereich anstelle der einzelnen Stile verwenden. Wenn Sie einen Bereich erstellen möchten, 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 die Schriftart nicht richtig geladen.

Diese Option eignet sich am besten für flüssige Animationsübergänge und Experimente im Browser, da der gesamte Bereich geladen wird und die Downloadanfrage größer wird.

9. CSS-Eigenschaften für variable Schriftarten

Nachdem Sie die Schriftart importiert haben, kehren Sie zu Figma zurück, um einige CSS-Eigenschaften für den Stil zu verwenden. Sehen Sie sich dazu die CSS-Eigenschaft font-variation-settings an.

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

In Figma werden die Schriftvarianteneinstellungen für die Breite (wdth) anstelle von „font-stretch“ verwendet.

3. Kopieren Sie diesen CSS-Code für den Schrifttyp, um den H1-Selektor zu stylen.

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

4. Der Stil des Titels der Infokarte kann in h2 kopiert werden. Wiederholen Sie diesen Schritt für den Haupttext und fügen Sie ihn in p ein. Labelstilen können in .label kopiert werden

10. Glückwunsch

Sie haben sich mit variablen Schriftarten vertraut gemacht, gelernt, wie Sie sie in Ihren Designs verwenden und für das Web implementieren.

Nächste Schritte

• Weitere Informationen finden Sie in den Richtlinien für den Material 3-Typ.
• Weitere Informationen zu Roboto Flex
• Wenden Sie es auf Ihre eigenen Designs an.

Wenn Sie Fragen haben, können Sie sich jederzeit unter @MaterialDesign auf Twitter an uns wenden.

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