Aller au contenu principal

Module CSS.4 – Couleurs & typographie

Objectif​

Maîtriser les couleurs CSS (hex, rgb, hsl), la typographie (fonts, line-height), et créer une hiérarchie visuelle professionnelle.

Théorie​

Couleurs CSS​

Formats de couleurs​

1. Noms de couleurs :

color: red;
color: blue;
color: green;

2. Hexadécimal (#RRGGBB) :

color: #ff0000; /* Rouge */
color: #00ff00; /* Vert */
color: #0000ff; /* Bleu */
color: #ffffff; /* Blanc */
color: #000000; /* Noir */
color: #333; /* #333333 (raccourci) */

3. RGB (Red, Green, Blue) :

color: rgb(255, 0, 0); /* Rouge */
color: rgb(0, 255, 0); /* Vert */
color: rgba(255, 0, 0, 0.5); /* Rouge avec transparence (alpha) */

4. HSL (Hue, Saturation, Lightness) :

color: hsl(0, 100%, 50%); /* Rouge */
color: hsl(120, 100%, 50%); /* Vert */
color: hsla(0, 100%, 50%, 0.5); /* Rouge avec transparence */

5. Couleurs modernes :

color: rgb(255 0 0 / 0.5); /* Syntaxe moderne (sans virgules) */
color: hsl(0 100% 50% / 0.5);

Transparence​

RGBA :

background-color: rgba(255, 0, 0, 0.5); /* 50% opaque */

HSLA :

background-color: hsla(0, 100%, 50%, 0.5);

Opacity (propriété) :

.element {
    opacity: 0.5; /* 50% opaque (affecte tout l'élément) */
}

Différence :

  • rgba/hsla : Transparence de la couleur uniquement
  • opacity : Transparence de tout l'élément (contenu inclus)

Typographie​

Font-family​

Polices système :

font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;

Polices web (Google Fonts) :

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
font-family: 'Roboto', sans-serif;

Stack de polices (fallback) :

font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

Types de polices :

  • serif : Avec empattements (Times, Georgia)
  • sans-serif : Sans empattements (Arial, Helvetica)
  • monospace : Largeur fixe (Courier, Monaco)
  • cursive : Script (Brush Script)
  • fantasy : Décorative

Font-size​

Unités :

font-size: 16px;    /* Pixels (absolu) */
font-size: 1em;     /* Relative au parent */
font-size: 1rem;    /* Relative à la racine (recommandé) */
font-size: 100%;    /* Pourcentage */
font-size: 1.5vw;   /* Viewport width */

Recommandation : Utiliser rem pour la typographie.

Hiérarchie typographique :

html {
    font-size: 16px; /* Base */
}

h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }    /* 32px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.5rem; }  /* 24px */
h5 { font-size: 1.25rem; } /* 20px */
h6 { font-size: 1rem; }    /* 16px */
p { font-size: 1rem; }     /* 16px */

Font-weight​

Valeurs :

font-weight: normal;  /* 400 */
font-weight: bold;    /* 700 */
font-weight: 100;     /* Thin */
font-weight: 300;     /* Light */
font-weight: 400;     /* Normal */
font-weight: 500;     /* Medium */
font-weight: 700;     /* Bold */
font-weight: 900;     /* Black */

Polices variables :

font-weight: 200; /* Si la police supporte */

Font-style​

font-style: normal;
font-style: italic;
font-style: oblique;

Line-height​

Hauteur de ligne (interlignage) :

line-height: 1.5;    /* 1.5 × font-size (recommandé) */
line-height: 24px;   /* Valeur fixe */
line-height: 150%;   /* Pourcentage */

Recommandation : 1.5 à 1.6 pour le texte de lecture.

Exemple :

p {
    font-size: 1rem;
    line-height: 1.6; /* Espacement confortable */
}

Text-align​

text-align: left;    /* Gauche (défaut) */
text-align: center;  /* Centre */
text-align: right;   /* Droite */
text-align: justify; /* Justifié */

Text-decoration​

text-decoration: none;        /* Aucune */
text-decoration: underline;    /* Souligné */
text-decoration: overline;     /* Ligne au-dessus */
text-decoration: line-through; /* Barré */

Couleur et style :

text-decoration: underline;
text-decoration-color: blue;
text-decoration-style: dashed;
text-decoration-thickness: 2px;

