Optische Größen: Warum kleiner Text andere Formen braucht
Eine optische Größe ist eine Version einer Schriftart, die für die Größe gezeichnet ist, in der sie tatsächlich verwendet wird: Versionen für kleine Größen bekommen kräftigere Striche, eine höhere x-Höhe, offenere Öffnungen, weitere Abstände und vereinfachte Details, während Versionen für große Größen feineren Kontrast und einen engeren Satz bekommen. Eine einzige Kontur, über alle Größen gestreckt — jahrzehntelang der digitale Standard — ist an beiden Enden ein Kompromiss: bei kleinen Größen etwas zu zart, bei Display-Größen etwas zu grob.
Für den größten Teil der Geschichte der Schrift war diese Anpassung kein
Feature; sie war Physik. Dieser Artikel ist Teil unseres
Typografie-Leitfadens; er behandelt, woher optische Größen
kommen, was die moderne opsz-Achse wiederherstellt und was zu tun ist, wenn
deine Schrift keine hat — was immer noch der Regelfall ist.
Warum schnitt Bleisatz für jede Größe andere Formen?
Eine Bleischrift war keine Datei. Sie bestand aus Setzkästen physischer Lettern, für jede Größe separat geschnitten und gegossen — für den größten Teil dieser Geschichte gab es keine Möglichkeit, eine 12-Punkt-Letter auf eine 6-Punkt-Letter zu skalieren, also wurde jede Größe von Hand gezeichnet. Stempelschneider nutzten diese Notwendigkeit gut: Der 6pt-Schnitt einer Schrift hatte breitere Buchstabenformen, geringeren Strichkontrast, offenere Öffnungen und weitere Abstände als der 72pt-Schnitt des „selben“ Entwurfs, denn Jahrhunderte des Hinschauens hatten sie gelehrt, was kleine Schrift braucht, um Tinte, Papier und Augen zu überstehen.
Als die Digitalschrift eine Familie zu einer einzigen mathematisch skalierbaren Kontur zusammenfallen ließ, gewann sie enorme Bequemlichkeit und verlor still die Anpassung. Die physische Notwendigkeit hatte perzeptive Weisheit kodiert — nimm die Notwendigkeit weg, und die Weisheit ging mit ihr.
Der intuitive Grund, warum die Weisheit zählte: Tinte und Augen skalieren nicht linear. Halbiere die Größe eines Buchstabens, und seine feinen Details werden nicht halb so sichtbar — sie fallen unter das, was das Auge auflöst und was der Bildschirm darstellen kann. Dünne Striche verdampfen, kleine Punzen verstopfen, enger Buchstabensatz wird zum Gedränge — Leserlichkeit, die Buchstabenerkennungs-Hälfte des Lesens, ist das, was zuerst versagt. Kleine Größen brauchen also Robustheit. Bei Display-Größen kehrt sich der Druck um: Jede Kräftigkeit, die den 6pt-Schnitt rettete, wird in aller Deutlichkeit vergrößert, und die Größe belohnt stattdessen Finesse — haardünner Kontrast, enger Satz, scharfes Detail.
Was passt optische Größenanpassung eigentlich an?
Fünf Anpassungen, alle in dieselbe Richtung — nach unten in der Größe, zur Robustheit; nach oben in der Größe, zur Finesse:
| Eigenschaft | Bei kleinen Größen | Bei großen Größen |
|---|---|---|
| Strichkontrast | gesenkt — dünne Striche verdickt, damit sie nicht verschwinden | erhöht — Haarlinien werden zum Vorteil |
| x-Höhe | höher — mehr Buchstabe in derselben nominalen Größe | relativ kleiner — Raum für Eleganz in den Oberlängen |
| Öffnungen | geöffnet — e, c, a bleiben unterscheidbar | dürfen sich schließen — Unterscheidbarkeit ist bei 60px gratis |
| Abstände | gelockert — Gedränge ist es, was kleinen Text tötet | verengt — großer Text zerfällt sonst in einzelne Buchstaben |
| Detail | vereinfacht — feine Serifen und Endstriche vergröbert oder weggelassen | verfeinert — die Größe kann sie endlich zeigen |
Lies die Spalte für kleine Größen von oben nach unten, und sie beschreibt ein robustes, offenes, etwas schmuckloses Arbeitspferd; lies die Spalte für große Größen, und sie beschreibt etwas, das einer Display-Schrift nahekommt. Das ist der Punkt: Es sind verschiedene Werkzeuge, die zufällig einen Namen teilen.
Wie bringt die opsz-Achse optische Größen zurück?
Variable Fonts automatisierten die alte Anpassung erneut. Eine Schrift, die die opsz-Achse mitbringt, enthält das Verhalten für kleine und große Größen als kontinuierlichen Bereich in einer Datei, und CSS wendet es an mit:
html {
font-optical-sizing: auto; /* der Standardwert */
}Weil auto der Anfangswert ist, setzen Browser — die Unterstützung ist über
moderne Engines hinweg breit verfügbar — die Achse aus der Schriftgröße, ohne
gefragt zu werden: Deine 12px-Bildunterschriften bekommen still die kräftigere
Zeichnung, deine 64px-Display-Zeile die feinere.
Der ehrliche Vorbehalt: Nur eine Minderheit der Schriften trägt eine echte
opsz-Achse. Die bekannten Träger sind die großen Variable-Font-Projekte der
Klasse Source Serif und Roboto Flex; für alles andere ändert
font-optical-sizing nichts, weil es keine Achse zum Ansteuern gibt. Die
Eigenschaft ist ein Schalter, kein Synthesizer — sie kann keine Anpassungen
erfinden, die eine Schrift nicht enthält.
Was kannst du ohne opsz-Achse tun?
Zwei Kompensationen, beide älter als die Achse:
- Wähle Schriften, die nahe deinen Arbeitsgrößen entworfen sind. Textschriften — gezeichnet mit den Tugenden der Kleingrößen-Spalte fest eingebaut — für UI und Fließtext; Display-Schriften für Überschriften. Das ist dieselbe Logik, die Display-Schriften überhaupt zu einer eigenen Kategorie macht: Sie sind im Grunde große optische Größen, einzeln verkauft.
- Kompensiere manuell an den Extremen. Bei kleinen Größen holen leicht geöffneter Buchstabenabstand und ein halber Schritt mehr Strichstärke einen Teil dessen zurück, was ein echter Kleinschnitt liefern würde; bei Display-Größen verenge den Abstand. Die Konventionen für Laufweite und Strichstärke Größe für Größe behandelt unser Leitfaden zur Schriftgrößenskala.
Scale Composer hat keine Steuerung für optische Größen — seine Rolle hier ist die des Schriftmusters: setze dieselbe Schrift auf den Kleinst- und Display-Stufen deiner Skala und begutachte das kleine Ende so, wie es ein Stempelschneider täte, in echt gerendertem Text. Die Steuerungen für Strichstärke und Buchstabenabstand pro Stil sind genau die zwei manuellen Hebel aus Kompensation zwei.
Wie sieht der Unterschied auf einer echten Skala aus?
Setze das Wort „Regeneration“ in einer kontraststarken Serifenschrift auf den Kleinst- und Display-Stufen einer 16px-Quart-Skala — 12px und 51px:
Bei 12px kämpft die einzelne Kontur an allen fünf Fronten. Die Haarlinien-Striche rendern bestenfalls einen Pixel breit, und die Buchstaben wirken grau und brüchig; die Punzen von e und a füllen sich halb; die enge Display-Laufweite liest sich als Gedränge; die zarten Serifen verschmieren. Ein echter Kleinschnitt würde die Striche ausgleichen, die Kleinbuchstaben anheben, die Öffnungen öffnen, den Satz auflüften und die Serifen vereinfachen — das Wort sähe unter der Lupe schlichter aus und aus Armlänge weit klarer.
Bei 51px ist dieselbe Kontur brauchbar, aber schlaff. Abstände, die sich bei 12px gedrängt anfühlten, wirken nun locker zwischen großen Buchstaben, und der bescheidene Kontrast, den eine Kompromisskontur zur Sicherheit behält, liest sich flach, wo die Größe Dramatik tragen könnte. Ein Display-Schnitt bewegt jeden der fünf Regler in die andere Richtung.
Eine Kontur, zwei Größen, gegensätzliche Beschwerden — was das ganze Argument für optische Größen in einem einzigen Wort ist.
Prüfe die Extreme deiner eigenen Skala
Der Kompromiss zeigt sich zuerst auf der kleinsten Stufe deiner Skala, also beginne die Prüfung dort: Prüfe, ob deine Fließtextschrift eine opsz-Achse trägt, und wenn nicht, beurteile die kleinste Stufe in echtem Text und wende die manuelle Kompensation an — geöffnete Laufweite, ein halber Schritt mehr Strichstärke — als eigene Einstellungen des Stils statt als Ausnahme pro Verwendung. Um diese Prüfung an echter Schrift durchzuführen, öffne die kleinste und die größte Stufe deiner Skala nebeneinander.