Passer au contenu principal

Typographie

Typographie dans Storybook

Utilisation​

Présentation​

Le composant typographique est un élément fondamental du système de conception qui garantit un rendu du texte cohérent et sémantiquement correct. Il sépare l’apparence visuelle (définie par variant) de la signification sémantique (définie par tag), ce qui offre une certaine flexibilité tout en garantissant l’accessibilité.

Propriétés clés :

  • variant : contrôle le style visuel du texte, comme la taille de la police, l’épaisseur, la hauteur de ligne, la couleur. Exemples : heading-1, heading-2, body-large et label-medium.
  • tag : remplace l’élément sémantique HTML sous-jacent pour garantir une structure et une accessibilité correctes du document. Exemples : h1, h2, p et span.

Par défaut, chaque variante est associée à une balise HTML spécifique. Toutefois, la balise Propriété vous permet de remplacer cette valeur par défaut. Cela vous donne la possibilité d’ajuster la proéminence visuelle du texte tout en conservant une structure sémantique logique. Par exemple, vous pouvez réduire la visibilité d'un titre sans en modifier l’importance structurelle.

Pour obtenir la liste complète des balises par défaut, reportez-vous aux tableaux Options des variantes. Pour découvrir plus d’exemples de cette technique, consultez la section Séparation du style et de la sémantique.

Quand l'utiliser​

Utilisez le composant typographique pour tous les éléments de texte de l’application, dont les suivants :

  • Titres : pour les titres et les titres de section.
    • Exemple : utilisez une variante de titre, telle que heading-1.
  • Corps : pour les paragraphes et autres contenus longs.
    • Exemple : utilisez une variante de corps, telle que body-medium.
  • Étiquettes : pour les textes descriptifs plus courts, tels que les étiquettes des champs de formulaire.
    • Exemple : utilisez une variante d’étiquette, telle que label-small.
  • Accroche : pour le texte d’introduction qui se trouve au-dessus d’un titre principal afin de fournir un peu de contexte.
    • Exemple : utilisez une variante d'accroche, telle que eyebrow-1.
  • Texte hero : pour les textes volumineux et percutants dans les sections de texte hero ou les titres marketing.
    • Exemple : utilisez une variante de texte hero, telle que hero-1.
  • Citations : pour définir le style d’un texte cité à partir d’une source externe.
    • Exemple : utilisez une variante de citation, telle que blockquote-medium.
  • Légendes : pour le texte descriptif accompagnant des images ou des figures.
    • Exemple : utilisez une variante de légende, telle que figcaption-medium.
  • Code : pour afficher des extraits de code intégrés ou au niveau du bloc.
    • Exemple : utilisez une variante de code, telle que code-medium.
  • Tout texte nécessitant un style cohérent et une signification sémantique.

Quand ne pas l'utiliser​

Évitez d’utiliser le composant typographique pour des éléments autonomes dont le rôle principal correspond à celui d'un bouton ou d'un lien. Utilisez plutôt les composants dédiés Button ou Link, qui sont conçus pour gérer correctement les états interactifs, la gestion du focus et les rôles d’accessibilité.

Exemple d'utilisation​

Formulaire Web avec des légendes numérotées identifiant des exemples de styles typographiques différents

  1. Variante de texte hero : il s’agit du titre principal de la page.
  2. Variante d'accroche : ce texte fournit un contexte pour le titre situé en dessous.
  3. Variante de titre (titre de la section) : heading-2 sert de titre principal pour la section « Ajouter un conducteur ».
  4. Variante de titre (titre de la sous-section) : cette variante sert à séparer le style visuel de la signification sémantique. Le texte est visuellement plus petit que le titre de la section principale (grâce à une variante heading-4), mais il est identifié en tant que h3 pour créer une structure imbriquée correcte pour les lecteurs d’écran (h2 → h3).
  5. Variante de corps : il s’agit d’un paragraphe standard fournissant un texte d’instruction.
  6. Variante d’étiquette : ce texte décrit une entrée de formulaire.

