Quelques rappels sur les fonts et les em

  • Différences entre em et rem : l’unité em est relative à son parent contrairement à rem qui est relative à la balise html
  • Mettre font-size: 100% sur l’élément html (et non 1em). Normalement c’est inutile mais il s’agit en fait d’un correctif pour un bug d’Internet Explorer (de 5 à 7), bug qui rend « anarchique » le redimensionnement du texte à la volée dans ce navigateur. Il a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentage ne les précède.
  • Ne pas avoir peur d’utiliser du texte un peu gros pour votre corps de texte, et ne pas trop chercher à « minimiser » les textes « subalternes » en les ramenant à des tailles ridicules (pas en dessous de 80%)

Points sur la propriété line-height :

  • Elle prend soit un nombre (valeur sans unité qui correspond à un coefficient multiplicateur de la taille de fonte utilisée) soit une longueur (valeur utilisée pour calculer la hauteur de la boîte de la ligne)
  • Elle fonctionne mieux si on utilise un facteur / multiplicateur, ce qui signifie pas d’unité, mais seulement un nombre qui multiplie la taille de police.
  • Il est donc préférable de ne pas de mettre d’unité à cette propriété pour éviter les problèmes des cascades.

NB : A la place de 1.2 mettre la valeur souhaitée (1.2 est généralement la valeur par défaut des navigateurs mais selon la police utilisée)

  • Pour du texte, une line-height à 1.4 fois la taille du texte est recommandée.
  • Pour les titres, une line-height à 1.2 est recommandée.

Sources :