Typographie

Fonctionnalités Web : font-size rem unité em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() et clamp() Unités de la fenêtre d'affichage

Bonnes pratiques générales

  • Utilisez des nombres sans unité pour line-height (par exemple, 1.5) afin de garantir un scaling relatif lors de l'héritage de la taille de police.
  • Utilisez overflow-wrap: break-word (ou anywhere) pour contenir les URL longues.
  • À ÉVITER : n'utilisez pas px pour la taille de police. Privilégiez rem pour respecter les préférences de taille de police du navigateur de l'utilisateur (taille de police racine) ou em/pourcentages pour un dimensionnement contextuel.

Lisibilité

  • Évitez les longues lignes de texte : limitez les blocs de paragraphe à une largeur maximale de 80 caractères.
  • Évitez les "rivières" d'espaces blancs : évitez text-align: justify, car cela peut rendre le texte plus difficile à lire. Si vous devez l'utiliser, combinez-le avec hyphens: auto pour éviter un espace blanc excessif entre les mots.
  • N'utilisez pas de polices ornées : évitez les polices cursives pour le contenu principal.
  • N'utilisez pas de texte tout en majuscules pour mettre en avant un élément : privilégiez le gras pour une mise en avant visuelle, et utilisez <em>/<strong> lorsque la mise en avant est sémantique.
  • Limitez l'accentuation globale : l'accentuation perd de son sens lorsqu'elle est omniprésente. Ne l'appliquez que là où elle modifie la façon dont le contenu doit être lu.
  • Prenez en compte les préférences de zoom des utilisateurs : permettez aux utilisateurs de redimensionner le texte jusqu'à 200 % sans perte de contenu ni de fonctionnalité.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Retour automatique à la ligne

  • Utilisez text-wrap: balance pour les titres équilibrés et les contenus de type titre (par exemple, <th>).
  • Utilisez text-wrap: pretty pour le corps de texte long (paragraphes, citations, etc.).
  • Utilisez text-wrap: balance ou text-wrap: pretty de manière délibérée. NE L'APPLIQUEZ PAS sur *, car cela a un coût en termes de performances.
  • Évitez d'utiliser text-wrap: balance sur les éléments avec une zone visible (arrière-plans, bordures, ombres, etc.), car cela ne modifie pas la largeur du conteneur, mais seulement la façon dont le texte est renvoyé à la ligne dans cette largeur. Cela peut laisser un espace vide à la fin du conteneur, ce qui n'est généralement pas souhaitable.

Typographie responsive

  • À FAIRE : Combinez des unités relatives à la fenêtre d'affichage et à la police dans clamp() pour obtenir des tailles de police qui s'adaptent à la taille de la fenêtre d'affichage tout en restant dans la plage souhaitée. Par exemple, clamp(2rem, 1rem + 5vw, 4rem). Ajustez la proportion d'unités relatives à la fenêtre d'affichage et à la police pour contrôler la vitesse à laquelle la taille de la police change.
  • À ÉVITER : N'utilisez pas vw seul pour la taille de police sans clamp(), car cela peut rendre le texte trop petit ou trop grand sur les écrans extrêmes.