Séparation du style et de la sémantique​

Les exemples suivants montrent comment utiliser les propriétés variant et tag pour créer une apparence visuelle différente de la structure sémantique sous-jacente du texte.

Exemple : titre de la section de sous-titre​

Ceci est utile lorsqu’un titre est sémantiquement nécessaire pour le plan du document, mais qu’il doit être visuellement atténué.

  • Variante : body-medium
  • Balise : h2
  • Justification : ce titre est sémantiquement important pour les lecteurs d’écran qui naviguent dans la structure de la page, mais l'utilisation de la variante body-medium lui permet de se fondre visuellement dans le texte du paragraphe, évitant ainsi d'attirer inutilement l'attention.

L’exemple suivant illustre ce principe dans la pratique :

Exemple : citation visuellement proéminente​

Cela s’applique à un texte qui nécessite d'avoir un impact visuel élevé sans pour autant être un titre structurel.

  • Variante : heading-3
  • Balise : blockquote
  • Justification : ici, l'épaisseur visuelle de heading-3 est appliquée à une citation pour la faire ressortir. L’utilisation de la balise blockquote permet de garantir que la citation sera lue correctement par la technologie d’assistance en tant que telle et d'éviter toute lecture incorrecte en tant que titre de section structurelle.

L’exemple suivant illustre ce principe dans la pratique :

Directives générales​

  • Maintien de la hiérarchie : utilisez toujours les titres (h1 à h6) dans un ordre imbriqué logique. h2 doit suivre h1 et h3 doit suivre h2, même si la variante visuelle est différente. Ne sautez aucun niveau de titre (par exemple, h1 directement suivi de h4).
  • Exactitude sémantique : priorisez la balise Propriété à des fins de précision sémantique. La variante est destinée à la présentation visuelle, tandis que la balise s'applique au sens.
  • Cohérence : utilisez les valeurs de variante prédéfinies de manière cohérente dans l’ensemble de l’application pour garantir un langage visuel cohérent.

Contenu​

Directives générales relatives à la rédaction​

  • Clarté et concision : rédigez clairement et allez droit au but. Évitez le jargon et les phrases trop complexes.
  • Voix active : préférez la voix active à la voix passive pour une communication plus forte et plus directe.
  • Langage clair : utilisez un langage facile à comprendre par votre public cible.
  • Cohérence terminologique : utilisez des termes cohérents pour les fonctionnalités, les actions et les concepts de l’ensemble de l’application.
  • Ton : veillez à utiliser un ton cohérent et approprié qui reflète notre marque. Pour en savoir plus, consultez la section Voix et ton.
  • Relecture : relisez toujours le texte pour détecter les erreurs grammaticales, les fautes d’orthographe et les fautes de frappe.
  • Microcopie : faites attention aux petits morceaux de texte comme les étiquettes des boutons, les messages d’erreur et les infobulles. Ils sont essentiels pour l’expérience utilisateur.

Accessibilité​

Conformité des composants​

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Instructions de rédaction​

HTML sémantique (balise Propriété) : il s'agit de l’aspect le plus critique pour l’accessibilité. Les lecteurs d’écran et autres technologies d’assistance s’appuient sur des balises HTML sémantiques (par exemple, h1-h6, p et blockquote) pour comprendre la structure et la signification du contenu. Choisissez toujours la balise la plus appropriée pour le rôle du contenu.

Hiérarchie des titres : veillez à ce que les titres aient une structure logique (par exemple, h1 suivi de h2 et non de h4). Cela permet aux utilisateurs de lecteurs d’écran de parcourir efficacement le contenu. Pour obtenir des conseils plus détaillés, reportez-vous au tutoriel W3C sur les titres.

Création de thèmes​

Par défaut, les styles du composant typographique proviennent du thème de l’application. Cependant, vous pouvez personnaliser des éléments typographiques tels que la couleur, les familles de polices et l’échelle des tailles et des poids pour répondre à des besoins spécifiques de mise en valeur de la marque.

En savoir plus sur les thèmes avec des jetons de conception