# Variable Fonts mit Breitenachse > Variable Familien, bei denen sich neben der Strichstärke auch die Buchstabenbreite einstellen lässt, von leichtem Verschmälern zum Einpassen von Text bis zu einem vollen Bereich von schmal bis breit. Ein Variable Font speichert einen Entwurf als Bereich statt als Satz fester Schnitte. Die meisten variablen Familien haben eine Stärkenachse; einige wenige fügen eine Breitenachse hinzu, registriert unter dem Tag wdth, die die Buchstaben schmaler oder breiter macht und dabei Höhe und Charakter bewahrt. Ihre Werte sind Prozentsätze der Normalbreite: 75 ist ein schmaler Schnitt, 100 der normale und 125 ein breiter. Für die Arbeit am Layout ist die Breite oft die praktischere der beiden Achsen. Mit ihr lässt sich eine Headline genau auf ihre Spalte einpassen, ein Navigationspunkt auf einem kleinen Bildschirm zusammenstauchen und auf einem großen entspannen oder eine Tabelle erst dann auf eine schmalere Einstellung umschalten, wenn ihre Spalten keinen Platz mehr haben. In CSS heißt die Eigenschaft font-stretch, für feinere Kontrolle font-variation-settings, und sie kann an Breakpoints wechseln oder animiert werden. Vergleiche die Bereiche, bevor du dich entscheidest. Mehrere Familien hier werden nur schmaler, von 100 bis etwa 75, was zum Einpassen von Text genügt; zwei werden nur breiter; andere reichen von der halben Normalbreite bis zur doppelten und sind praktisch mehrere Schriften in einer. Die Hinweise unten geben jeden Bereich so an, wie er im Eintrag steht. Eine gut gezeichnete Breitenachse passt die Buchstabenformen selbst an, anders als künstlich gestauchter Text. How these were chosen: Variable Familien, deren Einträge neben der Strichstärke eine Breitenachse (wdth) verzeichnen; die Achsenbereiche sind den Einträgen entnommen. ## Fonts (17) - [Roboto](https://trendhub.net/de/fonts/roboto.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Eine Breitenachse von 75 bis 100 verschmälert den Entwurf zu einem schmalen Schnitt, neben einer Strichstärke von 100 bis 900 mit Kursiven. - [Open Sans](https://trendhub.net/de/fonts/open-sans.markdown) (Sans Serif, 12 Schnitte · variabel, OFL): Die Breite wird von 100 auf 75 schmaler, zum Einpassen von Text, in einer humanistischen serifenlosen Schrift mit sechs Strichstärken und Kursiven. - [Archivo](https://trendhub.net/de/fonts/archivo.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Breite von 62 bis 125, von extra schmal bis breit, neben einer Strichstärke von Thin bis Black mit Kursiven. - [Saira](https://trendhub.net/de/fonts/saira.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Breite von 50 bis 125 und Strichstärke von 100 bis 900 in einer eckigen serifenlosen Schrift, dazu Kursive. - [IBM Plex Sans](https://trendhub.net/de/fonts/ibm-plex-sans.markdown) (Sans Serif, 14 Schnitte · variabel, OFL): Eine Breitenachse, die die Buchstaben auf 75 verschmälert, mit sieben Strichstärken und Kursiven. - [Inconsolata](https://trendhub.net/de/fonts/inconsolata.markdown) (Monospace, 8 Schnitte · variabel, OFL): Eine Monospace-Schrift, deren Breitenachse von 50 bis 200 reicht, von der halben Normalbreite bis zur doppelten, neben einer Strichstärke von 200 bis 900. - [Noto Serif](https://trendhub.net/de/fonts/noto-serif.markdown) (Serif, 18 Schnitte · variabel, OFL): Eine Textserif, deren Breitenachse von 100 auf 62,5 schmaler wird, mit neun Strichstärken und Kursiven. - [Merriweather](https://trendhub.net/de/fonts/merriweather.markdown) (Serif, 14 Schnitte · variabel, OFL): Eine Textserif mit mäßigem Breitenbereich von 87 bis 112, neben Achsen für Strichstärke und optische Größe. - [Asap](https://trendhub.net/de/fonts/asap.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Strichstärke von 100 bis 900 und Breite von 75 bis 125, mit Kursiven. - [Georama](https://trendhub.net/de/fonts/georama.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Eine Breitenachse von 62,5 bis 150, von schmal bis weit, und neun Schnitte mit Kursiv. - [Zalando Sans](https://trendhub.net/de/fonts/zalando-sans.markdown) (Sans Serif, 16 Schnitte · variabel, OFL): Breite von 75 bis 125 und Strichstärke von 200 bis 900 in einer schlichten Grotesk, dazu Kursiv. - [Science Gothic](https://trendhub.net/de/fonts/science-gothic.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Vier Achsen: Strichstärke 100–900, Breite 50–200, Neigung und Kontrast. - [Advent Pro](https://trendhub.net/de/fonts/advent-pro.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Die Breite wird hier nur größer, von 100 bis 200, neben einer Strichstärke von 100 bis 900. - [Mozilla Headline](https://trendhub.net/de/fonts/mozilla-headline.markdown) (Sans Serif, 6 Schnitte · variabel, OFL): Strichstärke von 200 bis 700 und Breite von 75 bis 125 in einer Überschriften-Sans. - [Anek Latin](https://trendhub.net/de/fonts/anek-latin.markdown) (Sans Serif, 8 Schnitte · variabel, OFL): Breite von 75 bis 125 über acht aufrechte Schnitte von Thin bis ExtraBold. - [Pliant](https://trendhub.net/de/fonts/pliant.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Die Breite wird nur größer, von 100 bis 125, mit neun Schnitten, Kursiv, Kyrillisch und Griechisch. - [Ubuntu Sans](https://trendhub.net/de/fonts/ubuntu-sans.markdown) (Sans Serif, 16 Schnitte · variabel, UFL): Eine Breitenachse, die von 100 auf 75 schmaler wird, in einer Sans für Menüs, Schaltflächen und Dialoge, mit acht Schnitten und Kursiv. ## FAQs ### Wie stelle ich die Schriftbreite in CSS ein? Verwende font-stretch mit einem Prozentwert, zum Beispiel font-stretch: 85 %, oder font-variation-settings: "wdth" 85. Der Wert muss im Bereich liegen, den der Font unterstützt; Werte außerhalb werden auf das nächstgelegene Ende begrenzt. ### Ist eine Breitenachse dasselbe wie horizontales Skalieren von Text? Nein. Skalieren verzerrt Strichdicke und Rundungen. Eine Breitenachse nutzt Formen, die für jede Breite gezeichnet wurden, sodass senkrechte und waagerechte Striche im Verhältnis bleiben. ### Funktionieren Variable Fonts in allen Browsern und Apps? Aktuelle Browser und die wichtigen Designprogramme unterstützen sie. Ältere Software zeigt womöglich nur den Standardschnitt, deshalb behältst du statische Dateien als Rückfall, wo das eine Rolle spielt. ### Kann ich diese Variable Fonts kommerziell nutzen? Ja. Alle bis auf einen stehen unter der SIL Open Font License, die kommerzielle Nutzung, Einbetten und Selbst-Hosting erlaubt; Ubuntu Sans nutzt die Ubuntu Font License, die die kommerzielle Nutzung ebenfalls erlaubt. Die Seite jedes Fonts nennt seine Lizenz. ## Related collections - [Variable Fonts mit Achse für die optische Größe](https://trendhub.net/de/fonts/for/variable-fonts-with-optical-size.markdown) - [Variable Fonts mit ungewöhnlichen Achsen](https://trendhub.net/de/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Schmale Sans-Serif-Fonts für Tabellen und enge Layouts](https://trendhub.net/de/fonts/for/narrow-fonts-for-tight-layouts.markdown) - [Schmale Fonts für Headlines](https://trendhub.net/de/fonts/for/condensed-headline-fonts.markdown) - [Breite und gedehnte Fonts für Überschriften und Logos](https://trendhub.net/de/fonts/for/wide-and-extended-fonts.markdown) - [Schriftfamilien mit neun Strichstärken und Kursiven](https://trendhub.net/de/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/de/fonts/for/variable-fonts-with-a-width-axis (trendhub)