CSS Custom Properties verwenden, um Variable-Schriftgewichte im Dark Mode anzupassen

Schwarz ist nicht immer schlankmachend.

Als ich kürzlich eine Dark-Mode-Option für eine meiner Websites testete, erlebte ich das Problem, das Robin Rendle in diesem Artikel behandelt, aus erster Hand. Der gesamte Text meiner Seite – Überschriften und Fließtext – schien sich im Dark Mode aufzublähen. Und es spielte keine Rolle, welche Schriftarten ich verwendete oder welche Browser ich ausprobierte. Mit allen passierte dasselbe.

Hier ist zum Beispiel, was mit Adobes Source Sans Pro in Chrome für Windows passiert

Es ist keine Illusion. Die hellen Zeichen sind auf dunklen Hintergründen tatsächlich schwerer. Wir können hineinzoomen, um es besser zu sehen

Und es wird wirklich offensichtlich, wenn wir die Dark-Mode-Teile dieser Bilder invertieren

Eine Lösung

Da variable Schriftarten breite Browserunterstützung genießen, können wir sie verwenden, um dieses Problem zu lösen. Die drei folgenden Tafeln zeigen eine Lösung, auf die wir hinarbeiten werden

So erzielen wir diesen verbesserten Effekt

1. Reduzieren Sie die font-weight-Eigenschaften im Dark Mode über eine der folgenden Methoden
   1. Manuelles Ändern jeder font-weight-Zuweisung direkt in einer Dark-Mode-Media-Query.
   2. Erstellung einer einzelnen --font-weight-multiplier-Custom-Property, die ihren Wert im Dark Mode ändert, und mit der wir dann das Standard-font-weight-Werte jedes Elements multiplizieren können.
   3. Dasselbe, aber anstatt die font-weight-Eigenschaft jedes Elements einzeln zu berechnen, nutzen wir die CSS-Variablengeltung und den Universal-Selektor (*), um unsere Multiplikatorberechnung auf einmal anzuwenden.
2. Passen Sie die „GRAD“-Achse (”GRAD“) einer variablen Schriftart an. Nicht alle variablen Schriftarten unterstützen diese spezielle Funktion, aber Roboto Flex tut es. Das Ändern dieses Achsenwerts ändert das scheinbare Gewicht der Schriftart, ohne die Breite der Buchstaben zu beeinflussen.
3. Passen Sie die „DRKM“-Achse ("DRKM") einer variablen Schriftart an. Dalton Maags passend benannte Darkmode-Schriftart mit ihrer namensgebenden Darkmode-Achse eignet sich dafür einzigartig. Wie bei der Grade-Achse von Roboto Flex ändert das Anpassen der Darkmode-Achse von Darkmode das scheinbare Gewicht der Schriftart. Aber während die Grade-Achse eine Feinabstimmung der Werte erfordert, wird die Darkmode-Achse einfach ein- (dünner) oder ausgeschaltet (regulär).

Die Techniken in der ersten Gruppe funktionieren für die meisten variablen Schriftarten. Die Lösung, die Robin in seinem Artikel verwendet, ist tatsächlich der erste Punkt in der Gruppe. Ich werde die zweiten und dritten Punkte der Gruppe erweitern, indem ich Custom Properties einführe, die uns helfen, Schriftgewichte automatisch im Dark Mode anzupassen.

Die zweite und dritte Gruppe beinhalten weniger gebräuchliche font-variation-settings-Achsen. Obwohl diese Strategien für weniger Schriftarten gelten, können sie vorzuziehen sein, wenn sie verfügbar sind. Der Trick besteht darin, zu wissen, was eine variable Schriftart unterstützt, bevor man sie auswählt.

Ich habe eine Demonstrationsseite mit allen in diesem Artikel behandelten Strategien erstellt. Sie können sehen, wie einige verschiedene variable Schriftarten im Light Mode, im Dark Mode ohne Anpassung und im Dark Mode mit unseren Lösungen zum Ausdünnen von Zeichen aussehen.

