Typographie avancée

1. Hiérarchie visuelle et choix des polices

Hiérarchie visuelle

La hiérarchie visuelle est essentielle pour guider l'utilisateur à travers une page web et améliorer la lisibilité. Elle repose sur plusieurs éléments :

a) La taille des polices

  • Utiliser des tailles de texte différentes pour distinguer les titres, sous-titres et paragraphes.
  • Exemples de tailles courantes (approximatives) : h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { font-size: 1rem; }

b) Le poids de la police (font-weight)

  • Mettre en valeur certains éléments avec une police plus épaisse.
  • Valeurs possibles : 100 (extra light) → 900 (extra bold). h1 { font-weight: 700; } p { font-weight: 400; }

c) La couleur et le contraste

  • Une couleur trop faible nuit à la lisibilité. Utiliser des contrastes suffisants.
  • Exemples de bonnes pratiques : p { color: #333; } /* Gris foncé pour un bon contraste */ a { color: #007bff; text-decoration: none; } /* Lien en bleu, bien visible */

Choix des polices

Il existe trois grandes catégories de polices :

  • Serif (ex. : Times New Roman, Georgia) → utilisées pour des styles plus classiques.
  • Sans-serif (ex. : Arial, Helvetica, Roboto) → plus modernes et lisibles à l’écran.
  • Monospace (ex. : Courier, Consolas) → utilisées pour du code ou des styles particuliers.

Bonnes pratiques pour intégrer des polices

  • Utilisation de font-family en cascade pour assurer une alternative si une police n’est pas disponible. body { font-family: 'Roboto', Arial, sans-serif; }
  • Utilisation de Google Fonts : <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> Puis dans le CSS : h1 { font-family: 'Roboto', sans-serif; font-weight: 700; }
2. Utilisation des unités fluides clamp(), em, rem, vw, vh

a) Différences entre px, em, rem

  • px (pixels fixes) : taille absolue, ne s’adapte pas au zoom ou aux préférences de l’utilisateur.
  • em (relative au parent) :
    • 1em = taille de la police du parent.
    • Exemple : div { font-size: 20px; } p { font-size: 1.5em; } /* 1.5 × 20px = 30px */
  • rem (relative à html) :
    • 1rem = taille de la police définie dans <html> (souvent 16px par défaut).
    • Exemple : html { font-size: 16px; } h1 { font-size: 2rem; } /* 2 × 16px = 32px */

b) vw et vh : Tailles relatives à la fenêtre

vw (Viewport Width) : 1vw = 1% de la largeur de l’écran.

Exemple: h1 { font-size: 10vw; /* La taille du texte sera 10% de la largeur de la fenêtre */ } ➡ Effet visuel : Le texte grandit si on agrandit la fenêtre et rétrécit si on la réduit.

vh (Viewport Height) : 1vh = 1% de la hauteur de l’écran.

Exemple: div { height: 50vh; /* Hauteur équivalente à 50% de la hauteur de la fenêtre */ } ➡ Effet visuel : L’élément occupera toujours la moitié de l’écran en hauteur.

c) Utilisation de clamp() pour des tailles fluides

La fonction clamp(min, val, max) permet de définir une taille de texte qui s’ajuste automatiquement entre une valeur minimale et maximale.

h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

➡ Ici, la taille du h1 :

  • Ne descendra pas en dessous de 1.5rem.
  • S’adaptera à la largeur de l’écran (5vw = 5% de la largeur de l’écran).
  • Ne dépassera pas 3rem.
3. Effets stylisés text-shadow, gradient text, transitions au survol

a) text-shadow : Ombres sur le texte

Ajoute une ombre au texte pour lui donner du relief.

h1 { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

Explication des valeurs :

  • 2px → Déplacement horizontal.
  • 2px → Déplacement vertical.
  • 5px → Flou.
  • rgba(0, 0, 0, 0.3) → Couleur de l’ombre (noir transparent).

b) Texte en dégradé (background-clip: text)

Applique un dégradé au texte.

h1 { background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ➡ Effet visuel : Un texte avec un dégradé de couleurs.

c) Effets au survol avec transition

Permet d’animer des changements de couleur ou de taille au survol.

a { color: #007bff; transition: color 0.3s ease-in-out; } a:hover { color: #ff4500; } ➡ Effet visuel : Lorsque l’utilisateur passe la souris sur un lien, la couleur change avec une transition fluide.