Un método para adaptar una fuente a las preferencias de tus usuarios para que se sientan más cómodos leyendo tu contenido.
Incorporar al usuario al proceso de diseño ha sido un momento emocionante para los usuarios, diseñadores y desarrolladores. Los usuarios pueden llegar a tu experiencia y comenzar a consumir contenido sin problemas, sus preferencias altamente integradas en el resultado del diseño.
En esta entrada de blog, se explora el uso de consultas de medios CSS con una fuente variable para adaptar aún más la experiencia de lectura. La calidad y el grosor de la fuente se pueden personalizar con font-variation-settings, lo que permite realizar un microajuste según varias preferencias y contextos, como una preferencia por el modo oscuro o el contraste alto. Podemos tomar estas preferencias y adaptar una fuente variable para esa experiencia del usuario.
- El modo oscuro se gradúa ligeramente.
- El contraste alto obtiene una fuente más negrita.
- Cuando hay un contraste bajo, la fuente es más delgada.
Sigue el proceso para comprender cada parte del CSS y la fuente variable que permiten este momento significativo.
Configurando
Para que puedas enfocarte en los valores de la configuración de CSS y de variación de fuente, y para brindarnos información que podamos leer y ver, a continuación te mostramos el lenguaje de marcado que puedes usar para obtener una vista previa del trabajo:
<h1>Variable font weight based on contrast preference</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
labore aliquid ex, dicta corporis.
</p>
Sin agregar CSS, el tamaño de la fuente ya se adapta a las preferencias del usuario.
Este es un video de otra demostración en el que se muestra cómo la configuración de font-size en píxeles reducirá las preferencias del usuario y por qué debes establecer el tamaño de fuente en rems:
Por último, para centrar y respaldar la demostración, usa un poco de CSS:
@layer demo.support {
body {
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
h1 {
text-wrap: balance;
}
}
Esta configuración de demostración te permite comenzar a probar e implementar esta función de UX de tipografía prolija.
Cómo cargar la fuente de la variable Roboto Flex
La estrategia adaptable depende de una fuente variable con ejes significativos para la personalización. Específicamente, necesitas GRAD y wght. Las preferencias de destino adaptables del usuario en este artículo son para el esquema de color y el contraste, que adaptarán estos ejes para que coincidan con la preferencia del usuario.
Carga la fuente variable con la API @font-face de CSS:
@font-face {
font-family: "Roboto Flex";
src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}
A continuación, aplica la fuente a alguna parte del contenido. El siguiente CSS se aplica a todo:
@layer demo.support {
body {
font-family: Roboto Flex;
}
}
Propiedades personalizadas de CSS y consultas de medios para triunfar
Con la fuente cargada, puedes consultar las preferencias del usuario y adaptar la configuración de la fuente variable para que coincida.
Configuración cuando no hay preferencias (predeterminado)
Los siguientes diseños iniciales serán los predeterminados, u otra forma de verlos, los diseños para usuarios sin preferencias.
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
}
Configuración cuando la preferencia es un contraste alto
En el caso de los usuarios que indicaron que prefieren el contraste alto en la configuración del sistema, aumenta el valor de --base-weight de 400 a 700:
@layer demo {
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
}
Ahora hay más contraste mientras lees.
Configuración cuando la preferencia es un contraste bajo
En el caso de los usuarios que indicaron que prefieren el contraste bajo en la configuración del sistema, reduce el valor de --base-weight de 400 a 200:
@layer demo {
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
}
Ahora hay menos contraste durante la lectura.
Configuración cuando la preferencia es el modo oscuro
@layer demo {
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
Ya se tuvieron en cuenta las diferencias perceptivas entre la luz en la oscuridad con respecto a la oscura.
Ahora, todos juntos
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
O, por diversión, todo junto con la anidación de CSS:
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
@media (prefers-contrast: more) { --base-weight: 700 }
@media (prefers-contrast: less) { --base-weight: 200 }
@media (prefers-color-scheme: dark) { --base-grade: -25 }
}
}
El resultado es una experiencia de lectura que adapta la fuente para que coincida con las preferencias del usuario. El código fuente completo está disponible más abajo en CodePen.