Zusätzlich zu den oben aufgeführten Strategien gibt es immer noch eine weitere Option: **nichts tun!** Wenn Sie der Meinung sind, dass Ihre Schriftarten im Light und Dark Mode gut genug aussehen oder Sie derzeit nicht die Bandbreite haben, um sich mit Reflow, Elementgrößenänderung, Browser-/Display-Inkonsistenzen und zusätzlichem CSS zur Wartung auseinanderzusetzen, dann müssen Sie vielleicht nichts ändern. Konzentrieren Sie sich auf den Rest Ihrer Website und halten Sie sich die Möglichkeit offen, dieses Thema später noch einmal aufzugreifen.

Strategie 1: Reduzierung des font-weight-Wertes

Die meisten variablen Textschriften haben eine Gewichtungsachse, die es uns ermöglicht, jeden spezifischen font-weight-Wert innerhalb des verfügbaren Gewichtsbereichs dieser Schriftart zuzuweisen (z. B. 0-1000, 300-800 usw.). Jede Technik dieser Strategie nutzt diese feine Kontrolle über die Gewichtungsachse, um die font-weight-Werte im Dark Mode zu reduzieren. (Die Notwendigkeit solch präziser font-weight-Werte macht auch die meisten nicht-variablen Schriftarten für diese Lösung ungeeignet.)

Wenn Sie variable Schriftarten verwenden, die Sie lokal haben, können Sie deren Achsen und Wertebereiche bei Wakamai Fondue überprüfen

Denken Sie daran, dass Sie beim Laden von Schriftarten mit der @font-face-Regel gleichzeitig einen font-weight-Bereich für jede von ihnen festlegen sollten

@font-face {
  src: url('Highgate.woff2') format('woff2-variations');
  font-family: 'Highgate';
  font-weight: 100 900;
}

Wenn Sie diesen Schritt vernachlässigen, werden einige variable Schriftarten in aktuellen Chromium-Browsern bestimmte font-weight-Werte möglicherweise nicht korrekt wiedergeben.

Die grundlegende Lösung: Manuelles Eingeben jedes Gewichts

Hier ist die Technik, zu der die meisten von uns greifen werden. Wir erstellen eine Dark-Mode-Media-Query, in der wir einige font-weight-Werte eingeben, die etwas niedriger sind als ihre Standardwerte.

/* Default (light mode) CSS */ 
body {
  font-weight: 400;
}

strong, b, th, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Dark mode CSS */
@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350;
  }

  strong, b, th, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
  }
}

Es funktioniert und ist kein Problem bei der Wartung – solange wir nicht vorhaben, weitere Gewichte auf unserer Website hinzuzufügen oder zu bearbeiten! Aber wenn wir doch mehr Gewichte einbeziehen, kann es schnell unübersichtlich werden. Denken Sie daran, jede Selektor/Eigenschaft-Kombination sowohl außerhalb als auch innerhalb der prefers-color-scheme-Media-Query einzugeben. Wir müssen einige manuelle Berechnungen (oder Vermutungen) durchführen, um die Dark-Mode-Eigenschaftswerte für jedes Element zu ermitteln.

Erstellen einer Gewichtungs-Multiplikator-Custom-Property und deren Verwendung in einer Berechnung bei der Festlegung des Gewichts eines Elements

Ich versuche im Allgemeinen, Mike Riethmullers Credo einzuhalten, dass „Media Queries nur verwendet werden, um den Wert von Custom Properties zu ändern“. Und das ist die Verbesserung, die wir in dieser Lösung vornehmen. Anstatt Schriftgewichte für alle unsere Elemente im und außerhalb des Dark Mode eingeben zu müssen, ist das Einzige, was wir in unsere Media Query einfügen, eine --font-weight-multiplier-Custom-Property

