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

Un método para adaptar una fuente a las preferencias de los usuarios, de manera que se sientan cómodos al leer 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 inconvenientes, ya que sus preferencias están integradas en el resultado del diseño.

En esta entrada de blog, se explora el uso de consultas de medios de CSS con una fuente variable para personalizar 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 obtiene una fuente más fina.
https://codepen.io/argyleink/pen/mdQrqvj

Síguelo para comprender cada parte de CSS y la fuente variable que posibilita este momento significativo.

Cómo prepararte

Para ayudarte a enfocarte en los valores de configuración de CSS y variación de fuente, pero también brindarnos algo para leer y ver, este es el 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 ordenada función de UX de tipografía.

Cómo cargar la fuente variable de 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 de @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 el momento, con la fuente ahora en Roboto Flex en los 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 (predeterminado)

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

En el caso de los usuarios que indicaron una preferencia por el 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 durante la lectura.

Configuración cuando la preferencia es 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.