Typographie

Présentation

La typographie contribue au sens général de l'organisation et de la finalité des expériences liées aux produits en établissant la structure hiérarchique et les valeurs esthétiques dont les interfaces utilisateur ont besoin pour être compréhensibles et conviviales.

Ces principes typographiques fondamentaux sont implémentés dans les applications utilisant le composant typographique Jutro. Le composant typographique utilise une propriété variant pour contrôler le style visuel (par exemple, heading-1 et body-medium) et une propriété tag pour garantir le code HTML sémantique correct (par exemple, h1 et p).

Ces instructions détaillent les principaux attributs de la typographie Jutro, notamment l'échelle et le style.

Échelle de caractères

L’échelle de caractères Jutro utilise un système de grille de 8 points, la plupart des tailles étant basées sur un intervalle de 4. Les tailles disponibles sont les suivantes : 56, 48, 40, 32, 24, 20, 16, 14 et 12.

Hauteur de ligne

La hauteur de ligne, parfois appelée interlignage, est la distance verticale entre les lignes de texte. Une hauteur de ligne appropriée est essentielle pour la lisibilité, car elle évite que le texte ne paraisse trop encombré ou trop clairsemé.

La typographie Jutro utilise deux valeurs principales de hauteur de ligne : 1,25 (ou 125 %) pour les titres et 1,5 (ou 150 %) pour le corps du texte. Ces valeurs garantissent une expérience de lecture confortable dans différentes tailles de texte. Un interlignage plus strict est utilisé pour les lignes de texte plus courtes (titres), tandis qu’un interlignage plus généreux est appliqué aux blocs de texte plus longs (corps du texte).

Police open source

Jutro utilise la police open source Source Sans Pro comme police principale. Source Sans Pro est conforme aux directives d'accessibilité du contenu Web et s'adapte aux paramètres de police personnalisés des navigateurs.

Polices

Une police de caractères peut inclure différents styles et épaisseurs, par exemple gras, normal et italique. Ces différences sont utilisées pour transmettre la structure et le sens aux utilisateurs. Par exemple, les polices en gras distinguent les titres du texte (corps) du paragraphe. Le gras peut également être utilisé dans un paragraphe pour mettre en évidence des mots ou des groupes de mots clés. De même, les polices en italique sont principalement utilisées pour indiquer des titres et des noms dans des mots ou des objets particuliers, ce qui leur permet de se démarquer du reste de la phrase.

Jutro propose les options de police suivantes destinées à une utilisation générale.

Source Sans Pro Regular

Source Sans Pro Italic

Source Sans Pro Bold

Source Sans Pro Semibold

Source Sans Pro Semibold Italic

Implémentation avec des jetons de conception

La typographie Jutro repose sur des jetons de conception. Ces jetons, qui définissent la taille de police, l’épaisseur et la hauteur des lignes, sont utilisés par le composant typographique pour garantir la cohérence. Cette approche permet de créer des thèmes et de personnaliser les styles typographiques pour répondre à des besoins spécifiques en matière de valorisation de la marque.

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

Exemple de guide typographique

Les exemples de mise en page suivants sont fournis à titre de référence pour la typographie Jutro dans les applications (applications de bureau et mobiles) :

Bureau

Portable

Meilleures pratiques

• Gérez une hiérarchie typographique pertinente et cohérente basée sur la structure du contenu, y compris des éléments tels que les titres, les sous-titres, le texte par défaut (principal) et le texte des étiquettes.
• Utilisez un nombre minimal de tailles, d’épaisseurs et de couleurs de police. Dans la plupart des cas, une hiérarchie de tailles simple est suffisante. Par exemple, il peut s’agir d’un en-tête, d’une taille par défaut (principale), d’une taille secondaire pour les textes moins importants et d’une troisième taille/taille de légende.
• Pour une lisibilité optimale, partez sur une longueur de ligne comprise entre 60 et 80 caractères. La longueur finale de la ligne est déterminée par plusieurs facteurs, notamment la police de caractères, la taille des caractères et la largeur des marges.
• Pour garantir la lisibilité et l’accessibilité, utilisez une taille minimale de 16 px pour le corps du texte principal et les entrées de texte. Cela permet de garantir une bonne lisibilité sur les appareils mobiles et d'empêcher les navigateurs d’avoir à effectuer un zoom forcé sur les champs de saisie.
• Veillez à ce que le texte secondaire, utilisé pour les éléments tels que les étiquettes et les légendes de niveau inférieur, soit affiché avec une taille inférieure de deux points par rapport au texte principal.
• Ajustez la taille des caractères en fonction de la fonction principale de la page :
  • Pour les pages contenant beaucoup de texte, utilisez des tailles de caractères plus grandes afin d’améliorer la lisibilité pour les utilisateurs qui passeront beaucoup de temps à lire.
  • Pour les pages à forte interaction, des tailles de caractères plus petites peuvent suffire et contribuer à compacter visuellement les écrans contenant beaucoup de données.
• Utilisez des polices de caractères plus grandes pour tout ce qui doit être visible d'un seul coup d'œil.
• Évitez d’utiliser du texte en majuscules ou utilisez-le avec parcimonie, car il présente des problèmes de lisibilité.
• Visualisez toujours les conceptions sur un appareil réel que les utilisateurs pourraient utiliser de préférence.
• Identifiez les tailles de caractères trop petites sur un téléphone portable au début du processus de conception.
• Concevez la typographie de manière à ce qu’elle soit lisible même dans des conditions dégradées.

Texte et iconographie

Le texte et les icônes sont fréquemment combinés pour améliorer la clarté et fournir un contexte visuel. Voici quelques exemples fréquents de cette combinaison :

Actions et navigation

• Liens avec icônes
• Boutons avec icônes
• Éléments de navigation latérale (icône et nom)
• Sélecteur d’application (icône et nom de l’application)
• Avatar avec nom de profil

Éléments de formulaire et affichage de données

• Étiquettes d’entrée avec icônes d’information
• Balises
• Éléments de menu dans les listes déroulantes à sélection multiple
• Résultats de recherche avec icônes de catégorie

Statut et commentaires

• Messages de validation intégrés avec icônes de statut
• Chargeurs intégrés avec messages texte
• Messages toast et de notification
• Badges de notification (icône avec une valeur numérique)
• Infobulles associées aux icônes

Réactivité et adaptabilité

La typographie Jutro est conçue de façon à être adaptative, en proposant une variété de tailles pour répondre aux besoins des applications des entreprises et du grand public sur tous les appareils. Les applications d'entreprise, par exemple, exigent une plus grande densité de données et bénéficient d'une typographie plus petite qui offre plus d’espace à l’écran.

Accessibilité

Validée conformément aux directives d'accessibilité WCAG 2.1 AA applicables pour ce composant particulier. Autrement dit, la typographie Jutro peut être utilisée :

• sans souris (uniquement à partir du clavier).
• avec des technologies d'assistance, notamment des lecteurs d'écran, des logiciels de grossissement de caractères et des dispositifs d'affichage en braille.
• indépendamment du son, de la couleur, des animations ou de la temporisation.

Meilleures pratiques d'accessibilité

• Évitez de modifier le contenu lorsque le focus est appliqué à un élément.
• Veillez à ce que tous les éléments de texte puissent être parcourus de manière logique au clavier.
• N’utilisez pas de texte stylisé comme substitut à un lien, ou inversement. Les lecteurs d’écran traitent ces éléments différemment, ce qui peut dérouter les utilisateurs.

Pour obtenir des instructions de rédaction spécifiques, reportez-vous au guide d’utilisation du composant typographique.