Vor nicht allzu langer Zeit haben wir über Dark Mode in CSS geschrieben und ich habe darüber nachgedacht, wie weiße Schrift auf schwarzem Hintergrund praktisch immer schwerer zu lesen ist als schwarze Schrift auf weißem Hintergrund. Nachdem ich eine Weile darüber nachgedacht hatte, wurde mir klar, dass wir dieses Problem lösen können, indem wir die Schrift im Dark Mode dünner machen, indem wir variable Schriftarten verwenden!
Hier ist ein Beispiel für das Problem, bei dem ich die Schriftart Yanone Kaffeesatz von Google Fonts verwende. Beachten Sie, dass der Abschnitt mit weißer Schrift auf schwarzem Hintergrund schwerer aussieht als der Abschnitt mit schwarzer Schrift auf weißem Hintergrund.
Seltsamerweise verwenden diese beiden Textabschnitte tatsächlich denselben `font-weight`-Wert von `400`. Aber für mein Auge sieht die weiße Schrift auf schwarzem Hintergrund extra fett aus.
Starren Sie dieses Beispiel eine Weile an. So sieht weiße Schrift auf einem dunkleren Hintergrund aus; so nehmen unsere Augen Formen und Farben wahr. Und das mag in manchen Fällen kein großes Problem sein, aber das Lesen heller Schrift auf dunklem Hintergrund ist für Leser immer viel schwieriger. Und wenn wir uns nicht um das Design von Text in einem Dark-Mode-Kontext kümmern, kann es sich so anfühlen, als würde der Text beim Lesen vibrieren.
Wie lösen wir das?
Nun, hier kommen variable Schriftarten ins Spiel! Wir können eine leichtere Schriftstärke verwenden, um den Text leichter lesbar zu machen, wenn der Dark Mode aktiv ist.
body {
font-weight: 400;
}
@media (prefers-color-scheme: dark) {
body {
font-weight: 350;
}
}So sieht das mit diesem neuen Beispiel aus.
Das ist besser! Die beiden Varianten sehen für mich jetzt viel ausgewogener aus.
Wieder ist es nur ein kleiner Unterschied, aber alle großartigen Designs bestehen aus solchen Mikroanpassungen. Und ich denke, wenn Sie bereits variable Schriftarten verwenden und all diese Gewichte laden, dann sollten Sie den Text definitiv so anpassen, dass er besser lesbar ist.
Dieser Effekt ist leichter zu erkennen, wenn wir die Unterschiede zwischen längeren Textabsätzen vergleichen. Hier ist es, diesmal in Literata.
Beachten Sie, dass der Text auf der rechten Seite fetter *wirkt*, aber das ist er einfach nicht. Es ist nur eine optische Täuschung – beide obigen Beispiele haben eine Schriftstärke von 500.
Um dieses Problem zu beheben, können wir dasselbe tun wie im obigen Beispiel.
body {
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
body {
font-weight: 400;
}
}Auch hier ist es eine geringfügige Änderung, aber sie ist wichtig, denn bei diesen Größen hilft jede typografische Verbesserung, die wir vornehmen, dem Leseerlebnis.
Oh, und hier ein schneller Tipp für Google Fonts!
Google Fonts ermöglicht es Ihnen, eine Schriftart auf Ihrer Website einzubinden, indem Sie ein `` im `
` des Dokuments hinzufügen, wie hier:<head>
<link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet">
</head>Das ist die Verwendung der Schriftart Rosario und das Hinzufügen einer Schriftstärke von `515` – das ist der Teil im obigen Code, der `wght@515` sagt. Selbst wenn dies eine variable Schriftart ist, wird nur diese Schriftstärke heruntergeladen. Wenn wir jedoch versuchen, so etwas zu tun…
body {
font-weight: 400;
}…passiert nichts! Tatsächlich wird die Schrift überhaupt nicht geladen. Stattdessen müssen wir deklarieren, welchen Bereich von Schriftstärkenwerten wir wünschen, indem wir Folgendes tun:
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:[email protected]&display=swap" rel="stylesheet">Der Teil `@300..500` im obigen Code teilt Google Fonts mit, eine Schriftdatei mit allen Gewichten zwischen `300` und `500` herunterzuladen. Alternativ werden durch das Hinzufügen eines `;` zwischen jedem Gewicht nur die Gewichte `300` und `500` heruntergeladen – Sie können also zum Beispiel kein Gewicht `301` wählen.
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;500&display=swap" rel="stylesheet">Ich habe ein paar Minuten gebraucht, um herauszufinden, was schiefgelaufen ist und warum die Schriftart überhaupt nicht geladen wurde. Hoffentlich kann das Google Fonts-Team dies in Zukunft mit den Einbettungscodes etwas klarer gestalten. Vielleicht sollte es irgendwo eine Option oder einen Schalter geben, um einen Bereich oder bestimmte Gewichte auszuwählen (oder vielleicht habe ich ihn einfach nicht gesehen).
Wie auch immer, ich denke, all das ist der Grund, warum variable Schriftarten so verdammt hilfreich sein können; sie ermöglichen es uns, Text auf eine Weise anzupassen, die wir noch nie zuvor konnten. Also, Hurra für variable Schriftarten!
Damit variable Schriftarten ideal nutzbar sind (insbesondere für etwas wie „Dark Mode“), sollten sie „uniwidth“ unterstützen: d.h. ein bestimmtes Zeichen hat immer die gleiche Breite (nimmt den gleichen Platz ein), unabhängig vom Gewicht usw. Andernfalls wird der Text neu umbrochen.
https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces
Dieser Fehler betrifft nur variable Schriftarten, oder? Funktionierte Antialiasing nicht?
Ich denke, das ist vernachlässigbar. Dark Mode ist nicht dafür ausgelegt, ständig gewechselt zu werden, daher sollte der Text idealerweise nur einmal neu umbrechen. Das ist nicht oft genug, um eine Schriftart abzulehnen, die keine Uniwidth-Unterstützung hat.
Einige variable Schriftarten haben eine „Grade“-Achse (GRAD); Sie könnten die Gradzahl verringern, ohne Gefahr zu laufen, dass der Text beim Kodieren für den Dark Mode umgebrochen wird. Google erwähnt, dass Apples Systemschriftart San Francisco in macOS Catalina die GRAD-Achse unterstützt, zum Beispiel.
Wie wechselt man von hellem zu dunklem Modus?
Sie können die Theme-Einstellungen Ihres Betriebssystems ändern, um das dunkle Theme zu verwenden (auf Windows 10, macOS und Linux). Wenn Sie Firefox verwenden, können Sie auch das Add-on Dark Website Forcer installieren: https://addons.mozilla.org/en-US/firefox/addon/dark-mode-website-switcher/
Sieht definitiv besser zu lesen aus. Danke für den Rat.
Ich dachte, eine variable Schriftart sei eine einzige Datei, die alle Gewichte enthält (vorausgesetzt, die anpassbare Gewichtung wird von dieser Schriftart unterstützt). Warum lädt Google Fonts dann nur einige Gewichte herunter?
Google Fonts führt eine neue Syntax mit den Query-Parametern ein. Eine variable Schriftart wird zurückgegeben, wenn ein Bereich für eine Achse (wght im Beispiel des Artikels) definiert ist. Andernfalls wird für jedes einzelne Gewicht eine statische Schriftart zurückgegeben. Dieser Artikel bietet etwas mehr Klarheit.
Seltsamerweise ist die dunkle Version von „She walked…“ mit der Gewichtung 350 breiter als die normale Version mit der Gewichtung 400, obwohl die dunkle Version eine geringere Gewichtung hat, im Codepen mit der Überschrift „So sieht das mit diesem neuen Beispiel aus:“. Ich verwende die neueste Chrome-Version auf einem Mac.
Im Schriftendesign versucht man, eine gleichmäßige „Farbe“ (wahrgenommene Dichte) zu erzielen. Da in einer helleren Schrift mehr Platz innerhalb der Buchstaben ist, fügt man oft etwas Abstand zwischen den Buchstaben hinzu. Hellere Schriftarten können also breiter sein als fettere Schriftarten, da letztere etwas enger gestellt werden können. Das ist nicht allgemein der Fall, aber oft, wenn der Schriftendesigner nicht möchte, dass fette Buchstaben zu breit und helle zu schmal werden.
Das liegt zu 100 % am Subpixel-Antialiasing von macOS. Das Anwenden von `-webkit-font-smoothing: antialiased` auf alle obigen Beispiele behebt das Problem vollständig. Das ist nicht „nur so, wie unsere Augen Formen und Farben wahrnehmen“, das ist ein konkretes Artefakt der Computer, die wir alle benutzen. Sie werden Artikel finden, die Ihnen sagen, dass Sie nicht mit `-webkit-font-smoothing` herumspielen sollten, und sie liegen alle falsch.
Außerdem schummeln die letzteren Beispiele, indem sie #222-Text auf #fff für das helle Beispiel und #fff-Text auf #111 für das dunkle Beispiel legen. Schade!
Nun, ich wusste, als ich das schrieb, dass „100 %“ eine Übertreibung war. Aber ich war nicht bereit, davon überzeugt zu werden, dass das zweite Textbeispiel nach Korrektur der Farben, Deaktivierung des Subpixel-Antialiasing und Wechsel zwischen Screenshots der Beispiele in Photoshop tatsächlich merklich überlegen war. Entschuldigen Sie mein schnippisches Auftreten. Ich denke jedoch, dass das Standard-Antialiasing des Mac dieses Problem stark verschärft und dass es mit Vorliebe deaktiviert werden sollte. Und die Farben *sollten* vergleichbar sein, wenn man einen solchen Punkt machen will.
Bitte beachten Sie, Lanny: In der Typografie ist bekannt, dass leuchtende Buchstaben auf dunklem Hintergrund fetter erscheinen. Leider kenne ich den technischen Begriff nur auf Deutsch – „Überstrahlung“, was als Blooming oder Flare übersetzt werden könnte. Wenn jemand den englischen Begriff kennt, bitte kommentieren!
Ich habe eine gute Erklärung für diesen Effekt in einem deutschen Artikel über Lesbarkeit auf Computerbildschirmen gefunden. Meine Übersetzung des relevanten Teils: „*Helle Bereiche überstrahlen (blitzen/flaren) dunklere, sodass ein heller Hintergrund dunkle Buchstaben von außen auffrisst und die Schrift weniger fett erscheint – umgekehrt erscheint helle Schrift auf dunklem Hintergrund fetter.*“
Abgesehen von Computermonitoren tritt dieser Effekt auch bei leuchtenden oder reflektierenden Straßenschildern auf (hier keine macOS-Subpixel ☺). Aus diesem Grund haben spezielle Schriftarten sogar eine leicht dünnere Version für invertierte Kontexte, z. B. Wayfinding Sans, siehe https://fdi-type.de/faq/font-usage/what-are-the-positive-and-negative-styles-of-wayfinding-sans-pro-for-r2/.
`-webkit-font-smoothing: antialiased` hilft gemäß https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ gegen diese Überstrahlung, ebenso wie die Reduzierung des Gesamtkontrasts. Es ist auch hilfreich, weiße Schrift auf schwarzem Hintergrund leicht (!) zu sperren.
Wie immer in der Typografie gibt es mehr als eine Möglichkeit, die zahlreichen subtilen optischen Phänomene zu kompensieren.
Ich liebe den Begriff ‚Überstrahlung‘!