# 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. 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. How these were chosen: Variable Familien, deren Einträge eine Achse für die optische Größe (opsz) mit nutzbarem Bereich führen; Bereiche und Begleitachsen sind aus den Einträgen übernommen. ## Fonts (16) - [Inter](https://trendhub.net/de/fonts/inter.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): 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](https://trendhub.net/de/fonts/dm-sans.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Optische Größe von 9 bis 40 bei einer kontrastarmen geometrischen Sans. - [Merriweather](https://trendhub.net/de/fonts/merriweather.markdown) (Serif, 14 Schnitte · variabel, OFL): Eine Textserif, deren optische Größe von 18 bis 144 reicht, mit Achsen für Strichstärke und Breite. - [Bricolage Grotesque](https://trendhub.net/de/fonts/bricolage-grotesque.markdown) (Sans Serif, 7 Schnitte · variabel, OFL): Optische Größe von 12 bis 96, mit am kleinen Ende übertriebenen Tintenfallen, neben Strichstärke und Breite. - [Nunito Sans](https://trendhub.net/de/fonts/nunito-sans.markdown) (Sans Serif, 16 Schnitte · variabel, OFL): Ein Bereich für kleine optische Größen, 6 bis 12, unter vier Achsen mit Strichstärke, Breite und Kleinbuchstabenhöhe. - [Source Serif 4](https://trendhub.net/de/fonts/source-serif-4.markdown) (Serif, 16 Schnitte · variabel, OFL): Optische Größe von 8 bis 60 bei einer Übergangsserif, mit acht Strichstärken und Kursiven. - [Newsreader](https://trendhub.net/de/fonts/newsreader.markdown) (Serif, 14 Schnitte · variabel, OFL): Eine Achse für die optische Größe von 6 bis 72, mit Strichstärken von 200 bis 800. - [Literata](https://trendhub.net/de/fonts/literata.markdown) (Serif, 16 Schnitte · variabel, OFL): A reading serif with optical size from 7 to 72, eight weights and italics. - [Playfair](https://trendhub.net/de/fonts/playfair.markdown) (Serif, 14 Schnitte · variabel, OFL): The widest optical range here, 5 to 1200, in a serif that also varies in weight and width. - [Fraunces](https://trendhub.net/de/fonts/fraunces.markdown) (Serif, 18 Schnitte · variabel, OFL): Optische Größe von 9 bis 144 neben den Achsen Weight, Softness und Wonky. - [Bodoni Moda](https://trendhub.net/de/fonts/bodoni-moda.markdown) (Serif, 12 Schnitte · variabel, OFL): Eine kontrastreiche Serif, deren optische Größe von 6 bis 96 reicht. - [Roboto Serif](https://trendhub.net/de/fonts/roboto-serif.markdown) (Serif, 18 Schnitte · variabel, OFL): Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles. - [Roboto Flex](https://trendhub.net/de/fonts/roboto-flex.markdown) (Sans Serif, 20 Schnitte · variabel, OFL): Optische Größe von 8 bis 144 ist eine von 13 Achsen in einer einzigen Datei. - [Pathway Extreme](https://trendhub.net/de/fonts/pathway-extreme.markdown) (Sans Serif, 18 Schnitte · variabel, OFL): Optical size from 8 to 144 in a grotesque sans, beside weight and width axes. - [TikTok Sans](https://trendhub.net/de/fonts/tiktok-sans.markdown) (Sans Serif, 14 Schnitte · variabel, OFL): Optical size from 12 to 36 with weight, width and slant, four axes in a single file. - [Hedvig Letters Serif](https://trendhub.net/de/fonts/hedvig-letters-serif.markdown) (Serif, 1 Schnitt · variabel, OFL): A single-weight brand serif whose only axis is optical size, from 12 to 24. ## FAQs ### 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. ## Related collections - [Variable Fonts mit Breitenachse](https://trendhub.net/de/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Variable Fonts mit ungewöhnlichen Achsen](https://trendhub.net/de/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Serifenschriften zum langen Lesen am Bildschirm](https://trendhub.net/de/fonts/for/serif-fonts-for-long-reading.markdown) - [Kontrastreiche Didone-Fonts für Mode und redaktionelle Überschriften](https://trendhub.net/de/fonts/for/high-contrast-didone-fonts.markdown) - [Fonts für Zeitungen und Magazine](https://trendhub.net/de/fonts/for/newspaper-and-magazine-fonts.markdown) - [Klare serifenlose Fonts für App-Oberflächen](https://trendhub.net/de/fonts/for/app-interface-fonts.markdown) --- Source: https://trendhub.net/de/fonts/for/variable-fonts-with-optical-size (trendhub)