Diese Seite wurde von der Cloud Translation API übersetzt.

Zu Variablenschriftarten migrieren

1. Einführung

Zuletzt aktualisiert: 11.05.2022

Profitieren Sie von dynamischer Variabilität in Ihrer Benutzeroberfläche mit variablen Schriftarten. Dadurch werden Layouts, Designs und Barrierefreiheit responsiver und Ihre Apps werden schneller.

Lerninhalte

Was sind variable Schriftarten?
Die Art und Weise, wie Sie Text mit ihnen anpassen können
So wenden Sie variable Schriftarten auf Ihre Designs an.
Hier erfahren Sie, wie Sie variable Schriftarten mit der Google Fonts API und in CSS implementieren.

Vorbereitung

In diesem Lab bauen wir auf einigen grundlegenden Designkonzepten auf.

Schriftliche Kenntnisse sind riesig.
Kenntnisse in Figma.
Grundkenntnisse in HTML und CSS.

Voraussetzungen

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

2. Erste Schritte

Einrichtung

Um loszulegen, müssen Sie auf die Designlab-Datei in Figma 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 aus der Figma-Community duplizieren.

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

Duplikat aus der Figma-Community

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

Beim Durchsehen der Datei stellen Sie fest, dass sie eigenständig ist und mit einer Einführung beginnt. Jeder Abschnitt ist in eine Reihe von Zeichenflächen unterteilt, die miteinander verknüpft sind, mit einigen Kernkonzepten für den Abschnitt, gefolgt von Übungen. Die Abschnitte und Übungen bauen aufeinander auf und sollten der Reihe nach durchgearbeitet werden.

In diesem Codelab werden diese Konzepte und Übungen im Detail beschrieben. Im Codelab erfährst du mehr über die neuen Material You-Funktionen.

Ausgehend von der Zeichenfläche Intro gibt es Schaltflächen, die die Zeichenflächen der Reihe nach miteinander verknüpfen. Klicken Sie auf die Schaltfläche, um auf den Link zuzugreifen.

Auf variable Schriftart prüfen

Bevor wir beginnen, müssen wir sicherstellen, dass wir eine variable Schriftart haben. Für diese Datei wird Roboto Flex verwendet, das bereits in Figma verfügbar ist. Sie können es aber auch von fonts.google.com herunterladen.

3. Was sind variable Schriftarten?

Variable Schriftarten sind ein neues innovatives Schriftformat, mit dem Nutzende mehr Kontrolle über ihren Typ und ihre Symbole haben. Roboto Serif und Roboto Flex sind neue Schriftbilder, die für die variable Schrifttechnologie optimiert wurden, jeweils mit einer großen Auswahl an Achsen.

Ästhetischer Ausdruck und Achsen

Designschaffende sind nicht mehr auf ältere fest eingestellte Stile wie normal, fett, kursiv usw. beschränkt. Die Variablen innerhalb von variablen Schriftarten werden durch Achsen oder Instanzen gesteuert. Wenn die Typdesignschaffenden wählen, kann jede Variable im Schriftdesign einer vom Nutzer steuerbaren Achse zugewiesen werden. Zu den gängigen Achsen gehören Kursivformatierung, optische Größe, Neigung, Gewicht und Breite. Dies sind die registrierten Achsen in CSS.

Vorteile

Mit variablen Schriftarten können Sie mehrere Stile in einer einzigen Schriftartdatei bereitstellen, was Websites nachhaltiger, kleiner und schneller macht und den Designschaffenden mehr ausdrucksstarke Kontrolle gibt.

4. Variable Schriftarten im Design verwenden

Achsen ändern

Sehen wir uns alle verfügbaren Parameter (oder Achsen) und ihre Auswirkungen an. Wählen Sie rechts den Typ aus und öffnen Sie das modale Dialogfeld „Typdetails“ (Symbol „Mehr“), um die Schieberegler für die Achsen zu öffnen, und gehen Sie die einzelnen Parameter durch.

Gewicht definiert die Stärke eines Buchstabens. Sie bietet einen vollständigen, durchgehenden Bereich der Strichstärken.

Die Breite ergibt sich aus, wie viel horizontaler Platz von den Zeichen eines Schriftbilds eingenommen wird.

Passen Sie den Stil von aufrecht in abgeschrägt an (Typografen werden auch als Schrägstrich bezeichnet) . Eine Schrägung ist zwar selten, kann aber auch in die andere Richtung funktionieren. oder „Reverse Schrägstrich“ .

Grad ist ein sekundärer Modifikator der optischen Stärke eines Schriftbilds und unabhängig von der Gewichtungsachse. Sowohl „Gewicht“ als auch „Grad“ wirken sich auf die Dicke eines Buchstabens aus. Anpassungen über „Note“ sind jedoch viel detaillierter.

