Variable Schriftarten, Teil 2: Optische Größe, benutzerdefinierte Achsen und andere Kuriositäten

Letzte Woche habe ich Sie endlich etwas variabler mit den variablen Schriftarten vertraut gemacht. Ich habe vier der fünf registrierten Äxte behandelt und mich mit der Implementierung beschäftigt. Diese Woche möchte ich mich mit der fünften registrierten Achse befassen, ein wenig über deren Geschichte sprechen und einige der anderen interessanten Aspekte des neuen Formats untersuchen.

Ein Broadsheet-Exemplar, das 1720 von William Caslon gedruckt wurde und die physischen Unterschiede zwischen den Metallgrößen darstellt.

Optische Größe

Für viele von uns ist der einzige Typ, den wir kennen, digital. Und in der Regel hat digitales Schreiben schon lange auf dieselbe Weise funktioniert. Für jede Glyphe gibt es eine einzige Gliederung. Wenn Sie die Schriftgröße ändern, wird die Glyphe einfach auf das gewünschte Verhältnis skaliert. Wenn die Schriftart jedoch einen besonders hohen Kontrast zwischen dicken und dünnen Strichen aufweist, kann die einfache Skalierung der Kontur zu unvorhersehbaren Ergebnissen führen. Sehr dünne Strichgewichte können bei kleinen Abmessungen so fein werden, dass sie auseinanderfallen oder effektiv verschwinden. Wenn das Design dagegen für kleinere Baugrößen optimiert wurde, kann es bei Verwendung mit größeren Größen unangenehm aussehen. Aber so wurden die Dinge nicht immer gemacht.

Seit Jahrhunderten gibt es in der Schriftdesignbranche die Praxis, leicht abweichende Versionen (von „Schnitten“ einer Schrift mit geringfügig veränderten Strichstärken) herzustellen: Sie wurden bei physisch kleineren Größen etwas dicker, um ein Brechen der Formen zu vermeiden. Bei größeren Formaten können die dünneren Striche eine feinere Proportion beibehalten, wobei die ursprünglichen Details und die gestalterische Absicht erhalten bleiben. Die folgenden Beispiele sind Details aus dem oben gezeigten Broadsheet, das von William Caslon im Jahr 1720 gedruckt wurde, um eines seiner frühen Schriftdesigns zu demonstrieren. Der in normaler Größe dargestellte Fallbuchstabe C, der auf 6pt und 72pt eingestellt ist, zeigt diese Technik recht deutlich.

72pt und 6pt Kapital C zeigen den Unterschied im Schlaganfall

In den 1960er-Jahren, als der Fotosatz und dann der digitale Typ zur Norm wurden, ging diese Praxis jedoch weitgehend verloren. Bei der Konvertierung des Typs in das neue Format wurde in den meisten Fällen eine einzige Gliederung gewählt, die dann einheitlich skaliert wurde. Während sich das moderne Papier und der Druck dramatisch verbessert haben, gibt es immer noch einen eindeutigen Unterschied in der Lesbarkeit und Verfeinerung, wenn man es nebeneinander sieht. Gelegentlich werden digitale Schriften in unterschiedlichen optischen Größenbereichen angeboten (optimiert für kleine Textkörper im Vergleich zur Verwendung großer Displays), aber das ist ziemlich ungewöhnlich.

Mit dem Aufkommen von variablen Schriftarten können wir die Praxis auf viel praktischere Weise wiederbeleben. Anstatt separate Zeichensatzdateien erstellen, verkaufen und laden zu müssen, können wir dieselbe einzige variable Zeichensatzdatei laden und den Browser die optische Größe für uns einstellen. Bei automatischer Anwendung können wir die optische Größeneinstellung auch explizit steuern, wenn dies erforderlich ist.

Damit soll erreicht werden, dass die Werte der optischen Größenachse der Größe entsprechen, auf die die Schriftart eingestellt ist. Daher sollte ein optischer Größenbereich von 12 bis 72 bei Verwendung im Web einem entsprechenden Pixelwert (oder Punkten in Druckanwendungen) entsprechen. Browser sollten dies automatisch einstellen können, aber zum jetzigen Zeitpunkt unterstützt Chrome die Eigenschaft immer noch nicht. Sie müssen sie daher manuell einstellen, um universellere Ergebnisse zu erzielen.

Im Idealfall sollten Sie gemäß der Spezifikation in der Lage sein, dies einzustellen (oder sogar den Browser dies standardmäßig tun zu lassen):

.optische Größe {
  Schriftoptische Größenanpassung: Auto;
}

Um sicherzustellen, dass es in allen Browsern funktioniert, die variable Schriftarten unterstützen, müssen Sie dies vorerst verwenden. Der angegebene Wert sollte eine ganze Zahl sein, die der Pixelgröße der Schriftart entspricht.

