Couleurs et typographie : les deux langages visuels

Objectifs

À la fin de cette leçon, vous saurez :

• écrire une couleur en mots-clés, hexadécimal, rgb() et hsl() ;
• choisir le format adapté et jouer sur l'opacité avec l'alpha ;
• construire une pile font-family robuste ;
• régler taille, graisse et interlignage pour un texte confortable.

Les quatre façons d'écrire une couleur

a { color: steelblue; }              /* mot-clé nommé */
b { color: #4682b4; }                /* hexadécimal : RR VV BB */
i { color: rgb(70, 130, 180); }      /* même couleur, décimal */
u { color: hsl(207, 44%, 49%); }     /* teinte, saturation, lumière */

Ces quatre lignes décrivent la même couleur. Le hex est le plus répandu dans les maquettes ; rgb() parle directement aux capteurs ; hsl() est le plus humain : on choisit une teinte (0–360 sur la roue), puis on dose saturation et luminosité.

:root {
  --marque:        hsl(210, 60%, 45%);
  --marque-claire: hsl(210, 60%, 65%);   /* même teinte, plus claire */
  --marque-foncee: hsl(210, 60%, 30%);
}

Avec hsl, décliner une palette devient de l'arithmétique : on garde la teinte, on bouge la lumière. C'est ainsi qu'on fabrique des états hover/actif cohérents.

L'alpha : transparence contrôlée

Chaque format accepté un quatrième canal, l'alpha (0 = invisible, 1 = opaque) :

.overlay    { background: rgba(0, 0, 0, 0.5); }   /* voile à moitié noir */
.survol     { background: #4682b480; }             /* hex sur 8 chiffres */
.bord-doux  { border-color: hsl(210 60% 45% / 0.3); }

L'alpha sert surtout aux superpositions : voiles de modale, fonds translucides, ombres légères — sans recréer une couleur « à peu près ».

Le contraste, une question de lecture

Une couleur jolie mais illisible est une couleur ratée. Règle pratique : texte sombre sur fond clair (ou l'inverse), et méfiance envers gris-sur-gris. Les outils en ligne (vérificateurs de contraste WCAG) donnent un ratio ; viser au minimum 4.5:1 pour du texte courant est un bon réflexe professionnel.

La pile font-family : toujours un plan B

body {
  font-family:
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

Le navigateur essaie chaque police dans l'ordre et s'arrête à la première disponible. La dernière valeur (sans-serif, serif ou monospace) n'est pas une police mais une famille générique : c'est le filet de sécurité obligatoire. Sans elle, une machine sans aucune des polices listées retomberait sur son réglage par défaut, parfois en serif décoratif.

Pour le code, une pile monospace dédiée évite que vos blocs ne défigurent l'alignement :

pre, code {
  font-family: "Cascadia Code", Consolas, Menlo, monospace;
}

Taille, graisse, interlignage

Trois réglages portent 90 % du confort de lecture :

body {
  font-size: 1rem;        /* taille de base : suit le réglage utilisateur */
  line-height: 1.5;       /* multiplicateur : 1,5 fois la taille */
  color: #1f2937;
}

h1 {
  font-size: 2rem;        /* en rem : relatif à la racine, jamais en px fixes */
  font-weight: 700;       /* graisse : 400 normal, 700 gras */
  line-height: 1.2;       /* les titres tolèrent un interlignage plus serré */
}

Pourquoi rem plutôt que px ? Parce que rem est relatif à la taille choisie par l'utilisateur dans son navigateur : si sa vue exige du 120 %, toute votre page grossit proportionnellement. Des tailles figées en px cassent ce respect des préférences.

Les graisses usuelles : 400 (normal), 500/600 (moyen, sous-titres), 700 (gras). Au-delà, il faut que la police chargée propose ces épaisseurs.

Exercice

1. Déclarez dans :root une palette --primaire, --primaire-clair, --primaire-fonce en hsl(), même teinte, trois luminosités.
2. Appliquez --primaire aux liens, et --primaire-fonce au survol.
3. Donnez au body une pile font-family se terminant par sans-serif, puis passez temporairement la dernière valeur à serif : observez la différence.
4. Réglez line-height: 1.6 sur un paragraphe long, puis testez 1 : lequel fatigue le plus, et pourquoi ?
5. Créez .voile avec fond noir semi-transparent (rgba) positionné en absolute couvrant une carte.

Résumé

• Une couleur s'écrit en mot-clé, hex, rgb() ou hsl() — même résultat, usages différents.
• hsl() rend les déclinaisons triviales : même teinte, autre lumière.
• L'alpha (4e canal) gère la transparence.
• font-family est une pile : toujours finir par une famille générique.
• rem, line-height autour de 1.5 et deux ou trois graisses suffisent à un texte pro.

:root {
  --primaire:       hsl(160, 55%, 40%);
  --primaire-clair: hsl(160, 55%, 62%);
  --primaire-fonce: hsl(160, 55%, 26%);
}

a { color: var(--primaire); }
a:hover { color: var(--primaire-fonce); }

.carte { position: relative; }
.voile {
  position: absolute;
  inset: 0;                       /* top/right/bottom/left à 0 */
  background: rgba(0, 0, 0, 0.45);
}