@media (prefers-color-scheme: dark) {
  :root {
    --font-weight-multiplier: .85;
  }
}

Dann multiplizieren wir für alle unsere font-weight-Eigenschaften im gesamten Stylesheet den Wert der Variablen mit unserem bevorzugten Standard-Gewichtswert für jedes Element – wodurch das Schriftgewicht im Dark Mode um 15 % reduziert wird. Wenn wir nicht im Dark Mode sind, multiplizieren wir das Standardgewicht mit 1, was bedeutet, dass es sich überhaupt nicht ändert.

Hier ist, was ich meine. Normalerweise würden wir dies verwenden, um ein Körper-Schriftgewicht von 400 festzulegen

body {
  font-weight: 400;
}

Für diese Lösung verwenden wir dies

body {
  font-weight: calc(400 * var(--font-weight-multiplier, 1));
}

In der var()-Funktion bemerken wir, dass unsere Variable einen Fallback-Wert von 1 hat. Da --font-weight-multiplier nur im Dark Mode gesetzt wird, wird dieser Fallback-Wert die restliche Zeit verwendet. Standardmäßig bleibt unser Schriftgewicht für Körpertext also bei 400 (400*1). Aber im Dark Mode reduziert sich das Gewicht auf 340 (400*.85).

Das Gleiche machen wir auch mit fettgedruckten Elementen

strong, b, th, h1, h2, h3, h4, h5, h6 {
  font-weight: calc(700 * var(--font-weight-multiplier, 1));
}

Diese Gewichte reduzieren sich von 700 auf 595 (700*.85) im Dark Mode.

Und wir können die gleiche Technik für alle anderen Elemente verwenden, bei denen wir font-weight standardmäßig auf etwas anderes als 400 setzen wollen.

Ich verwende den Wert 0,85 für --font-weight-multiplier, da ich festgestellt habe, dass dies ein guter allgemeiner Wert für die meisten Schriftarten ist (wie z. B. Adobe Source Sans Pro, die kostenlose Schriftart, die ich in den meisten Demos dieses Artikels verwende). Aber fühlen Sie sich frei, mit dieser Zahl zu spielen.

So sieht das zusammen aus

/* DARK-MODE-SPECIFIC CUSTOM PROPERTIES */
@media (prefers-color-scheme: dark) {
  :root {
    --font-weight-multiplier: .85;
  }
}

/* DEFAULT CSS STYLES... */
body {
  font-weight: calc(400 * var(--font-weight-multiplier, 1));
}

strong, b, th, h1, h2, h3, h4, h5, h6 {
  font-weight: calc(700 * var(--font-weight-multiplier, 1));
}

Erstellen einer Gewichtungs-Multiplikator-Variablen und automatisches Berechnen und Anwenden auf alle Elemente auf einmal.

Wenn wir viele CSS Custom Properties verwenden, denke ich, dass viele von uns bei einem „Nach Bedarf festlegen und überall manuell anwenden“-Ansatz bleiben. Das tut die vorherige Lösung. Wir legen unseren Custom Property-Wert in :root fest (und/oder verwenden einen Fallback-Wert), legen ihn in einer Media-Query erneut fest und wenden ihn dann mit calc() und var()-Funktionen in unserem gesamten Stylesheet an, jedes Mal, wenn wir einen font-weight-Wert zuweisen.

Der Code könnte etwa so aussehen

