Modo oscuro y fuentes variables.

No hace mucho, escribimos sobre el modo oscuro en CSS y he estado pensando en cómo el texto blanco sobre un fondo negro es siempre más difícil de leer que el texto negro sobre un fondo blanco. Después de pensar en esto por un tiempo, me di cuenta de que podemos solucionar ese problema haciendo el texto más delgado en modo oscuro usando fuentes variables.

Aquí hay un ejemplo del problema en el que estoy usando el tipo de letra Yanone Kaffeesatz de Google Fonts. Observe que la sección con texto blanco sobre fondo negro parece más pesada que la sección con texto negro sobre fondo blanco.

Por extraño que parezca, estos dos fragmentos de texto en realidad utilizan el mismo font-weightvalor de 400. Pero en mi opinión, el texto blanco parece más atrevido sobre un fondo negro.

Mire fijamente este ejemplo por un momento. Así es como se ve el texto blanco sobre un fondo más oscuro; así es como nuestros ojos perciben formas y colores. Y puede que esto no sea un gran problema en algunos casos, pero leer texto claro sobre un fondo oscuro siempre es mucho más difícil para los lectores. Y si no nos preocupamos de diseñar el texto en un contexto de modo oscuro, entonces podemos sentir como si el texto vibrara mientras lo leemos.

¿Cómo arreglamos esto?

Bueno, ¡aquí es donde entran las fuentes variables! Podemos usar un peso de fuente más ligero para que el texto sea más fácil de leer siempre que el modo oscuro esté activo:

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

Así es como se ve con este nuevo ejemplo:

¡Esto es mejor! Las dos variantes ahora me parecen mucho más equilibradas.

Una vez más, es sólo una pequeña diferencia, pero todos los grandes diseños consisten en microajustes como este. Y creo que, si ya estás usando fuentes variables y cargando todos estos pesos, entonces definitivamente deberías ajustar el texto para que sea más fácil de leer.

Este efecto es más fácil de detectar si comparamos las diferencias entre párrafos de texto más largos. Allá vamos, esta vez en Literata:

Observe que el texto de la derecha parece más audaz, pero simplemente no lo es. Es simplemente una alusión óptica: ambos ejemplos anteriores tienen un peso de fuente de 500.

Entonces, para solucionar este problema podemos hacer lo mismo que en el ejemplo anterior:

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

Nuevamente, es un cambio leve pero es importante porque en estos tamaños cada mejora tipográfica que hacemos ayuda a la experiencia de lectura.

¡Ah, y aquí tienes un consejo rápido sobre fuentes de Google!

Google Fonts te permite agregar una fuente a tu sitio web agregando una linken headel documento, como este:

head  link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515display=swap" rel="stylesheet" /head

Eso es usar el tipo de letra Rosario y agregar un peso de fuente de 515; Ese es el bit en el código anterior que dice wght@515. Incluso si se trata de una fuente variable, solo se descargará este peso de fuente. Sin embargo, si intentamos hacer algo como esto…

body {  font-weight: 400;}

…¡nada pasará! De hecho, la fuente no se cargará en absoluto. En su lugar, debemos declarar qué rango de valores de peso de fuente queremos haciendo lo siguiente:

link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300..500display=swap" rel="stylesheet"

Este @300..500bit en el código anterior es lo que le dice a Google Fonts que descargue un archivo de fuente con todos los pesos entre 300y 500. Alternativamente, agregar un ;entre cada peso solo descargará los pesos 300y 500, por lo tanto, por ejemplo, no podrá seleccionar el peso 301:

link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;500display=swap" rel="stylesheet"

Me tomó unos minutos descubrir qué estaba mal y por qué la fuente no se cargaba en absoluto, así que espero que el equipo de Google Fonts pueda aclararlo un poco con los códigos de inserción en el futuro. Quizás debería haber una opción o un interruptor en algún lugar para seleccionar un rango o pesos específicos (o tal vez simplemente no lo vi).

De cualquier manera, creo que todo esto es el motivo por el cual las fuentes variables pueden ser tan útiles; nos permiten ajustar el texto de maneras que nunca antes habíamos podido hacer. Entonces, ¡bien por las fuentes variables!