Module 7 : Texte et variables CSS

95 % du web, c'est du texte

Ferme les yeux et repense aux dix derniers sites que tu as visités. Des articles, des menus, des boutons, des descriptions de produits. Du texte, partout.

Alors forcément, ce qui sépare un site amateur d'un site professionnel, ce n'est presque jamais l'image de fond. C'est la typographie : la police, la taille, l'espace entre les lignes. Trois réglages, et la même page passe de « bof » à « waouh ».

Bonne nouvelle : ces trois réglages tiennent en trois propriétés CSS. C'est le programme de ce module.

Trois familles, trois ambiances

Toutes les polices du monde se rangent dans quelques grandes familles. Trois te suffiront pour longtemps :

• Serif — chaque trait se termine par un petit pied, l'empattement. C'est la police des livres et des journaux. Elle respire le sérieux et se lit très bien sur de longs textes.
• Sans-serif — pas de pied, des traits nets. Née pour les écrans, c'est le choix par défaut de presque tous les sites modernes.
• Monospace — chaque lettre occupe exactement la même largeur, comme sur une vieille machine à écrire. On la réserve au code : les colonnes s'alignent, et on repère tout de suite un caractère en trop.

Tu ne choisis pas une police au hasard : tu choisis une ambiance.

Tu proposes, le navigateur dispose

Voilà le truc qui surprend tout le monde : quand tu écris font-family: Georgia;, tu ne donnes pas un ordre. Tu fais une demande.

Si la personne qui visite ta page n'a pas Georgia installée sur sa machine, le navigateur hausse les épaules et affiche sa police par défaut. Ta belle mise en page tombe à l'eau.

D'où l'astuce des pros : on écrit une pile de polices, séparées par des virgules, de la plus souhaitée à la plus universelle.

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

Le navigateur essaie la première, puis la deuxième, et finit toujours par la famille générique — ici serif. Celle-là existe partout, sur tous les appareils. C'est ton filet de sécurité, et elle se met toujours en dernier.

Laisser respirer

Deux réglages transforment un pavé indigeste en texte agréable :

• font-size, la taille des caractères. Un titre plus gros qu'un paragraphe, ce n'est pas de la décoration : c'est ce qui permet à l'œil de comprendre la page avant de la lire.
• line-height, l'espace entre les lignes. Un texte trop serré fatigue, un texte trop aéré se disloque. Le bon réglage tourne autour de 1.5.

Tu verras : c'est le changement le plus spectaculaire du module pour le moins d'effort.

La télécommande de ton design

Dernière étape, et la plus puissante : les variables CSS.

Imagine que ta couleur d'accent apparaisse à douze endroits dans ta feuille de style. Le client change d'avis : il veut du bleu. Douze corrections, et tu en oublieras une.

Avec une variable, tu écris la couleur une seule fois, en haut du fichier, et tu la réutilises partout :

:root {
  --couleur-accent: #226347;
}

h1 {
  color: var(--couleur-accent);
}

Une variable CSS, c'est la télécommande de ton design : tu changes une valeur, tout le site suit. C'est exactement comme ça que fonctionnent les thèmes clairs et sombres que tu vois partout.

Au programme

Six exercices, et ton blog en sort méconnaissable :

1. font-family — choisis ta police, et sa police de secours
2. font-size — la hiérarchie des tailles
3. text-align — centrer, aligner à droite, et pourquoi on évite de justifier
4. line-height — l'interligne, le réglage le plus rentable du CSS
5. Les variables — déclare une fois, réutilise partout
6. Le défi : ton article de blog, entièrement typographié

Prêt ?

Ta page blog.html t'attend depuis le module 2. Il est temps de lui donner une vraie voix. C'est parti !