.optische Größe {
  Schriftgröße: 2rem;
  / * 2rem = 32px mit Standardschriftgröße * /
  Font-Variation-Einstellungen: 'opsz' 32;
}

Ich habe ein paar Beispiele für Amstelvar (eine Serifenschrift, bei der es einen großen Unterschied macht) und Roboto Delta (eine serifenlose Schrift, bei der es etwas subtiler ist) zusammengestellt. Mit der variablen Version von Roslindale nutze ich die optische Größenanpassung auf meiner eigenen Website und die Auswirkung zwischen Text und Überschriften ist (wie ich finde) ziemlich beeindruckend.

Beispiel für die optische Dimensionierung: oben, wobei die richtige optische Größe feine Details zeigt; und unten, wobei die optische Dimensionierung auf einen niedrigeren Wert gezwungen wird, der den reduzierten Kontrast und die dickeren Formen zeigt, die dazu beitragen, die Lesbarkeit bei physisch kleineren Größen zu erhalten.

Benutzerdefinierte Achsen

Eines der Hauptziele des variablen Schriftformats war die Erweiterbarkeit: Es ist einfach unmöglich zu wissen, wie Schriftdesigner künftig ihre Schriften variieren möchten. Und das ist wirklich der Punkt: Evolution und Erforschung liefern bereits einige faszinierende und fantastische Ergebnisse. Eines, das ich sehr mag, ist die Möglichkeit, die Höhe oder Tiefe von Auf- oder Abseilen zu verändern. Dies kann enorme Auswirkungen auf den Gesamtton einer Schrift haben, aber auch darauf, wie wir mit ihr schreiben. Ich mag es, sehr eng gesetzte Überschriften zu schreiben, und mit der Fähigkeit, die Auf- und Abwärtsbewegungen in nur wenigen Schritten zu korrigieren, können wir die Typografie ziemlich genau anpassen und unschöne Kollisionen von einer Zeile zur nächsten vermeiden.

Schlagzeile mit Kollision zwischen Auf- und AbstiegÜberschrift ohne Kollision zwischen verkürzten Auf- und Abwärtsbewegungen
.tight fit {
  Font-Variation-Einstellungen:
    / * niedrigere Werte verkürzen die Auf- und Abstiegszahlen * /
    "YTAS" 750,
    "YTDE" 250;
}

Amstelvar hat Äxte für Auf- und Abstieg, daher habe ich dies als Beispiel für das Herumspielen festgelegt. Natürlich gibt es viele andere benutzerdefinierte Achsen, die erstellt wurden. Sie können einige lustige Experimente mit CodePen erkunden, um einige davon in Aktion zu sehen. Ich werde nächste Woche weitere Beispiele behandeln.

Nicht Brauch, aber neugierig

David Jonathan Ross war bis heute einer der produktivsten Designer für variable Schriftarten. Er veröffentlicht fast jeden Monat einen in seinem Font of the Month-Club und verbessert ihn im Laufe der Zeit oft noch weiter. Eine der faszinierendsten Veröffentlichungen ist die kursive Version von Roslindale Display: Sie trennt die Kursiv- und die Schrägachse, sodass Sie wählen können, ob Sie kursive Formen in aufrechter Haltung, römische Formen mit einer Schräge oder eine Kombination aus beiden verwenden möchten. Und anstatt alle kursiven Formen auf einmal zu ändern, werden sie entlang der kursiven Achse verteilt, sodass es sogar möglich ist, eine Kombination irgendwo in der Mitte zu haben. Ich muss zugeben, ich bin ziemlich verliebt. Ich habe sie unten gezeigt, aber Sie können auch CodePen abspielen.

Beispiel für aufrecht kursiv und schräg mit Roslindale Display

Ich hoffe, Sie hatten Spaß damit. Nächste Woche werden wir uns weitere benutzerdefinierte Äxte ansehen, um eine Vorstellung davon zu bekommen, wie viel wir jetzt im Web tun können.

Ressourcen

  • Demo in optischer Größe mit Amstelvar auf CodePen
  • Demo in optischer Größe mit Roboto Delta auf CodePen
  • Ascender / Descender Demo auf CodePen
  • Kombinierte Kursiv- und Schräg-Demo auf CodePen
  • FontOfTheMonth.club von David Jonathan Ross
  • Laden Sie Roboto Delta auf GitHub herunter

Dies ist ein Auszug aus meinem wöchentlichen Newsletter über Webfonts und Typografie. Wenn Sie eine wöchentliche Dosis Web-Typografie-Tipps, Neuigkeiten und meine bevorstehenden Vorträge und Workshops wünschen, können Sie sich hier für den Newsletter anmelden.

Wenn Sie dies für hilfreich hielten, wird Ihr Applaus auch anderen helfen, es zu finden - und wäre sehr dankbar!

Ursprünglich bei rwt.io am 10. Mai 2019 veröffentlicht.