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

Une méthode pour adapter une police d’écriture à vos utilisateurs afin de faciliter au maximum la lecture de votre contenu.

Adam Argyle

Amener l'utilisateur dans le processus de conception a été une période passionnante pour les utilisateurs, concepteurs et développeurs. Les utilisateurs peuvent accéder à votre expérience et commencer à les utiliser sans difficulté. qui consomment du contenu, leurs préférences sont étroitement intégrées au résultat de la conception.

Cet article de blog explique comment utiliser les requêtes média CSS avec une police variable pour adapter l'expérience de lecture encore plus loin. Vous pouvez personnaliser le niveau et l'épaisseur de la police avec font-variation-settings, ce qui permet de microrégler selon différentes préférences et les contextes, comme une préférence pour le mode sombre ou le contraste élevé. Nous pouvons prendre ces préférences et d'adapter une police variable pour cette expérience utilisateur.

• Le mode sombre offre une gradation légèrement réduite.
• Le contraste élevé permet d'obtenir une police plus audacieuse.
• Avec un faible contraste, la police est plus fine.

Poursuivez votre lecture pour comprendre chaque partie du CSS et les polices variables qui permettent ce moment important.

Préparation

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

Enfin, pour centrer et prendre en charge la démonstration, ajoutez un peu de code 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 typographie soignée de l'expérience utilisateur .

Charger la police variable Roboto Flex

La stratégie adaptative repose sur une police variable avec des axes significatifs pour personnalisation, vous avez plus particulièrement besoin de GRAD et de wght. L'utilisateur adaptatif cible préférences dans cet article concernent la palette de couleurs et le contraste, qui adaptera ces axes pour correspondre aux préférences souhaitées 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');
}

Appliquez ensuite la police à un contenu. Le CSS suivant l'applique tout:

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

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

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

Paramètres en l'absence de préférences (par défaut)

Les styles initiaux suivants seront les styles par défaut, ou une autre façon d'afficher les styles pour les utilisateurs sans aucune préférence.

@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é une préférence pour un contraste élevé dans leur système , faites passer la valeur de --base-weight de 400 à 700:

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

Le contraste est désormais plus important lors de la lecture.

Paramètres lorsque le contraste est faible en priorité

Pour les utilisateurs qui ont indiqué une préférence pour un faible contraste dans leur système faites passer 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 privilégié

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

Les différences perceptuelles entre la lumière et l'obscurité dans une lumière ont été pris en compte.

L'union fait la force

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

Vous pouvez aussi utiliser 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 à celle de l'utilisateur. préférences. Le code source complet est disponible ci-dessous dans Codepen.