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

Un método para adaptar una fuente a las necesidades de tus usuarios preferencias, para que se sientan cómodos al leer tu contenido.

Adam Argyle

Llevar 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 sin problemas y consumen contenido, 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 de CSS con una fuente variable para personalizar 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 contraste alto obtiene una fuente más llamativa.
  • El contraste bajo obtiene una fuente más fina.
https://codepen.io/argyleink/pen/mdQrqvj

Síguenos para comprender cada parte del CSS y las fuentes variables que permiten este momento significativo.

Preparando la configuración

Para ayudarnos a enfocarnos en los valores de configuración de CSS y variación de fuente, pero también darnos algo para leer y ver, este es 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 video de otra demostración muestra cómo la configuración de font-size en píxeles las preferencias del usuario y por qué deberías establecer el tamaño de la fuente en rem:

Por último, para centrar y respaldar la demostración, usa CSS:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

R vista previa de la captura de pantalla de la demostración hasta el momento, tanto en temas oscuros como claros.

Esta configuración de demostración te permite comenzar a probar e implementar esta prolija 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 personalización. Específicamente, necesitas GRAD y wght. El usuario objetivo adaptable las preferencias en este artículo son para el esquema de color y el contraste, los cuales personalizará estos ejes para que coincidan con las preferencias que desee el 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 lo aplica a todo:

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

R captura de pantalla de la vista previa de la demostración hasta ahora, con la fuente ahora en Roboto Flex, tanto temas claros y oscuros.

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

Con la fuente cargada, puedes consultar las preferencias del usuario y adaptar la variable configuración de fuente para que coincida.

Configuración cuando no hay preferencias (predeterminado)

Los siguientes diseños iniciales serán los estilos predeterminados u otra forma de ver los estilos para los 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 se prefiere el contraste alto

Para los usuarios que indicaron que prefieren el contraste alto en su sistema aumenta el valor de --base-weight de 400 a 700:

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

Ahora habrá más contraste durante la lectura.

Configuración cuando se prefiere el contraste bajo

Para los usuarios que indicaron una preferencia por el contraste bajo en su sistema Configuración, 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 se prefiere el modo oscuro

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

Ahora, las diferencias perceptivas entre la luz en la oscuridad y la oscuridad sobre tener en cuenta.

Ahora todo en uno

@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 la del usuario. preferencias. El código fuente completo está disponible a continuación en CodePen.