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 vos contenus dans les meilleures conditions.

Adam Argyle

Amener 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 intégrées de manière optimale au résultat de la conception.

Cet article de blog explique comment utiliser les requêtes média CSS avec une police variable pour personnaliser encore plus l'expérience de lecture. La qualité et l'épaisseur de la police peuvent être personnalisées avec font-variation-settings, ce qui permet de procéder à 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.
• Un contraste élevé utilise une police plus en gras.
• Un faible contraste entraîne une police plus fine.

Suivez-moi pour comprendre chaque partie du CSS et de la police variable qui permettent de créer ce moment important.

Configuration

Pour vous aider à vous concentrer sur les valeurs des paramètres CSS et de variation 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 police s'adapte déjà aux préférences de l'utilisateur. Voici une vidéo d'une autre démonstration qui montre comment la définition de font-size en pixels annule toutes les préférences utilisateur et pourquoi vous devez définir votre taille de police en rem:

Enfin, pour centrer et appuyer la démonstration, 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é d'expérience utilisateur de typographie intéressante.

Charger la police variable Roboto Flex

La stratégie adaptative dépend d'une police variable avec des axes pertinents pour la personnalisation. Plus précisément, vous avez besoin de GRAD et wght. Les préférences utilisateur adaptatives cibles de cet article concernent le jeu de couleurs et le contraste, qui s'adapteront à ces axes en fonction des préférences 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 CSS suivant l'applique à tout:

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

Propriétés personnalisées CSS et requêtes multimédias 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 en l'absence de préférences (par défaut)

Les styles initiaux suivants seront les styles par défaut, ou, pour le dire autrement, 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 pour un contraste élevé

Pour les utilisateurs qui ont indiqué préférer le contraste élevé dans leurs 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é lors de la lecture.

Paramètres lorsque le contraste est faible en priorité

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

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

Le contraste est moins élevé lors de la lecture.

Paramètres lorsque le mode sombre est préféré

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

Les différences perceptives entre les éléments clairs sur fond sombre et les éléments sombres sur fond clair ont été 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, tout 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 le Codepen.