13 - La propriété font-size

Vous pouvez changer la taille de la police d'un élément web en utilisant la propriété CSS font-size. Vous pouvez définir la taille de la police en utilisant différentes unités de mesure telles que les pixels (px), les rem (rem), les ems (em), ou les pourcentages (%).

Voici quelques exemples d'utilisation de la propriété font-size :

	p {
	  font-size: 16px;
	}

	p {
	  font-size: 2em;
	}

	p {
	  font-size: 2rem;
	}

	p {
	  font-size: 120%;
	}

Dans cet exemple, nous définissons la taille de la police pour les éléments p en pixels (16px), en ems (2em), rem (2rem) et pourcentage (120%).

Comme vu dans le précédent chapitre, il existe des unités absolues et relatives. Les unités relatives pour les font-size sont les unités en em, rem et %. L'unité px est absolue.

Ainsi, une police de 16px occupera 16px de votre écran en hauteur. 2em sera deux fois la taille du parent. 2rem sera deux fois la taille du root (balise html) 120% sera 120% plus grand que la taille du parent.

Quand utiliser quelle unité ?

L'unité la plus largement utilisée sur le Web est le pixel. Il permet de fixer une taille de police et faire en sorte que celle-ci ne soit pas altérée.

Il parait logique d'utiliser l'unité de px pour la mise en page pour avoir la maîtrise du rendue. Pourtant, surtout concernant la typographie, il sera plus intéressant d'utiliser l'unité "rem".

Rem se basant sur la balise HTML, retenez qu'un rem fera, par défaut 16px. Cela aura deux avantages :

Utiliser des valeurs comme 1rem, 1.5rem, 2rem, 3rem, 4rem, etc vous permettra d'avoir une meilleur règle de proportion et ainsi, vous évitez d'utiliser tantôt 16px sur un paragraphe et 18px sur un autre.
Un plus pour l'accessibilité. Certains utilisateurs voudront changer la taille par défaut du navigateur. Si un utilisateur souhaite volontairement changer la taille par défaut, mais que votre site ne propose que des valeurs absolues, la lisibilité pourra être affaiblie.

Exemples

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .pixel {
        font-size: 16px;
      }
      .percent {
        font-size: 120%;
      }
      .em {
        font-size: 1.2em;
      }

      .rem {
        font-size: 2rem;
      }
      .conteneur {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <!-- Le texte sera toujours de 16 px -->
    <p class="pixel">Un paragraphe</p>

    <!-- Le texte sera 120% plus grand que conteneur (40px x 1120%) -->
    <div class="conteneur">
      <p class="percent">Un paragraphe</p>
    </div>

    <!-- Le texte sera 1.2x plus grand que conteneur (40px x 1.2) (idem que pourcentage) -->
    <div class="conteneur">
      <p class="em">Un paragraphe</p>
    </div>

    <!-- Le texte sera 2x plus grand la taille de base de l'html (16px x 2) -->
    <div class="conteneur">
      <p class="rem">Un paragraphe</p>
    </div>
  </body>
</html>