Text-transform​

text-transform: none;      /* Aucune transformation */
text-transform: uppercase; /* MAJUSCULES */
text-transform: lowercase; /* minuscules */
text-transform: capitalize; /* Première Lettre Majuscule */

Hiérarchie visuelle​

Créer une hiérarchie avec :

  • Taille (font-size)
  • Poids (font-weight)
  • Couleur (color)
  • Espacement (margin, padding)

Exemple :

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.75rem;
}

p {
    font-size: 1rem;
    font-weight: 400;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

Variables CSS (Custom Properties)​

Définir des variables :

:root {
    --couleur-primaire: #007bff;
    --couleur-secondaire: #6c757d;
    --font-family: 'Roboto', sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;
}

Utiliser les variables :

h1 {
    color: var(--couleur-primaire);
    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 2.5);
}

Avantages :

  • ✅ Réutilisabilité
  • ✅ Maintenance facile
  • ✅ Thèmes (dark mode)

Exercices guidés​

Exercice 1 : Couleurs​

Créez des éléments avec :

  • Couleur hex (#ff0000)
  • Couleur RGB (rgb(255, 0, 0))
  • Couleur HSL (hsl(0, 100%, 50%))
  • Transparence (rgba)

Exercice 2 : Typographie de base​

Créez une hiérarchie :

  • h1 : 2.5rem, bold
  • h2 : 2rem, semi-bold
  • p : 1rem, normal, line-height 1.6

Exercice 3 : Polices web​

Intégrez une police Google Fonts :

  • Importez Roboto
  • Appliquez-la au body
  • Testez différents weights

Exercice 4 : Variables CSS​

Créez des variables pour :

  • Couleurs principales
  • Tailles de police
  • Utilisez-les dans vos styles

Exercice 5 : Hiérarchie visuelle​

Créez une page avec :

  • Hiérarchie claire (h1-h6)
  • Espacement cohérent
  • Couleurs harmonieuses
  • Typographie professionnelle

❌ Erreurs fréquentes​

Erreur 1 : Unités incohérentes​

❌ Mauvais :

h1 { font-size: 32px; }
h2 { font-size: 2em; }
p { font-size: 1rem; }

✅ Bon :

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p { font-size: 1rem; }

Pourquoi : Cohérence et maintenabilité.

Erreur 2 : Line-height trop serré​

❌ Mauvais :

p {
    line-height: 1;
}

✅ Bon :

p {
    line-height: 1.6;
}

Pourquoi : Lisibilité.

Erreur 3 : Contraste insuffisant​

❌ Mauvais :

p {
    color: #ccc; /* Gris clair sur blanc */
}

✅ Bon :

p {
    color: #333; /* Gris foncé sur blanc */
}

Pourquoi : Accessibilité (WCAG).

Erreur 4 : Trop de polices​

❌ Mauvais :

h1 { font-family: 'Font1', sans-serif; }
h2 { font-family: 'Font2', sans-serif; }
p { font-family: 'Font3', sans-serif; }

✅ Bon :

body {
    font-family: 'Roboto', sans-serif;
}
/* Utiliser weights pour varier */

Pourquoi : Cohérence visuelle.

Erreur 5 : Oublier les fallbacks​

❌ Mauvais :

font-family: 'Roboto';

✅ Bon :

font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

Pourquoi : Si la police ne charge pas, fallback système.

🚀 Mini-projet​

Mission : Créer un système typographique complet

Créez une page avec :

Système de couleurs :

  • Variables CSS pour couleurs primaires/secondaires
  • Palette cohérente (3-5 couleurs max)

Hiérarchie typographique :

  • h1 à h6 avec tailles cohérentes
  • Paragraphes avec line-height optimal
  • Utilisation de rem pour tout

Polices :

  • Police principale (Google Fonts)
  • Fallbacks appropriés
  • Weights variés (400, 600, 700)

Critères :

  • ✅ Variables CSS utilisées
  • ✅ Hiérarchie claire
  • ✅ Contraste WCAG AA
  • ✅ Typographie professionnelle
  • ✅ Cohérence visuelle

Objectif : Créer un système de design typographique et colorimétrique professionnel.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les couleurs, la typographie et avez créé une hiérarchie visuelle professionnelle.