1.4Typographie, couleurs, marges & espacements
L'essentiel en 30 secondes
- Typographie : police, taille, graisse, interligne — lisibilité d'abord.
- Espacements : marge (espace externe) et padding (espace interne) ; l'air rend la page lisible.
- Cohérence : définir couleurs et polices globales évite l'incohérence et les retouches sans fin.
Mini-cas filé — Nadia soigne le rendu
Le contenu est là, mais tout est serré et les couleurs jurent. Nadia respire la page : plus d'air (paddings), une typographie lisible, deux couleurs de marque. Surtout, elle comprend qu'il vaut mieux fixer ces choix globalement une fois, plutôt que de les répéter élément par élément.
Suite de 1.3 — de « ça marche » à « c'est soigné ».
1. Typographie, couleurs, espacements
La typographie (police, taille, graisse, interligne, espacement des lettres) se règle dans l'onglet Style : priorité à la lisibilité (taille suffisante, interligne confortable). Les couleurs (texte, arrière-plan, bordures) doivent respecter un contraste suffisant. Les espacements — marges (externe) et paddings (interne), dans l'onglet Avancé — donnent de l'air : une page serrée fatigue, une page aérée respire.
Nadia augmente les paddings des conteneurs, choisit une police lisible, et deux couleurs (un rose de marque, un gris foncé pour le texte).
2. Cohérence et réglages globaux
Répéter les mêmes réglages sur chaque élément est une perte de temps et une source d'incohérence. La bonne pratique : définir les couleurs et polices globales du site (dans les réglages du site / Site Settings) et les réutiliser partout. Changer la couleur de marque se fait alors une fois, et tout se met à jour.
C'est le début d'un design cohérent et maintenable — on approfondira les réglages globaux au niveau 2.
🔎 Exemple concret — Aérer et harmoniser (cas Nadia)
Typographie : police lisible, interligne 1.6.
Couleurs : rose de marque (#b4005a) + gris foncé pour le texte.
Espacements : padding des sections 40px, marges entre blocs.
Global : couleurs/police définies dans les réglages du site.
→ Changer la couleur de marque = 1 réglage, tout se met à jour.Résultat : un rendu soigné et cohérent.
Leçon : régler globalement évite les retouches sans fin.
Vocabulaire de la section
- Typographie
- Police, taille, graisse, interligne, espacement des lettres d'un texte.
Exemple simple : une police lisible, interligne confortable pour les paragraphes.
Ce que ce n'est pas : empiler 4 polices différentes « pour varier ».
Réflexe : lisibilité d'abord ; 1 à 2 polices suffisent.
- Couleurs
- Couleur du texte, de l'arrière-plan, des bordures, des icônes (onglet Style).
Exemple simple : rose de marque + gris foncé lisible pour le texte.
Ce que ce n'est pas : du texte clair sur fond clair (contraste insuffisant).
Réflexe : vérifier le contraste texte/fond.
- Marge / padding
- Marge = espace externe autour d'un élément ; padding = espace interne (onglet Avancé).
Exemple simple : padding dans un bouton (air autour du texte), marge entre deux blocs.
Ce que ce n'est pas : coller les éléments sans air.
Réflexe : interne = padding ; externe = marge.
- Contraste
- Écart de luminosité entre texte et fond, pour la lisibilité et l'accessibilité.
Exemple simple : texte gris foncé sur fond blanc.
Ce que ce n'est pas : gris clair sur blanc, illisible au soleil ou pour certains yeux.
Réflexe : un texte doit se lire sans effort.
- Réglages globaux (Site Settings)
- Couleurs et polices définies une fois pour tout le site et réutilisées partout.
Exemple simple : changer la couleur de marque met à jour tout le site.
Ce que ce n'est pas : régler la couleur élément par élément.
Réflexe : définir globalement ce qui se répète.
En pratique — Styliser proprement une page
- Choisissez une police lisible et un interligne confortable pour les paragraphes.
- Définissez deux couleurs (une de marque, une pour le texte) avec un bon contraste.
- Ajoutez de l'air : paddings des conteneurs, marges entre blocs.
- Allez dans les réglages du site et fixez couleurs et polices globales.
Script prêt à dire — justifier la sobriété au client (20 s)
« J'utilise deux couleurs et une typographie lisibles, avec de l'air entre les éléments. C'est volontaire : un site épuré inspire confiance et se lit facilement, surtout sur mobile. Et comme tout est réglé globalement, si vous changez d'avis sur la couleur, on l'ajuste partout en un instant. »
Vendre la sobriété comme un choix de confiance et de lisibilité.
Modèle copier-coller — charte rapide
POLICE (titres) : _______________
POLICE (texte) : _______________ INTERLIGNE : ____
COULEUR MARQUE : #_______ COULEUR TEXTE : #_______
CONTRASTE VÉRIFIÉ : oui / non
PADDING SECTIONS : ____ px MARGES ENTRE BLOCS : ____ px
DÉFINI EN GLOBAL (Site Settings) : oui / nonVitrine sobre
2 couleurs, 1-2 polices, beaucoup d'air : rendu pro et rassurant.
Marque forte
Couleur de marque sur les boutons et accents, texte neutre lisible.
Mobile
Taille de police suffisante et interligne généreux pour lire au pouce.
Accessibilité
Contraste texte/fond suffisant : lisible au soleil et pour tous.
✓ Bonnes pratiques
- Limiter couleurs et polices, les choisir cohérentes.
- Donner de l'air (paddings, marges).
- Définir couleurs et polices en global pour la maintenabilité.
✗ Pièges fréquents
- Multiplier polices et couleurs.
- Oublier le contraste (texte peu lisible).
- Régler chaque élément à la main au lieu du global.
Points clés à retenir
- Typographie lisible, contraste suffisant.
- Marge (externe) et padding (interne) pour aérer.
- Peu de couleurs/polices, mais cohérentes.
- Réglages globaux = cohérence et modifs en une fois.
Défi 48h — appliquez demain
Sur une page, fixez 2 couleurs et 1-2 polices dans les réglages du site, vérifiez le contraste texte/fond, et aérez avec des paddings. Changez ensuite la couleur de marque en global et observez. 20 minutes.
- Je choisis une typographie lisible et contrastée.
- J'aère avec marges et paddings.
- Je définis couleurs/polices en global.
Questions fréquentes
Combien de couleurs et de polices utiliser ?
Peu : 2 à 3 couleurs et 1 à 2 polices suffisent pour un rendu pro et cohérent. La surcharge nuit à la lisibilité et à la confiance.
Quelle différence entre marge et padding ?
La marge est l'espace externe autour d'un élément ; le padding, l'espace interne entre le bord de l'élément et son contenu. Les deux se règlent dans l'onglet Avancé.
Pourquoi définir les couleurs en global ?
Pour la cohérence et la maintenabilité : définies une fois dans les réglages du site, elles se réutilisent partout et se modifient en un seul endroit.
Nadia veut pouvoir changer la couleur de marque partout en une seule fois si le client hésite. Que fait-elle ?