Variable Fonts mit Achse für die optische Größe
Variable Familien, die sich für die Größe, in der sie gesetzt werden, neu zeichnen: kräftiger und lockerer bei kleinen, feiner und enger bei großen Größen.
Small print, big type
Im Bleisatz wurde jede Größe einzeln geschnitten, und die Stempelschneider passten den Entwurf dabei an. Kleine Größen wurden breiter und kräftiger mit lockerer Laufweite gemacht, damit sie auf der Seite bestehen; große Größen wurden verfeinert, mit dünneren Haarstrichen und engerem Sitz. Bei digitalen Fonts ging das verloren, als eine einzige Kontur auf alle Größen skaliert wurde. Die Achse für die optische Größe, das Tag opsz, bringt es zurück.
Bei einem Font mit dieser Achse entspricht der Wert normalerweise der Größe in Punkt. Bei einem niedrigen Wert haben die Buchstaben eine größere x-Höhe, dickere dünne Striche und mehr Abstand zueinander. Bei einem hohen Wert schärft sich der Kontrast, und die Details werden zart. Praktisch heißt das: Eine Familie kann Text- und Display-Schrift zugleich sein, und eine Bildunterschrift bleibt lesbar, ohne schwer zu wirken.
Browser wenden die Achse automatisch an: font-optical-sizing steht standardmäßig auf auto, sodass sich ein Font mit dieser Achse ohne zusätzlichen Code an die Schriftgröße anpasst. Du kannst sie auch von Hand setzen, um bewusst den Display-Entwurf klein oder den Text-Entwurf groß zu verwenden. Die Bereiche unterscheiden sich stark zwischen den Familien, von einer reinen Textanpassung über wenige Punkte bis zu einer Spanne von mehr als tausend; die Hinweise nennen sie so, wie sie erfasst sind.
-
Inter
Die optische Größe von 14 bis 32 stimmt eine Bildschirm-Sans auf kleine Beschriftungen und größere Überschriften ab, dazu neun Strichstärken mit Kursiven.
-
DM Sans
Optische Größe von 9 bis 40 bei einer kontrastarmen geometrischen Sans.
-
Merriweather
Eine Textserif, deren optische Größe von 18 bis 144 reicht, mit Achsen für Strichstärke und Breite.
-
Bricolage Grotesque
Optische Größe von 12 bis 96, mit am kleinen Ende übertriebenen Tintenfallen, neben Strichstärke und Breite.
-
Nunito Sans
Ein Bereich für kleine optische Größen, 6 bis 12, unter vier Achsen mit Strichstärke, Breite und Kleinbuchstabenhöhe.
-
Source Serif 4
Optische Größe von 8 bis 60 bei einer Übergangsserif, mit acht Strichstärken und Kursiven.
-
Newsreader
Eine Achse für die optische Größe von 6 bis 72, mit Strichstärken von 200 bis 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Optische Größe von 9 bis 144 neben den Achsen Weight, Softness und Wonky.
-
Bodoni Moda
Eine kontrastreiche Serif, deren optische Größe von 6 bis 96 reicht.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
Optische Größe von 8 bis 144 ist eine von 13 Achsen in einer einzigen Datei.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
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 Achse für die optische Größe
Was ändert die optische Größe an einem Font?
Strichkontrast, Laufweite, x-Höhe und feine Details. Kleine optische Größen sind kräftiger und offener, große schärfer und enger gesetzt.
Muss ich CSS schreiben, um die optische Größe zu nutzen?
Meist nicht. Browser passen die Achse automatisch an die Schriftgröße an. Um das zu überschreiben, setze font-variation-settings: "opsz" gefolgt von einem Wert innerhalb des Bereichs des Fonts.
Was ist besser, eine Achse für die optische Größe oder getrennte Text- und Display-Fonts?
Sie leisten dasselbe. Die Achse ist bequemer, deckt auch die Größen dazwischen ab und braucht nur eine Datei.