Optische Größe: Passen Sie den Stil an bestimmte, in Punkten angegebene Textgrößen an. Bei kleineren Buchstaben werden die Buchstaben in der Regel für eine bessere Lesbarkeit optimiert, mit lockerer Abstände/Unterschneidung und dickeren Strichen mit weniger Details. Bei größeren Buchstaben werden Buchstaben in der Regel für Überschriften mit dünneren Strichen und detaillierteren Formen sowie extremeren Stärken und Breiten optimiert.

Sehen Sie sich die Demo „Variable Fonts“ an, um mit variablen Schriftartenachsen außerhalb von Figma zu experimentieren.

5. Den Stil optimieren

Wenn Sie mit einem Marken-Styleguide arbeiten, verfügen Sie möglicherweise über eine etablierte Schriftskala für typografische Einschränkungen. Die Verwendung variablen Schriftarten bedeutet nicht, diese Konsistenz beiseite zu werfen. So können Sie die Schriftgröße noch weiter verfeinern, z. B. für Anwendungsfälle wie das Erhöhen der Schriftgrad auf dunklem Hintergrund, und zwar innerhalb einer einzigen Datei.

Obwohl eine Schriftskala aus mehr als einer Schriftfamilie bestehen kann, verwenden wir hier nur eine, um eine komprimierte Version der Standard-Schriftskala für Material anzupassen.

Beginnen wir mit der Anpassung der Schriftskala mit dem Haupttext. Auf diese Weise können wir zuerst die Basistypgröße der Website festlegen und von dort aus optisch anpassen. Die Standardeinstellung für Body Large ist 18 pt, ausgewählt und auf Roboto Flex festgelegt. Die Anpassung für eine bessere Lesbarkeit bedeutete, die Schriftgröße und -stärke zu aktualisieren, was eine weitere Schriftartdatei bedeutete. Jetzt können wir einige der Achsen feinabstimmen. Passen Sie die optische Größe, das Gefälle und das Gewicht an.
Fahren Sie mit Label fort. Beschriftungen sind praktischer und werden in kürzeren, kleineren Kontexten wie Schaltflächen verwendet. Passen Sie den Farbverlauf optisch an, damit das Label auf Schaltflächenbehältern und Chips korrekt angezeigt wird.
Optimieren Sie die Suche mithilfe von Titel, Anzeigentitel und Display. Alle drei werden für kürzere, mittelgroße bis stark betonte Texte wie Seitentitel und Abschnitte verwendet. Anzeigentitel und Display können aufgrund ihrer Größe und hohen Betonung ausdrucksstarker sein. Hier können Sie mit den Achsen herumspielen!
Klicken Sie bei ausgewähltem Typ auf die 4 Punkte und fügen Sie (+) hinzu, um einen Textstil festzulegen, der einheitliche, wiederverwendbare Typeinstellungen gewährleistet.

Sie können die standardmäßige Materialtypskala als Figma-Stile mit dem Material Theme Builder oder durch Duplizieren des M3-Designkits generieren.

6. Auf UI angewendet

Wenden wir die Schriftgröße auf UI-Elemente an, um sie im Code zu implementieren. Überlegen Sie, wie variable Schriftarten verwendet werden können, um Ausdruckskraft und Lesbarkeit zu verbessern. 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 UI-Elemente auf der linken Seite an. Die erste Karte enthält eine Pflanzenart, eine Beschreibung und einige Kategorie-Tags, während die restlichen Karten Anleitungen zur Pflanzenpflege beschreiben. Die Art der Pflanze ist sinnvoll, da sie eine wichtige Rolle spielt. Verwenden Sie daher unsere „Überschrift“. . Legen Sie die bisherige Einstellung für den Anzeigentitel fest. Die Care-Karten haben auch einen Titel, haben aber nicht die gleiche Hervorhebung. Legen Sie sie daher als „Titel“ fest.
Die Pflanzendetails und die Anweisungskopie können der Bezeichnung „Haupttext groß“ zugewiesen werden, die Kategoriebezeichnungen dagegen „Beschriftung groß“.
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 im Code mit CSS ist eine ähnliche Methode wie jede andere Webschriftart, bei der ein Font Delivery Service zum Laden in der Schriftart und Anpassen mit CSS-Eigenschaften verwendet wird.

Wir verwenden für die Implementierung einfachen HTML- und CSS-Code und kein MWC oder ein Framework.

Variable Schriftarten in Google Fonts

Nutzen Sie Google Fonts als Dienst für die Bereitstellung von Schriftarten, um eine Vielzahl von Schriftarten, einschließlich variabler Schriftarten, auf Ihrer Website ganz einfach zu implementieren.

