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.
Narrow to wide
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.
-
Roboto
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
Die Breite wird von 100 auf 75 schmaler, zum Einpassen von Text, in einer humanistischen serifenlosen Schrift mit sechs Strichstärken und Kursiven.
-
Archivo
Breite von 62 bis 125, von extra schmal bis breit, neben einer Strichstärke von Thin bis Black mit Kursiven.
-
Saira
Breite von 50 bis 125 und Strichstärke von 100 bis 900 in einer eckigen serifenlosen Schrift, dazu Kursive.
-
IBM Plex Sans
Eine Breitenachse, die die Buchstaben auf 75 verschmälert, mit sieben Strichstärken und Kursiven.
-
Inconsolata
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
Eine Textserif, deren Breitenachse von 100 auf 62,5 schmaler wird, mit neun Strichstärken und Kursiven.
-
Merriweather
Eine Textserif mit mäßigem Breitenbereich von 87 bis 112, neben Achsen für Strichstärke und optische Größe.
-
Asap
Strichstärke von 100 bis 900 und Breite von 75 bis 125, mit Kursiven.
Die Schriftproben laden von jeder Familie ein lateinisches Basis-Subset. Jede Familie hier hat eine offene Lizenz. Auf ihrer Seite stehen die Bedingungen und die Originaldateien.
Fragen zu Variable Fonts mit Breitenachse
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.