Adapter la typographie aux préférences des utilisateurs avec le CSS

Méthode permettant d'adapter une police aux préférences de vos utilisateurs afin qu'ils puissent lire votre contenu de la manière la plus confortable possible.

Adam Argyle

L'intégration de l'utilisateur dans le processus de conception a été une période passionnante pour les utilisateurs, les concepteurs et les développeurs. Les utilisateurs peuvent accéder à votre expérience et commencer à consommer du contenu de manière fluide, leurs préférences étant parfaitement intégrées au résultat de conception.

Cet article de blog explique comment utiliser les requêtes média CSS avec une police variable pour personnaliser encore davantage l'expérience de lecture. La qualité et l'épaisseur de la police peuvent être personnalisées avec font-variation-settings, ce qui permet un micro-ajustement en fonction de diverses préférences et contextes, comme une préférence pour le mode sombre ou le contraste élevé. Nous pouvons prendre en compte ces préférences et adapter une police variable à cette expérience utilisateur.

• La gradation du mode sombre est légèrement réduite.
• La police du texte à contraste élevé est plus épaisse.
• Le faible contraste est associé à une police plus fine.

Suivez-nous pour comprendre chaque partie du CSS et de la police variable qui permettent ce moment important.

Configuration

Pour nous aider à nous concentrer sur les valeurs des paramètres CSS et de variante de police, mais aussi pour nous donner quelque chose à lire et à voir, voici le balisage que vous pouvez utiliser pour prévisualiser le travail :

<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>

Sans ajouter de CSS, la taille de la police s'adapte déjà aux préférences de l'utilisateur. Voici une vidéo d'une autre démo montrant comment définir font-size en pixels écrasera les préférences de l'utilisateur et pourquoi vous devriez définir la taille de votre police en rems :

Enfin, pour centrer et prendre en charge la démo, un peu de CSS :

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

  h1 {
    text-wrap: balance;
  }
}

Cette configuration de démonstration vous permet de commencer à tester et à implémenter cette fonctionnalité UX de typographie soignée.

Charger la police variable Roboto Flex

La stratégie adaptative dépend d'une police variable avec des axes significatifs pour la personnalisation, en particulier GRAD et wght. Les préférences utilisateur adaptatives cibles de cet article concernent le jeu de couleurs et le contraste, qui adapteront tous deux ces axes pour correspondre à la préférence souhaitée de l'utilisateur.

Chargez la police variable à l'aide de l'API @font-face de CSS :

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

Ensuite, appliquez la police à du contenu. Le code CSS suivant l'applique à tout :

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

Les propriétés personnalisées et les requêtes média CSS pour gagner

Une fois la police chargée, vous pouvez interroger les préférences de l'utilisateur et adapter les paramètres de la police variable en conséquence.

Paramètres par défaut (aucune préférence)

Les styles initiaux suivants seront les styles par défaut, ou en d'autres termes, les styles pour les utilisateurs sans préférences.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

Paramètres lorsque la préférence est un contraste élevé

Pour les utilisateurs qui ont indiqué une préférence pour le contraste élevé dans les paramètres système, augmentez la valeur --base-weight de 400 à 700 :

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

Le contraste est désormais plus élevé pendant la lecture.

Paramètres lorsque la préférence est un contraste faible

Pour les utilisateurs qui ont indiqué une préférence pour un faible contraste dans les paramètres de leur système, diminuez la valeur --base-weight de 400 à 200 :

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

Le contraste est désormais plus faible pendant la lecture.

Paramètres lorsque la préférence est le mode sombre

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

Les différences perceptuelles entre le clair sur sombre et le sombre sur clair sont désormais prises en compte.

Tous ensemble

@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;
    }
  }
}

Ou, pour le plaisir, tous ensemble avec l'imbrication 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 }
  }
}

Il en résulte une expérience de lecture qui adapte la police aux préférences de l'utilisateur. Le code source complet est disponible ci-dessous dans Codepen.