h1 {
  font-weight: calc(800 * var(--font-weight-multiplier, 1);
}

summary {
  font-weight: calc(600 * var(--font-weight-multiplier, 1);
}

Aber wenn wir diese Technik für verschiedene Elemente verwenden, sehen wir, dass wir diese drei Dinge jedes Mal tun müssen, wenn wir font-weight-Werte zuweisen

• Die calc()-Funktion einbeziehen
• Die var()-Funktion einbeziehen
• Sich an den Namen und Standardwert der --font-weight-multiplier-Custom-Property erinnern

Stattdessen habe ich kürzlich begonnen, diesen Ansatz für bestimmte Aufgaben umzukehren, indem ich die CSS-Variablengeltung mit einer „Überall festlegen und einmal anwenden“-Methode nutze. Für diese Technik ersetze ich jede font-weight-Eigenschaft im Stylesheet durch eine --font-weight-Variable, wobei der Name der Einfachheit halber gleich bleibt, nur mit zusätzlichen Strichen. Dann setze ich diesen Wert auf das Standardgewicht für den jeweiligen Selektor (z. B. 400 für Körpertext). Weder calc() noch var() sind erforderlich – noch nicht. So legen wir **überall fest**.

Dann **wenden wir einmal an**, mit einer einzigen font-weight-Eigenschaft in unserem Stylesheet, die das Gewicht jedes Textelements über den Universal-Selektor festlegt. Wenn wir unseren obigen Schnipsel modifizieren, hätten wir nun Folgendes

h1 {
  --font-weight: 800;
}

summary {
  --font-weight: 600;
}

* {
  font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1);
}

Die calc()-Funktion multipliziert jede unserer --font-weight-Custom-Properties mit unserer Multiplikator-Variable, und die font-weight-Eigenschaft wendet dann den Wert auf das entsprechende Element an.

Es ist nicht notwendig, für jede Custom Property im Stylesheet nur eine einzige var() zu verwenden. Aber ich mache es oft gerne, wenn ich Berechnungen durchführe und/oder eine Hilfsvariable verwende, wie hier. Das heißt, obwohl dies sicherlich die **cleverste** Technik zur Anpassung von Schriftgewichten ist, bedeutet das nicht, dass sie für alle Projekte die **beste** Technik ist. Es gibt mindestens ein ernsthaftes Vorbehalt.

Der Hauptvorteil der Universal-Selektor-Technik – dass sie für alles gilt – birgt auch ihr größtes Risiko. Es kann Elemente geben, die wir nicht ausdünnen wollen! Wenn zum Beispiel unsere Formularelemente im Dark Mode weiterhin dunklen Text auf hellen Hintergründen beibehalten, können sie immer noch vom Universal-Selektor überschrieben werden.

Es gibt Möglichkeiten, dieses Risiko zu mindern. Wir könnten * durch eine lange Selektor-Zeichenkette ersetzen, die eine Liste von nur den Elementen enthält, die wir ausdünnen wollen (sie in die Berechnung einbeziehen). Oder wir könnten Schriftgewichte für die Elemente, die nicht betroffen sein sollen, fest codieren (opt-out).

* {
  font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1));
}

button, input, select, textarea {
  font-weight: 400;
}

Solche Korrekturen können den Code letztendlich genauso kompliziert machen wie die vorherige Technik. Sie müssen also abwägen, was für Ihr Projekt geeignet ist. Wenn Sie immer noch Bedenken hinsichtlich der Leistung, der Code-Komplexität haben oder denken, dass diese Technik unerwünschte (sogar unvorhersehbare) Ergebnisse einführen könnte, ist die vorherige Technik möglicherweise die sicherste.

Der endgültige Code

/* DEFAULT CUSTOM PROPERTIES */
:root {
  --font-weight: 400;
  --font-weight-multiplier: 1;
}
strong, b, th, h1, h2, h3, h4, h5, h6 {
  --font-weight: 700;
}

/* DARK-MODE-SPECIFIC CUSTOM PROPERTIES */
@media (prefers-color-scheme: dark) {
  :root {
    --font-weight-multiplier: .85;
  }
}

/* APPLYING THE CUSTOM PROPERTIES... */
* {
  font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1));
}

Wir sind nicht verpflichtet, die Standard---font-weight: 400 und --font-weight-multiplier: 1 Custom Properties im obigen Code festzulegen, da wir die Fallback-Werte in den var()-Funktionen enthalten haben. Aber wenn der Code komplexer wird, lege ich sie gerne an einer logischen Stelle fest, falls ich sie später finden und ändern möchte.

