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 casi 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 que el texto sea 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.
Curiosamente, estos dos fragmentos de texto en realidad usan el mismo font-weight valor de 400. Pero a mi modo de ver, el texto blanco se ve más audaz sobre un fondo negro.
Mire este ejemplo por un tiempo. Así es como se ve el texto en blanco sobre un fondo más oscuro; así es como nuestros ojos perciben formas y colores. Y esto puede no ser 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 ocupamos de diseñar el texto en un contexto de modo oscuro, puede parecer que el texto vibra 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:
¡Este es mejor! Las dos variantes ahora me parecen mucho más equilibradas.
Nuevamente, es solo una pequeña diferencia, pero todos los grandes diseños consisten en microajustes como este. Y creo que, si ya está usando fuentes variables y cargando todos estos pesos, definitivamente debería 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. Aquí vamos, esta vez en Literata:
Observe que el texto de la derecha se siente 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 pequeño cambio, 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 las fuentes de Google!
Google Fonts le permite agregar una fuente a su sitio web agregando una <link> en el <head> del documento, así:
<head>
<link href="https://fonts.googleapis.com/css2?family=Rosario:[email protected]&display=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 de arriba que dice [email protected]. 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 carga en absoluto. En su lugar, necesitamos declarar qué rango de valores de peso de fuente queremos haciendo lo siguiente:
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:[email protected]&display=swap" rel="stylesheet">Esta @300..500 bit en el código anterior es lo que le dice a Google Fonts que descargue un archivo de fuente con todos los pesos entre 300 y 500. Alternativamente, agregando un ; entre cada peso, solo se descargarán los pesos 300 y 500 – entonces, por ejemplo, no puedes elegir el peso 301:
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:[email protected];500&display=swap" rel="stylesheet">Me tomó unos minutos descubrir qué estaba fallando 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 por qué las fuentes variables pueden ser tan útiles; nos permiten ajustar el texto de formas que nunca antes habíamos podido hacer. Entonces, ¡hurra por las fuentes variables!