Guide de style - Typographie
Usages
Les règles d'usage typographiques sont importantes aussi bien du point de vue du confort de lecture que du respect de la sémantique.
Longueur des lignes
Les lignes trop longues sont difficiles à lire et réduisent l'attention. Afin de faciliter la lecture, il est recommandé d'avoir des textes qui utilisent maximum 8 colonnes de la grille.
Hiérarchisation
La hiérarchisation des balises de titres (Hn) est un point crucial, aussi bien en matière de référencement que d'accessibilité, et même de lisibilité de la page pour l'utilisateur. Le H1 doit toujours être le premier titre de la page, auquel ne peut faire suite qu'un H2. Un H2 ne peut à son tour se subdiviser qu'en H3, et ainsi de suite.
![[TODO Edito]](img/typo/Typo-hierarchisation-DO.png)
A faire :
Un H1 est le titre de page, et le contenu de la page est subdivisé grâce à deux H2
![[TODO Edito]](img/typo/Typo-hierarchisation-DONT.png)
A ne pas faire :
Le premier titre est un H2
le H1 est en milieu de page
Le H3 vient directement après le H1
Alignement des textes
Deux modes de justification du texte sont permises : ferré à gauche et centré.
![[TODO Edito]](img/typo/Typo-alignement-DO.png)
A faire :
Texté ferré à gauche
Texte centré
![[TODO Edito]](img/typo/Typo-alignement-DONT.png)
A ne pas faire :
Aligné à droite
Justifié
Retour à la ligne
Les retours à la ligne forcés sont à éviter, tout comme la césure dans un mot.
![[TODO Edito]](img/typo/Typo-retour-DO.png)
A faire :
Texte déployé de façon naturelle
![[TODO Edito]](img/typo/Typo-retour-DONT.png)
A ne pas faire :
1. Césure
2. Retour à la ligne forcé
Capitales
L'emploi des lettres capitales n'est pas souhaitable hormis dans certains cas particuliers (surtitres et acronymes), car elles ne sont pas faciles à lire.
![[TODO Edito]](img/typo/Typo-capitales-DO.png)
A faire :
Texte en bas de casse (sauf surtitre et acronyme)
![[TODO Edito]](img/typo/Typo-capitales-DONT.png)
A ne pas faire :
Texte en capitales
Couleur de texte
Les classes utilitaires ne doivent pas être utilisées de façon à contrevenir au guide de style. Par exemple, les couleurs des sous-titres Hn ne doivent pas être modifiées.
A faire :
Texte courant et sous-titres conformes aux couleurs du guide de style
A ne pas faire :
Couleurs de sous-titres surchargées
Graisse modifiée
Accessibilité
Afin de permettre aux utilisateurs malvoyants d'augmenter la taille du texte seul de 200%, le texte et ses éléments conteneurs ne doivent comporter que des tailles relatives (rem, %, em), et donc non pas exprimées en px.
Par ailleurs, un contraste suffisant est à respecter entre le texte et son fond, en tenant compte de la font-size. Certains outils comme color.review permettent de mesurer facilement ce contraste.