Tutoriel sur la taille de la police CSS - Comment modifier la taille du texte en HTML

Utilisez la font-sizepropriété CSS pour déterminer la taille de votre texte.

.container { font-size: 33px; } 

Cette propriété prend plusieurs types de valeurs:

  • Mots-clés (mots-clés de taille absolue et de taille relative),
  • Longueur (comme les pixels (px) et les unités em), et
  • Pourcentages.
.container { font-size: xx-large; } 

La question est: quel type de valeur choisir et pourquoi?

C'est la question abordée dans cet article. Il vous montrera comment utiliser la font-sizepropriété et les différences entre ses nombreuses valeurs. Ainsi, la prochaine fois que vous devrez modifier la taille de la police de votre texte, vous saurez quelle valeur atteindre.

Valeurs des mots clés

Il existe deux types de valeurs de mots-clés que vous pouvez utiliser avec la taille de la police: absolute-sizeet les relative-sizemots - clés. Commençons par l'absolu.

Mots-clés de taille absolue

Le code ci-dessous utilise le mot-clé smallde taille absolue pour dimensionner le texte HTML.

.childElement { font-size: small; } 

Il existe d'autres options de mots clés de taille absolue parmi lesquelles choisir:

  • xx-petit
  • x-petit
  • petit
  • moyen
  • grand
  • très grand
  • xx-large
  • xxx-grand

La valeur d'un mot-clé de taille absolue est déterminée par la taille de police par défaut du navigateur. En règle générale, cette taille est moyenne.

Mots-clés de taille relative

Les mots-clés de taille relative sont une autre option de mot-clé à considérer. Vous avez le choix entre deux: smalleret larger.

.parentElement { font-size: smaller; } 

La taille de police d'un élément avec un mot-clé de taille relative est relative - plus grande ou plus petite - à la taille de police de son parent.

En d'autres termes, la taille de la police de l'élément parent affecte la taille de la police de l'élément enfant, comme vous pouvez le voir ci-dessous.

Dans cet exemple, le mot clé relative-size smallerest appliqué à l'élément enfant et la valeur de taille absolue largeest appliquée à l'élément parent.

Valeurs de longueur

font-sizeaccepte plusieurs valeurs de longueur différentes. Nous allons explorer trois d'entre eux: les pixels (px) et les unités em et rem. Malgré votre sélection, la valeur de longueur que vous utilisez doit être positive.

.parentElement { font-size: 60px; } 

Pixels

Les pixels sont une unité de longueur absolue. Cela signifie qu'ils ne sont pas affectés par d'autres éléments, comme l'élément parent ou la taille de la fenêtre.

En conséquence, les pixels sont précis: vous définissez le nombre exact de pixels dont vous avez besoin sur un élément et c'est généralement ce que vous obtenez. Cependant, il peut y avoir de légères différences entre les navigateurs.

Notez que les éléments enfants utilisent pixelset ont la même taille de police dans l'exemple de code ci-dessus.

EM

Bien que vous puissiez considérer les pixels comme fixes, considérez les valeurs em comme des variables.

C'est parce que les valeurs em sont une unité de longueur relative. La taille de police d'un élément qui utilise une valeur em est relative à la taille de police de son parent.  

Cependant, disons que vous n'avez pas défini de taille de police pour l'élément parent. Vous n'en avez pas non plus mis un ailleurs plus haut dans le DOM. Dans ce cas, la valeur em est calculée en utilisant la valeur par défaut du navigateur (souvent 16px).

Rendons cette idée concrète.

Supposons que l'élément parent est défini sur 30px et que l'élément enfant est défini sur 2em. Ensuite, la taille de la police rendue de l'élément enfant est 60px (2 x 30px = 60px). Vous pouvez voir ce scénario dans le code ci-dessous.

Les valeurs em peuvent être problématiques en raison de leur effet de composition, ce qui est démontré dans l'exemple suivant.

Lorsque plusieurs éléments utilisent des valeurs em imbriquées les uns dans les autres, les valeurs de taille de police se composent: elles deviennent de plus en plus grandes. C'est l'effet cumulatif en action.

REM

Entrez les valeurs rem, qui ont été créées pour traiter le problème de composition des ems.

Rappelez-vous que les valeurs em sont relatives à l'élément parent. En revanche, les valeurs rem sont relatives à la taille de police de l'élément racine (html).  

Cela signifie que vous pouvez appliquer une valeur rem à un élément, et il ne sera pas affecté par la taille de police du parent. Cela élude l'effet combiné que nous avons connu ci-dessus.

Cet exemple utilise la font-sizepropriété avec une valeur rem.

Voici un point clé de l'exemple ci-dessus: la taille de police de l'élément parent n'affecte pas la taille de police des éléments enfants.

Pourcentages

Les pourcentages offrent encore un autre moyen de définir la taille de police par rapport à la taille de police de l'élément parent.

L'élément avec le pourcentage fait référence à son élément parent pour déterminer sa taille de police. La valeur en pourcentage doit être positive.

Voici un exemple.

Comme vous pouvez le voir, en ce qui concerne la taille de la police, vous disposez de nombreuses options pour répondre à vos besoins.

J'écris sur l'apprentissage de la programmation et les meilleures façons de s'y prendre sur amymhaddad.com. Jetweetégalementsur la programmation, l'apprentissage et la productivité: @amymhaddad.