Adaptar la tipografía a las preferencias del usuario con CSS

Es un método para adaptar una fuente a las preferencias de tus usuarios, de modo que se sientan lo más cómodos posible cuando lean tu contenido.

Adam Argyle

Incorporar al usuario en el proceso de diseño fue un momento emocionante para los usuarios, los diseñadores y los desarrolladores. Los usuarios pueden llegar a tu experiencia y comenzar a consumir contenido sin problemas, sus preferencias están muy 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. El grado y el grosor de la fuente se pueden personalizar con font-variation-settings, lo que permite el 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 tiene una gradación ligeramente reducida.
  • El alto contraste tiene una fuente más negrita.
  • El contraste bajo tiene una fuente más delgada.
https://codepen.io/argyleink/pen/mdQrqvj

Continúa leyendo para comprender cada parte del CSS y la fuente variable que permiten este momento significativo.

Cómo prepararte

Para ayudarte a centrarte en los valores de configuración de CSS y variación de fuente, pero también brindarnos algo para leer y ver, aquí 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 que muestra cómo configurar font-size en píxeles anulará las preferencias del usuario y por qué debes establecer el tamaño de la fuente en rems:

Por último, para centrar y admitir la demostración, 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;
  }
}

Vista previa de una captura de pantalla de la demostración hasta el momento, en temas oscuro y claro.

Esta configuración de demostración te permite comenzar a probar e implementar esta prolija función de UX de tipografía.

Carga la fuente variable Roboto Flex

La estrategia adaptable depende de una fuente variable con ejes significativos para la personalización, en particular, necesitas GRAD y wght. Las preferencias de usuario adaptativas objetivo en este artículo son para el esquema de colores y el contraste, que adaptarán estos ejes para que coincidan con la preferencia deseada 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 algún contenido. El siguiente CSS la aplica a todo:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

Vista previa de una captura de pantalla de la demostración hasta ahora, con la fuente ahora en Roboto Flex en temas oscuro y claro.

Propiedades personalizadas de CSS y consultas de medios para el éxito

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 (predeterminada)

Los siguientes estilos iniciales serán los predeterminados, o bien, en otras palabras, los estilos para los usuarios que no tienen 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 de alto contraste

Para los usuarios que indicaron una preferencia por 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 durante la lectura.

Configuración cuando la preferencia es un contraste bajo

Para los usuarios que indicaron una preferencia por un contraste bajo en la configuración del sistema, disminuye el valor de --base-weight de 400 a 200:

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

Ahora hay menos contraste mientras se lee.

Configuración cuando se prefiere el modo oscuro

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Ahora se tuvieron en cuenta las diferencias perceptivas de la luz sobre lo oscuro en comparación con lo oscuro sobre lo claro.

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, para divertirte, todo junto con la anidada 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 a continuación en CodePen.