CSS — Typographie et espacement
Google Fonts, hiérarchie visuelle et navigation fixe
Concepts Théoriques
La typographie et l'espacement font la différence entre un site amateur et un site professionnel. Un bon choix de police et un espacement cohérent rendent votre contenu agréable à lire et donnent une impression de qualité.
Choisir une police — Google Fonts
La police par défaut (Arial, système) est fonctionnelle mais anonyme. Google Fonts offre 1500+ polices gratuites et professionnelles.
La règle d'or : choisir maximum 2 polices — une pour les titres (display), une pour le corps du texte (body). Plus de 2 polices donne un aspect brouillon.
Combinaisons populaires :
- Poppins (titres) + Inter (corps) — Moderne et clean
- Sora (titres) + Outfit (corps) — Arrondi et tech
- Playfair Display (titres) + Source Sans Pro (corps) — Élégant
Pour intégrer une police Google Fonts, ajoutez 2 balises <link> dans votre <head> (avant votre style.css) :
- Un <link rel="preconnect"> vers fonts.googleapis.com
- Un <link rel="preconnect"> vers fonts.gstatic.com
- Un <link href="..."> avec l'URL de la police
Puis dans votre CSS, utilisez font-family: 'Nom de la police', sans-serif;
Les propriétés de texte
font-size — La taille du texte. Utilisez rem (1rem = 16px par défaut). Échelle recommandée : 0.875rem (petit), 1rem (normal), 1.25rem (grand), 2rem (titre h2), 3rem (titre h1).
font-weight — L'épaisseur du texte. 400 = normal, 500 = medium, 600 = semi-bold, 700 = bold, 800 = extra-bold. Ne chargez que les poids que vous utilisez (optimisation).
line-height — L'espace entre les lignes. 1.5 à 1.8 pour le texte courant (lisibilité), 1.1 à 1.3 pour les gros titres (plus compact).
letter-spacing — L'espace entre les lettres. Léger négatif sur les gros titres (-0.02em) pour les resserrer. Léger positif sur les petits textes en majuscules (0.05em) pour les aérer.
text-align — L'alignement : left (défaut), center, right, justify. Évitez justify sur le web — les espaces irréguliers entre les mots nuisent à la lisibilité, surtout sur mobile.
La hiérarchie visuelle
La hiérarchie visuelle guide l'œil du lecteur. Les éléments les plus importants doivent être les plus grands et les plus contrastés :
- <h1> — Le plus gros (3-4rem), le plus lourd (700-800), couleur forte
- <h2> — Plus petit que le h1 (2-2.5rem), en gras (700)
- <h3> — Encore plus petit (1.25-1.5rem), semi-bold (600)
- Texte courant — Taille normale (1rem), poids normal (400), couleur atténuée
- Texte secondaire — Plus petit (0.875rem), couleur encore plus atténuée
Le contraste de couleur est aussi important que la taille. Utilisez votre couleur principale (--color-text) pour le contenu important et une couleur atténuée (--color-text-muted) pour le texte secondaire.
L'espacement vertical
L'espacement entre les éléments crée du "blanc" (même sur un fond sombre). Ce blanc est essentiel pour la lisibilité et la respiration visuelle.
Règles d'espacement :
- Entre les sections : 4-6rem (var(--space-xl) ou var(--space-2xl))
- Entre un titre et son contenu : 1.5-2rem
- Entre les paragraphes : 1rem
- Padding intérieur des sections : 4-6rem vertical, 1-2rem horizontal
- Padding du conteneur : 1rem sur mobile, 2rem sur desktop
> Bonne pratique : Créez une échelle d'espacement avec des variables CSS et utilisez-la systématiquement. 4-5 valeurs suffisent : xs (0.25rem), sm (0.5rem), md (1rem), lg (2rem), xl (4rem).
Navigation fixe
Un header fixe (qui reste en haut quand on scrolle) est un pattern standard. Il nécessite :
- position: fixed sur le <header>
- width: 100% pour qu'il couvre toute la largeur
- z-index élevé pour qu'il soit au-dessus du contenu
- Un fond avec transparence + backdrop-filter: blur() pour l'effet verre
Le piège : le header fixe recouvre le contenu. Il faut ajouter un padding-top sur la première section (ou sur le <body>) égal à la hauteur du header.