Ein letzter Hinweis zu dieser Strategie: Wir können Gewichte auch mit der font-variation-settings-Eigenschaft und einem "wght"-Achsenwert statt font-weight anwenden. Wenn Sie eine Schriftart mit mehreren Achsen verwenden, finden Sie es vielleicht übersichtlicher, all Ihre Schriftart-Anpassungen auf diese Weise vorzunehmen. Ich kenne mindestens eine Schriftart (Type Networks Roboto Flex, die wir später in diesem Artikel verwenden werden), die 13 Achsen hat!

So wenden Sie unsere Lösung über eine font-variation-settings-Eigenschaft an

* {
  --wght: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1));
  font-variation-settings: "wght" var(--wght);
}

Strategie 1 Ergänzung: Behandlung von letter-spacing

Eine Nebenwirkung des Senkens unseres Schriftgewichts ist, dass es bei den meisten nicht-monospaced Schriftarten die Zeichen schmaler macht.

Hier sehen wir wieder, was passiert, wenn wir Source Sans Pro mit unserem Multiplikator aufhellen. Die oberen beiden Tafeln unten zeigen Source Sans Pro im Light Mode, im Standard-Dark Mode und im Dark Mode mit ausgedünntem Text.

Ohne Anpassungen sind die Zeichen im Light Mode und Dark Mode gleich breit. Aber wenn wir das Schriftgewicht verringern, nehmen diese Zeichen nun weniger Platz ein. Ihnen gefällt Ihnen möglicherweise nicht, wie sich diese Änderung auf Ihren Fluss oder die Elementgrößen auswirkt (z. B. schmalere Schaltflächen). Und einige Designer halten es sowieso für eine gute Idee, im Dark Mode einen Zeilenabstand hinzuzufügen. Wenn Sie möchten, können Sie also eine weitere Custom Property erstellen, um etwas Platz hinzuzufügen.

Implementierung einer Custom Property für den Zeilenabstand

Genau wie bei unserer font-weight-Multiplikator-Variable erstellen wir eine Zeilenabstands-Variable mit einem Standardwert, der im Dark Mode überschrieben wird. In unserem Standard (Light Mode) :root setzen wir unsere neue --letter-spacing-Custom-Property vorerst auf 0

:root {
  /* ...other custom variables... */
  --letter-spacing: 0;
}

Dann erhöhen wir in unserer Dark-Mode-Abfrage den Wert auf etwas Größeres als 0. Ich habe ihn hier als .02ch eingegeben (was gut mit einem --font-weight-multiplier-Wert von 0,85 harmoniert). Sie könnten sogar schlau sein und ihn mit einigen Berechnungen basierend auf Ihren Schriftgewichten und/oder -größen fein abstimmen, wenn Sie möchten. Aber ich verwende vorerst diesen hart codierten Wert

@media (prefers-color-scheme: dark) {
  :root {
    /* ...other custom variables... */
    --letter-spacing: .02ch;
  }
}

Schließlich wenden wir ihn über unseren Universal-Selektor an (mit einem Fallback-Wert von 0)

* {
  /* ...other property settings... */
  letter-spacing: var(--letter-spacing, 0);
}

Hinweis: Obwohl ich in diesem Beispiel die ch-Einheit verwende, funktioniert auch die Verwendung von em, wenn Sie dies bevorzugen. Für Source Sans Pro ist ein Wert von .009em ungefähr gleich .02ch.

Hier ist der vollständige Code für einen Schriftgewichts-Multiplikator mit Zeilenabstand

/* DEFAULT CSS CUSTOM PROPERTIES */
:root {
  --font-weight: 400;
  --font-weight-multiplier: 1;
  --letter-spacing: 0;
}

strong, b, th, h1, h2, h3, h4, h5, h6 {
  --font-weight: 700;
}

