Régler la typographie

Des titres trop discrets ou des paragraphes trop serrés rendent une page difficile à parcourir, même si son contenu est pertinent. Dans cette leçon, vous allez régler la typographie de la page de présentation de l’atelier de jardinage afin que les informations importantes se repèrent facilement.

Vous avez déjà relié une feuille CSS à une page HTML et appris à cibler ses éléments. Les exemples ci-dessous reprennent ces bases : vous travaillerez dans style.css et ciblerez notamment les éléments h1, p et les classes de la page.

Choisir une famille de polices

La propriété font-family indique quelle police utiliser pour afficher le texte. Comme la police demandée peut être absente de l’appareil du visiteur, vous pouvez proposer plusieurs choix : le navigateur essaie chaque nom dans l’ordre, puis utilise une famille générique en dernier recours. Placez entre guillemets les noms de polices composés de plusieurs mots.

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1,
h2 {
    font-family: Georgia, "Times New Roman", serif;
}

Dans cet exemple, le texte courant utilise une police sans empattement, tandis que les titres disposent d’une famille avec empattements. Si Georgia n’est pas disponible, le navigateur essaie Times New Roman, puis une police générique à empattements. Cette liste de remplacement rend le résultat moins dépendant d’un seul système.

Régler taille, épaisseur et interligne

font-size règle la taille du texte. L’unité rem exprime une taille relative à la taille de base du document : elle permet d’agrandir ou de réduire un texte sans fixer sa taille en pixels. font-weight règle son épaisseur ; les valeurs numériques courantes vont de 100 à 900, et 700 correspond généralement à un gras marqué.

line-height règle la hauteur de ligne, donc l’espace vertical réservé à chaque ligne de texte. Une valeur sans unité, comme 1.6, est un multiplicateur de la taille du texte : pour une taille de 1rem, chaque ligne occupe une hauteur de 1.6rem. Un interligne généreux aide à suivre les paragraphes, surtout lorsqu’ils s’étendent sur plusieurs lignes.

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

p {
    font-size: 1rem;
    line-height: 1.6;
}

Ces règles établissent une hiérarchie : le titre principal est plus grand que les sous-titres, et les paragraphes conservent une taille régulière avec davantage d’espace entre les lignes. Vous pouvez ajuster les valeurs après avoir observé la page dans le navigateur ; vérifiez en particulier qu’un titre long reste facile à lire.

Aligner et décorer le texte

text-align choisit l’alignement horizontal du texte : left le place à gauche, center au centre et right à droite. Pour des paragraphes longs, privilégiez généralement l’alignement à gauche, qui facilite le repérage du début de chaque ligne. Réservez le centrage à un titre ou à une courte introduction si cela sert la présentation.

text-decoration ajoute ou retire une décoration, comme le soulignement. Vous pouvez l’utiliser pour garder les liens soulignés, ce qui permet de les distinguer du texte ordinaire. Ne supprimez pas cette indication sans prévoir un autre moyen clair de reconnaître les liens.

.introduction {
    text-align: center;
}

a {
    text-decoration: underline;
}

Appliquez la classe introduction au paragraphe qui présente brièvement l’atelier, plutôt qu’à tous les paragraphes. La règle a conserve le soulignement des liens, notamment celui qui permet de contacter l’atelier. Ainsi, chaque réglage correspond à un besoin précis de la page.

Exemple complet pour la page de l’atelier

Voici une feuille de style complète pour les réglages typographiques étudiés. Elle suppose que votre document contient un titre principal, des sous-titres, un paragraphe d’introduction portant la classe introduction, des paragraphes de contenu et un lien de contact ; l’attribut href de la feuille externe reste celui utilisé lors de la leçon sur la liaison du fichier CSS.

/* Typographie de la page de l’atelier */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

h1,
h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.5rem;
}

p {
    text-align: left;
}

.introduction {
    text-align: center;
}

a {
    text-decoration: underline;
}

En ouvrant la page, vous devez voir un titre principal plus imposant, des sous-titres visuellement distincts et des paragraphes dont les lignes sont suffisamment espacées. L’introduction est centrée, tandis que le reste du texte demeure aligné à gauche ; les liens restent soulignés. Si un changement ne semble pas apparaître, vérifiez d’abord que vous avez modifié le bon fichier et que la page chargée utilise bien cette feuille de style.

Quand plusieurs règles semblent entrer en conflit, ne cherchez pas encore à résoudre le problème avec les mécanismes de priorité : la cascade, la spécificité et l’héritage seront étudiés dans la prochaine leçon. Pour l’instant, gardez des règles courtes, ciblez précisément les textes concernés et vérifiez chaque résultat dans le navigateur. Vous pourrez ensuite regrouper les valeurs répétées lorsque vous aborderez les variables CSS.

À retenir

• font-family accepte une liste de polices de remplacement terminée par une famille générique.
• font-size, font-weight et line-height règlent respectivement la taille, l’épaisseur et l’espacement vertical des lignes.
• text-align règle l’alignement ; utilisez le centrage avec mesure et privilégiez souvent l’alignement à gauche pour les paragraphes.
• text-decoration permet notamment de garder les liens soulignés et facilement repérables.
• Testez un changement à la fois dans le navigateur pour vérifier son effet sur la lisibilité.

Dans la prochaine leçon, vous apprendrez pourquoi certaines règles CSS prennent le dessus sur d’autres et comment l’héritage influence le style des éléments.