Unter fonts.google.com sehen Sie, welche variablen Schriftarten verfügbar sind. Klicken Sie unter „Suche“ das Kästchen Nur Variablen für Variablen anzeigen an, nach denen gefiltert werden soll. Zu den variablen Schriftarten gehört ein Spielplatz im unteren Bereich der Seite, auf dem Sie Schieberegler für jede der in der Familie verfügbaren Achsen festlegen können.

Stile mit CSS

Nicht alle Schriftarten bieten die gleiche Anzahl von Achsen, die angepasst werden können. Derzeit werden Gewicht, Breite, Schrägstrich, Kursiv und Optische Größe am häufigsten verwendet.

Diese können mit grundlegenden CSS-Schrifteigenschaften festgelegt werden, die vor variablen Schriftarten vorhanden waren. Obwohl alles noch nicht allgemein 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`

*Die Schriftart "Schrägstrich" und "Kursiv" (Italienisch) sind nicht zuverlässig.

8. Mit Google Fonts API importieren

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

Für den Rest des Codelabs bleiben wir bei Roboto und passen den Typ auf den folgenden Karten basierend auf unserer vorherigen Übung an.

Kopieren Sie diesen Code mit der Kartenbeispiel-UI in die Web-IDE Ihrer Wahl.

<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 in diesem Zusammenhang die Seite für Roboto Flex auf. Passen Sie die Schieberegler an die Spezifikationen an, die Sie in Figma festgelegt haben, und klicken Sie dann für jeden Stil auf Diesen Stil auswählen, um ihn der Seitenleiste hinzuzufügen.
Suchen Sie in der Leiste unter den ausgewählten Stilen nach "Im Web verwenden". Es gibt zwei Möglichkeiten, die Schriftart Ihrem Code hinzuzufügen: über <link> oder @import. Sie benötigen nur eines. Lassen Sie uns hier @import auswählen.
Kopieren Sie den Code aus @import in das Semikolon und fügen Sie ihn nach dem Importkommentar innerhalb der Stil-Tags ein.
Da Roboto Flex die einzige Schriftart ist, legen Sie den Text so fest, dass die Schriftfamilie aufgerufen wird, indem Sie die CSS-Regeln zur Angabe von Familien hinzufügen. der im Importcode enthalten ist.

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

Dadurch werden der ausgewählte Schriftart- und Stilsatz importiert. Wenn Sie jedoch „Achsenbereiche“ verwenden, können Sie den fortlaufenden Bereich von Stilen anstelle der einzelnen Stile verwenden. Um einen Bereich zu erstellen, verbinden Sie zwei Werte mit .. (z. B. 100..900). Stellen Sie sicher, dass Sie nur Bereiche hinzufügen, die in den Schiebereglern der Schriftart vorhanden sind, da die Schriftart sonst nicht richtig geladen wird.

Diese Methode eignet sich am besten für reibungslose Animationsübergänge und für Tests im Browser, da dies im gesamten Bereich geladen wird und die Downloadanfrage größer wird.

9. Eigenschaften der CSS-Variablen

Nachdem Sie die Schriftart importiert haben, kehren Sie zu Figma zurück, um einige CSS-Eigenschaften zum Designen abzurufen, und sehen uns die CSS-Eigenschaft font-variation-settings an.

Beginnend mit den Anzeigentiteln h1 ausgewählt haben, wählen Sie oben den Tab Inspect aus. Dadurch wird das Steuerfeld in einen Codeprüfungsmodus für die Entwicklerübergabe gewechselt. „Code“ ist der letzte Abschnitt.
Falls noch nicht geschehen, ändern Sie das Drop-down-Menü Format zu „CSS“. Sofern verwendet, werden die Standardattribute aufgelistet (font-weight, font-stretch, font-style, font-optical-sizing), gefolgt von der untergeordneten font-variation-settings, die nicht registrierte benutzerdefinierte Achsen enthalten. Verwenden Sie zuerst Standardattribute, bevor Sie sich an font-variation-settings wenden.

Figma verwendet Einstellungen für Schriftvariationen für Breite (Breite) anstelle von Schriftart-Stretch.

Kopieren Sie diesen CSS-Code für den Typ, um den h1-Selektor zu gestalten.

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

Der Stil des Titels der Care-Karte kann in h2 kopiert werden. Wiederholen Sie den Vorgang für den Fließtext, indem Sie ihn in p kopieren. Labelstile können in .label kopiert werden

10. Glückwunsch

Gut gemacht. Sie haben sich mit variabler Schrift vertraut gemacht, gelernt, wie sie in Ihren Designs verwendet werden, und sie für das Web zu implementieren.

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

Weitere Inhalte und Anleitungen zum Thema Design findest du unter youtube.com/MaterialDesign.