/* DARK MODE CSS CUSTOM PROPERTIES */
@media (prefers-color-scheme: dark) {
  :root {
    /* Variables to set the dark mode bg and text colors for our demo. */
    --background: #222;
    --color: #fff;

    /* Variables that affect font appearance in dark mode. */
    --font-weight-multiplier: .85;
    --letter-spacing: .02ch;
  }
}

/* APPLYING CSS STYLES... */
* {
  font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1));
  letter-spacing: var(--letter-spacing, 0);
}

body {
  background: var(--background, #fff);
  color: var(--color, #222);
}

Schriftarten mit konstanten Zeichenbreiten (auch Multiplex-Schriftarten genannt)

Neben Monospace-Schriftarten gibt es einige andere Schriftarten, die speziell so gestaltet sind, dass ihre einzelnen Zeichen unabhängig vom Gewicht die gleiche horizontale Fläche einnehmen. Wenn beispielsweise ein „i“ bei einem Gewicht von 400 fünf horizontale Pixel Platz einnimmt und ein „w“ bei demselben Gewicht dreizehn Pixel einnimmt, nehmen sie immer noch fünf bzw. dreizehn Pixel ein, wenn ihr Gewicht auf 700 erhöht wird.

Arrow Types Recursive Sans ist eine solche Schriftart. Das folgende Bild zeigt, wie die Zeichen von Recursive im Light Mode, im Standard-Dark Mode und im Dark Mode mit unserem Schriftgewichts-Multiplikator jeweils die gleichen Breiten beibehalten

Multiplex-Schriftarten wie Recursive sind so konzipiert, dass Sie beim Ändern ihrer Schriftgewichte im Dark Mode keinen Zeilenabstand anpassen müssen. Ihre Elementgrößen und der Seitenfluss bleiben erhalten.

Strategie 2: Anpassen der „GRAD“-Achse einer variablen Schriftart

Die Grade-Achse ("GRAD") ändert das scheinbare Gewicht einer Schriftart, ohne deren tatsächlichen font-weight-Wert oder die Breiten ihrer Zeichen zu ändern. Bei der Verwendung von Schriftarten mit dieser Achse benötigen Sie möglicherweise gar keine variable Schriftgewichts-Multiplikator-Variable.

Für Type Networks kostenlose Roboto Flex-Schriftart ist eine Gradzahl von -1 am dünnsten, 0 (Standard) ist normal und 1 ist am dicksten. Mit dieser Schriftart beginne ich damit, ihre Grade-Achse im Dark Mode auf etwa -0,75 zu setzen.

:root {
  --GRAD: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --GRAD: -.75;
  }
}

body {
  font-variation-settings: "GRAD" var(--GRAD, 0);
}

Die Anpassung der Grade-Achse scheint also die perfekte Lösung zu sein, wenn sie Ihnen zur Verfügung steht, richtig? Nun, vielleicht. Es gibt ein paar Dinge zu beachten, wenn Sie sie in Betracht ziehen.

Erstens geht die Skala für alle Schriftarten nicht immer von -1 bis 1. Manche reichen von 0 bis 1. Mindestens eine Schriftart verwendet Prozente, wobei 100 der Standard ist. Und andere Schriftarten richten die Grade-Skala an den Schriftgewichten aus, sodass der Bereich etwas wie 100-900 sein kann. Wenn Sie die Grade-Achse in diesem Fall verwenden möchten, müssen Sie möglicherweise alle Ihre Schriftgewichte überall auf einen Standardwert von 400 setzen und dann die Grade-Achse für alle Gewichtungsänderungen verwenden. Für den Dark Mode möchten Sie dann die Grade-Achse im Wesentlichen so behandeln, wie wir es in unserer Schriftgewichts-Multiplikator-Lösung tun – die Anwendung des Multiplikators auf die "GRAD"-Achse in font-variation settings.

Das zweite Vorbehalt ist, dass einige Schriftarten es Ihnen nicht erlauben, eine Schriftart auf einen Wert zu gradieren, der niedriger ist als ihr Standardgewicht. Die Grade-Funktion kann sie also überhaupt nicht aufhellen. Apples San Francisco-Schriftart (die über font-family: system-ui; auf Apple-Geräten getestet werden kann) hat beide Probleme. Ab macOS Catalina hat San Francisco eine Grade-Achse. Sie ist so skaliert, dass sie an die Schriftgewichte angepasst ist, und ihr Minimalwert ist 400.

Da wir die Grade nicht auf einen Wert unter 400 setzen können, können wir Schriftarten von einem Standard von 400 im Dark Mode nicht aufhellen. Wenn wir tiefer gehen wollen, müssen wir stattdessen den Wert der Gewichtsachse senken.

Strategie 3: Anpassen der „Darkmode“-Achse einer variablen Schriftart

Zum Zeitpunkt des Schreibens gibt es derzeit nur eine Schriftart mit einer Darkmode-Achse ("DRKM"): Dalton Maags Darkmode.

Die Darkmode-Achse ist im Wesentlichen eine Grade-Achse ohne Feinabstimmung. Schalten Sie sie einfach ein (1) für ein dünneres Erscheinungsbild im Dark Mode und lassen Sie sie aus (0, der Standard) für eine normale Darstellung.

:root {
  --DRKM: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --DRKM: 1;
  }
}

