Catégories
Astuces et Design

Mode sombre et polices variables

Il n'y a pas si longtemps, nous avons écrit sur le mode sombre en CSS et j'ai pensé à la façon dont le texte blanc sur fond noir est à peu près toujours plus difficile à lire que le texte noir sur fond blanc. Après y avoir réfléchi pendant un moment, j'ai réalisé que nous pouvons résoudre ce problème en rendant le texte plus mince en mode sombre en utilisant des polices variables!

Voici un exemple du problème où j'utilise la police de caractères Yanone Kaffeesatz de Google Fonts. Notez que la section avec du texte blanc sur fond noir semble plus lourde que la section avec du texte noir sur fond blanc.

Curieusement, ces deux bits de texte utilisent en fait le même font-weight valeur de 400. Mais à mes yeux, le texte blanc semble très gras sur fond noir.

Regardez cet exemple pendant un moment. Voici à quoi ressemble le texte blanc sur un fond plus sombre; c’est ainsi que nos yeux perçoivent les formes et les couleurs. Et cela peut ne pas être un gros problème dans certains cas, mais la lecture de texte clair sur un fond sombre est toujours beaucoup plus difficile pour les lecteurs. Et si nous ne prenons pas soin de concevoir du texte dans un contexte de mode sombre, il peut sembler que le texte vibre lorsque nous le lisons.

Comment réparons nous ça?

Eh bien, c'est là que les polices variables entrent en jeu! Nous pouvons utiliser un poids de police plus léger pour faciliter la lecture du texte lorsque le mode sombre est actif:

body {
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350;
  }
}

Voici à quoi cela ressemble avec ce nouvel exemple:

C'est mieux! Les deux variantes me semblent maintenant beaucoup plus équilibrées.

Encore une fois, ce n'est qu'une petite différence, mais tous les grands designs consistent en de micro ajustements comme celui-ci. Et je pense que, si vous utilisez déjà des polices variables et que vous chargez tous ces poids, vous devez absolument ajuster le texte pour qu'il soit plus facile à lire.

Cet effet est nettement plus facile à repérer si l'on compare les différences entre des paragraphes de texte plus longs. C'est parti, cette fois à Literata:

Notez que le texte de droite se sent plus audacieux, mais ce n'est pas le cas. C'est simplement une allusion optique – les deux exemples ci-dessus ont un poids de police de 500.

Donc, pour résoudre ce problème, nous pouvons faire la même chose que l'exemple ci-dessus:

body {
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 400;
  }
}

Encore une fois, c'est un léger changement mais c'est important car à ces tailles, chaque amélioration typographique que nous apportons aide à l'expérience de lecture.

Oh, voici un petit conseil sur les polices Google!

Google Fonts vous permet d'ajouter une police à votre site Web en ajoutant un dans le du document, comme ceci:


   

C'est en utilisant la police de caractères Rosario et en ajoutant un poids de police de 515 – c'est le bit dans le code ci-dessus qui dit (email protected). Même s'il s'agit d'une police variable, 515 uniquement cette épaisseur de police téléchargée. Si nous essayons de faire quelque chose comme ça:

body {
  font-weight: 400;
}

…rien ne va se passer! En fait, la police ne se charge pas du tout. Au lieu de cela, nous devons déclarer quelle plage de valeurs de poids de police nous voulons en procédant comme suit:

Cette @300..500 peu dans le code ci-dessus est ce qui dit à Google Fonts de télécharger un fichier de police avec tous les poids entre 300 et 500. Vous pouvez également ajouter un ; entre chaque poids ne téléchargera alors que les poids 300 et 500 – donc, par exemple, vous ne pouvez pas choisir le poids 301:

Il m'a fallu quelques minutes pour comprendre ce qui n'allait pas et pourquoi la police ne se chargeait pas du tout, alors j'espère que l'équipe Google Fonts pourra clarifier cela un peu avec les codes d'intégration à l'avenir. Il devrait peut-être y avoir une option ou une bascule quelque part pour sélectionner une plage ou des poids spécifiques (ou peut-être que je ne les ai tout simplement pas vus).

Quoi qu'il en soit, je pense que tout cela explique pourquoi les polices variables peuvent être si utiles. ils nous permettent d'ajuster le texte d'une manière que nous n'avons jamais pu faire auparavant. Alors, oui pour les polices variables!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *