Mise en forme du texte et unités CSS

Parmi les propriétés les plus importantes pour mettre en forme le texte figurent la taille de la police et la hauteur de ligne.

Le CSS dispose de plusieurs unités différentes pour exprimer une longueur. La taille de la police se compose d'un nombre suivi d'une unité de longueur, par exemple 10px.

L'unité de longueur peut être : px, pt, em, rem, vw, vh, vmin, vmax.

1h1 {
2  font-size: 28px;
3}

Un pixel (px) est une unité de mesure couramment utilisée en conception web, qui mesure environ 0,26 mm. C'est une unité absolue, ce qui signifie que sa valeur est fixe en CSS, même si le navigateur la met à l'échelle quand on zoome sur la page. Dans la vie de tous les jours, nous rencontrons aussi d'autres unités absolues, comme les centimètres (cm) ou les millimètres (mm).

De nos jours, en conception web, on utilise de plus en plus les unités relatives, qui permettent aux éléments de s'adapter en fonction d'autres propriétés de longueur. Ainsi, les éléments de la page s'adaptent mieux aux différents écrans et résolutions.

Les unités relatives les plus populaires sont :

• em - une unité relative à la valeur font-size de l'élément (2em signifie une taille de police deux fois supérieure à la taille de police actuelle de l'élément).
• rem - une unité relative à la font-size de l'élément racine (en général l'élément html).
• vh - 1vh équivaut à 1 % de la hauteur de la fenêtre du navigateur (viewport).
• vw - 1vw équivaut à 1 % de la largeur de la fenêtre du navigateur (viewport).

L'utilisation d'unités relatives permet de créer des mises en page réactives et flexibles qui s'adaptent à différents appareils et tailles d'écran, garantissant une meilleure expérience utilisateur.

La propriété line-height en CSS sert à spécifier la hauteur d'une ligne de texte, c'est-à-dire l'espacement entre des lignes de texte consécutives dans un élément. Autrement dit, c'est l'espacement entre les lignes de base de deux lignes de texte adjacentes. Cette propriété influe sur la lisibilité du texte ainsi que sur l'apparence générale d'un bloc de texte sur la page.

La valeur de line-height peut être spécifiée comme :

• Une unité absolue, par exemple des pixels (px) ou des points (pt).
• Une unité relative, par exemple em, rem ou un pourcentage (%).
• Un nombre sans unité qui précise le rapport entre la hauteur de ligne et la taille de la police. Par exemple, line-height: 1.5 signifie que la hauteur de ligne sera de 1,5 fois la taille de police actuelle.

Voici un exemple d'utilisation de la propriété line-height :

1p {
2  font-size: 16px;
3  line-height: 1.5;
4}

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>CSS - Unités et mise en forme du texte</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Unités CSS</h1>
12
13        <div class="section">
14            <h2>Unités absolues (px)</h2>
15            <p class="absolute">Ce texte a une taille de 16px et une line-height de 24px.</p>
16            <p class="absolute-large">Ce texte a une taille de 20px.</p>
17        </div>
18
19        <div class="section">
20            <h2>Unités relatives (em)</h2>
21            <p class="relative-em">Ce texte utilise les unités em (1.2em).</p>
22            <p class="relative-em-large">Ce texte a une taille de 1.5em.</p>
23        </div>
24
25        <div class="section">
26            <h2>Unités relatives (rem)</h2>
27            <p class="relative-rem">Ce texte utilise les unités rem (1.1rem).</p>
28            <p class="relative-rem-large">Ce texte a une taille de 1.4rem.</p>
29        </div>
30
31        <div class="section">
32            <h2>Unités de fenêtre (vw, vh)</h2>
33            <p class="viewport">Ce texte a une taille de 3vw (3% de la largeur de la fenêtre).</p>
34        </div>
35
36        <div class="section typography">
37            <h2>Propriétés typographiques</h2>
38            <p class="bold">Texte en gras (font-weight: bold)</p>
39            <p class="italic">Italique (font-style: italic)</p>
40            <p class="uppercase">lettres majuscules (text-transform: uppercase)</p>
41            <p class="letter-spacing">T e x t e   e s p a c é</p>
42            <p class="different-font">Police différente (Georgia, serif)</p>
43        </div>
44    </div>
45</body>
46</html>

Dans l'exemple ci-dessus, la hauteur de ligne des éléments paragraphe est définie à 1,5 fois la taille de la police (16px). Par conséquent, l'espacement entre les lignes sera de 24px (16px * 1.5).

Une valeur de line-height bien choisie peut considérablement améliorer le confort de lecture du texte pour les utilisateurs ; il vaut donc la peine d'expérimenter avec différentes valeurs pour obtenir l'effet optimal.

Mise en forme du texte

La mise en forme du texte en CSS comprend diverses propriétés que l'on peut personnaliser :

• Police : la propriété font-family permet de spécifier quelle police utiliser.
• Taille de police : font-size précise la taille du texte.
• Style de police : font-style contrôle si le texte doit être en italique ou non.
• Graisse de police : font-weight définit l'épaisseur avec un mot (normal, bold) ou un nombre de 100 à 900 : 400 correspond au texte normal, et 700 au gras standard, c'est-à-dire la même chose que bold.
• Couleur du texte : color permet de spécifier la couleur du texte.
• Alignement du texte : text-align contrôle l'alignement du texte à gauche, à droite, au centre ou justifié.
• Espacement des lettres : letter-spacing permet de contrôler l'espace entre les lettres.
• Espacement des lignes : line-height permet de contrôler l'espace entre les lignes de texte.
• Transformations du texte : text-transform peut être utilisé pour contrôler la casse, comme uppercase, lowercase ou capitalize.