body {
  font-variation-settings: "DRKM" var(--DRKM, 0);
}

Ich mag die Darkmode-Schriftart sehr. Aber Vorsicht: Für professionelle Nutzung ist eine kommerzielle Lizenz erforderlich. Dalton Maag bietet eine Testversion an, die nur für „akademische, spekulative oder Pitching-Zwecke“ verwendet werden kann. Ich hoffe, dass diese Schriftart ein Pilot für weitere Dalton Maag-Familien ist, die eine Darkmode-Achse erhalten, und dass andere Schriftgießereien dann folgen werden!

Andere zu berücksichtigende Faktoren

Wir haben einige große Strategien für die Arbeit mit variablen Schriftarten im Dark-Mode-Kontext behandelt. Aber wie bei den meisten Dingen gibt es andere Dinge zu beachten, die Sie zu der einen oder anderen Lösung bewegen könnten.

Dark Mode auf hochauflösenden („Retina“) Bildschirmen

Auf Bildschirmen mit höherer Pixeldichte (z. B. die meisten modernen Telefone, MacBooks, iMacs usw.) ist der Verdickungseffekt des Dark Mode oft weniger ausgeprägt. Daher möchten Sie die Schriftarten auf diesen Bildschirmen möglicherweise nicht so stark ausdünnen – wenn überhaupt!

Wenn Sie Schriftarten dennoch etwas aufhellen möchten, können Sie eine weitere Media-Query hinzufügen, um den Effekt zu mildern. Je nachdem, welche Lösung Sie verwenden, können Sie den --font-weight-multiplier-Wert näher an 1 setzen, den --GRAD-Wert näher an 0 setzen oder --DRKM ganz deaktivieren (da er entweder an oder aus ist, ohne Zwischenstufen).

Wenn Sie diese Abfrage hinzufügen, denken Sie daran, sie unter der ursprünglichen prefers-color-scheme-Abfrage zu platzieren, da sie sonst möglicherweise keine Wirkung hat. Media Queries fügen keine CSS-Spezifität hinzu, daher ist ihre Reihenfolge wichtig!

@media (prefers-color-scheme: dark) and (-webkit-min-device-pixel-ratio: 2), 
       (prefers-color-scheme: dark) and (min-resolution: 192dpi) { 
  :root {
    --font-weight-multiplier: .92;
    /* Or, if you're using grade or darkmode axis instead: */
    /* --GRAD: -.3; */
    /* --DRKM: 0; */
  }
}