Tu peux écrire plusieurs propriétés de police d'un coup avec le raccourci font. Le style et la graisse viennent en premier, dans n'importe quel ordre, puis la taille, et la police en dernier - la taille et la police sont obligatoires :

1p {
2  font: italic bold 16px serif;
3}

Ce paragraphe sera en italique, en gras, en 16px et dans une police à empattements - une seule ligne au lieu de quatre déclarations.

Exercice : Mise en forme du texte et unités CSS

Dans cet exercice, tu apprendras à mettre en forme le texte à l'aide de diverses unités CSS et à utiliser la propriété line-height pour contrôler la hauteur de ligne du texte.

Étape 1 : Créer une structure de document HTML de base

D'abord, crée un nouveau fichier HTML et ajoute une structure de document HTML de base.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Mise en forme du texte</title>
7</head>
8<body>
9    <main>
10        <!-- Place ici le contenu de ta page -->
11    </main>
12</body>
13</html>

Étape 2 : Ajouter un titre et un paragraphe

Ajoute un titre et un paragraphe de texte que tu vas mettre en forme.

1<main>
2    <h1>Mise en forme du texte en CSS</h1>
3    <p>La propriété <code>line-height</code> en CSS sert à spécifier la hauteur d'une ligne de texte, c'est-à-dire l'espacement entre des lignes de texte consécutives dans un élément. Cette propriété influe sur la lisibilité du texte ainsi que sur l'apparence générale d'un bloc de texte sur la page.</p>
4</main>

Étape 3 : Ajouter des styles CSS

Ajoute une feuille de style interne dans la section <head> et commence par définir des styles de base pour le titre et le paragraphe.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 28px;
8            color: darkblue;
9        }
10        p {
11            font-size: 16px;
12            line-height: 1.5;
13        }
14    </style>
15</head>

Étape 4 : Expérimenter avec différentes unités

Essaie d'appliquer différentes unités aux propriétés font-size et line-height pour voir comment la taille du texte et l'espacement changent.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 2em; /* Changé en unité em */
8            color: darkblue;
9        }
10        p {
11            font-size: 1rem; /* Changé en unité rem */
12            line-height: 1.8; /* Hauteur de ligne augmentée */
13        }
14    </style>
15</head>

Étape 5 : Ajouter des paragraphes supplémentaires

Ajoute plusieurs paragraphes supplémentaires pour mieux voir l'effet de la propriété line-height.

1<main>
2    <h1>Mise en forme du texte en CSS</h1>
3    <p>La propriété <code>line-height</code> en CSS sert à spécifier la hauteur d'une ligne de texte, c'est-à-dire l'espacement entre des lignes de texte consécutives dans un élément. Cette propriété influe sur la lisibilité du texte ainsi que sur l'apparence générale d'un bloc de texte sur la page.</p>
4    <p>La valeur de <code>line-height</code> peut être spécifiée comme une unité absolue, une unité relative ou un nombre sans unité qui précise le rapport entre la hauteur de ligne et la taille de la police.</p>
5    <p>Une valeur de <code>line-height</code> bien choisie peut considérablement améliorer le confort de lecture du texte pour les utilisateurs ; il vaut donc la peine d'expérimenter avec différentes valeurs pour obtenir l'effet optimal.</p>
6</main>

Étape 6 : Ajouter des propriétés de mise en forme du texte supplémentaires

Ajoute d'autres propriétés de mise en forme du texte telles que la couleur, l'alignement, l'espacement des lettres et les transformations du texte.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 2em;
8            color: darkblue;
9            text-align: center; /* Alignement centré */
10        }
11        p {
12            font-size: 1rem;
13            line-height: 1.8;
14            color: #595959; /* Couleur du texte */
15            letter-spacing: 0.05em; /* Espacement des lettres */
16            text-transform: capitalize; /* Mise en majuscule */
17        }
18    </style>
19</head>

Résultat

Après avoir terminé toutes les étapes, ton fichier HTML devrait ressembler à ceci :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Mise en forme du texte</title>
7    <style>
8        body {
9            font-family: Arial, sans-serif;
10        }
11        h1 {
12            font-size: 2em;
13            color: darkblue;
14            text-align: center;
15        }
16        p {
17            font-size: 1rem;
18            line-height: 1.8;
19            color: #595959;
20            letter-spacing: 0.05em;
21            text-transform: capitalize;
22        }
23    </style>
24</head>
25<body>
26    <main>
27        <h1>Mise en forme du texte en CSS</h1>
28        <p>La propriété <code>line-height</code> en CSS sert à spécifier la hauteur d'une ligne de texte, c'est-à-dire l'espacement entre des lignes de texte consécutives dans un élément. Cette propriété influe sur la lisibilité du texte ainsi que sur l'apparence générale d'un bloc de texte sur la page.</p>
29        <p>La valeur de <code>line-height</code> peut être spécifiée comme une unité absolue, une unité relative ou un nombre sans unité qui précise le rapport entre la hauteur de ligne et la taille de la police.</p>
30        <p>Une valeur de <code>line-height</code> bien choisie peut considérablement améliorer le confort de lecture du texte pour les utilisateurs ; il vaut donc la peine d'expérimenter avec différentes valeurs pour obtenir l'effet optimal.</p>
31    </main>
32</body>
33</html>

Tu disposes maintenant d'une page web complète avec du texte mis en forme à l'aide de diverses unités CSS et de la propriété line-height. Tu peux continuer à expérimenter en ajoutant d'autres styles et en modifiant les valeurs pour mieux comprendre le fonctionnement du CSS.