Wenn Sie Schriftarten im Dark Mode auf hochauflösenden Bildschirmen **überhaupt nicht** aufhellen möchten, können Sie Ihre ursprüngliche Dark-Mode-prefers-color-scheme-Abfrage wie folgt aktualisieren, um diese Bildschirme auszuschließen

@media (prefers-color-scheme: dark) and (-webkit-max-device-pixel-ratio: 1.9), 
       (prefers-color-scheme: dark) and (max-resolution: 191dpi) { 

  /* Custom properties for dark mode go here. */

}

Mischen von Schriftarten mit unterschiedlichen Achsen (und Mischen von variablen Schriftarten mit nicht-variablen Schriftarten)

Wenn Sie mehr als eine Schriftart auf Ihrer Website verwenden, müssen Sie berücksichtigen, welche Auswirkungen diese Anpassungen auf alle haben könnten. Wenn Sie beispielsweise mehrere Schriftarten mit sich überschneidenden Achsen verwenden, könnten Sie versehentlich die Effekte mehrerer Strategien kombinieren (z. B. sowohl Grad als auch Gewicht gleichzeitig reduzieren).

Wenn alle Schriftarten auf Ihrer Website variabel sind und über eine Grade-Achse mit einer übereinstimmenden Skala und einem übereinstimmenden Bereich verfügen (z. B. wenn sie alle von -1 bis 1 reichen), wäre das die Lösung, die ich empfehlen würde. Sie müssen dies jedoch überprüfen, wenn Sie später andere Schriftarten hinzufügen möchten, die diese Kriterien nicht erfüllen. Dasselbe gilt auch für die Darkmode-Achse, wenn diese weiter verbreitet wird.

Wenn alle Ihre Schriftarten variabel sind, sie aber nicht alle dieselben Achsen teilen (z. B. Grade und Darkmode), dann ist die Verwendung nur der --font-weight-multiplier-Custom-Property möglicherweise Ihre sicherste Wahl.

Schließlich, wenn Sie variable und nicht-variable Schriftarten mischen, wissen Sie, dass sich die nicht-variablen Schriftarten mit keiner dieser Lösungen im Aussehen nicht ändern – mit einigen Ausnahmen. Wenn Sie zum Beispiel den Schriftgewichts-Multiplikator mit der font-weight-Eigenschaft verwenden, ist es möglich, dass sich einige – aber vielleicht nicht alle – Ihrer Schriftgewichte so weit ändern, dass sie zum nächst niedrigeren Gewichtsnamen wechseln.

Nehmen wir an, Ihre Website enthält eine Schriftart mit drei Gewichten: normal (400), halbfett (600) und fett (700). Im Dark Mode können Ihre fetten Zeichen so weit aufgehellt werden, dass sie als halbfett angezeigt werden. Aber Ihre normale Schriftart bleibt immer noch normal (da dies das niedrigste auf der Website enthaltene Gewicht ist). Wenn Sie diese Inkonsistenz vermeiden möchten, könnten Sie Ihre variablen Schriftgewichte über font-variation-settings und nicht über font-weight anwenden, sodass Ihre nicht-variablen Schriftarten überhaupt nicht beeinflusst werden. Sie behalten im Dark Mode einfach immer ihr Standardgewicht bei.

Zum Schluss

Es ist immer ein glücklicher Zufall, wenn sich komplementäre Technologien etwa zur gleichen Zeit verbreiten. Mit dem Aufstieg von Dark Mode und variablen Schriftarten haben wir den Luxus, letztere zu nutzen, um eine der Herausforderungen des ersteren zu mildern. Durch die Verwendung von CSS Custom Properties in Verbindung mit Gewichts-, Grad- und Darkmode-Achsen können wir dem Aussehen unseres Textes sowohl im Light- als auch im Dark-Mode eine gewisse Konsistenz verleihen.

Sie können meine interaktive Demo mit den Schriftarten und Achsen aus diesem Artikel besuchen.