Typographie et couleurs : construire une identité visuelle cohérente
Une identité visuelle cohérente repose sur deux piliers : la typographie et les couleurs. Bien choisis, ils donnent une personnalité reconnaissable à votre site et améliorent la lecture. Ce guide vous propose une méthode simple pour construire une mini charte graphique que vous pourrez réutiliser sur tous vos projets web.
Pourquoi une mini charte graphique ?
Sans règles claires, chaque page risque de ressembler à un projet différent. Une charte graphique légère fixe vos choix une fois pour toutes : deux polices, une palette de cinq à six couleurs et quelques règles d'usage. Elle vous fait gagner du temps, renforce la crédibilité de votre site et facilite le travail à plusieurs.
- Cohérence : les mêmes éléments ont toujours le même aspect.
- Rapidité : vous ne repartez jamais d'une page blanche.
- Accessibilité : les contrastes sont vérifiés dès le départ.
Choisir et associer ses polices Google Fonts
La règle des deux familles
Limitez-vous à deux polices : une pour les titres, une pour le texte courant. Au-delà, le rendu devient vite brouillon et le chargement plus lourd. Une seule famille avec plusieurs graisses est aussi une option parfaitement valable.
Créer un contraste maîtrisé
Une association réussie combine des caractères différents, mais compatibles. Une police à empattements pour les titres s'accorde bien avec une police sans empattement pour le corps de texte, et inversement.
| Style recherché | Titres | Texte |
|---|---|---|
| Éditorial, élégant | Playfair Display | Source Sans 3 |
| Moderne, technique | Space Grotesk | Inter |
| Chaleureux, accessible | Merriweather | Open Sans |
| Minimaliste | Poppins | Lato |
Régler la lisibilité
- Taille du texte courant : au moins 16 px (1 rem).
- Interligne : entre 1,5 et 1,7 pour les paragraphes.
- Longueur de ligne : 60 à 75 caractères pour un confort optimal.
- Graisses : chargez uniquement celles que vous utilisez (400 et 700 suffisent souvent).
Construire une palette de couleurs harmonieuse
Les rôles de chaque couleur
Plutôt que de choisir des teintes au hasard, attribuez un rôle à chacune :
- Couleur principale : celle de la marque, utilisée pour les titres et les éléments clés.
- Couleur secondaire : elle complète la principale pour les zones de soutien.
- Couleur d'accent : réservée aux boutons et appels à l'action.
- Neutres : un fond clair, un gris moyen et un texte foncé.
Appliquer la règle 60-30-10
Répartissez environ 60 % de neutres, 30 % de couleur principale ou secondaire et 10 % d'accent. Cette proportion crée une hiérarchie naturelle et évite l'effet « arc-en-ciel ».
Trouver des combinaisons fiables
Partez du cercle chromatique : une palette analogue (couleurs voisines) donne une impression de calme, une palette complémentaire (couleurs opposées) apporte de l'énergie. Dans les deux cas, testez vos choix sur de vrais écrans avant de les valider.
Respecter les contrastes d'accessibilité
Les recommandations WCAG exigent un rapport de contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour les grands titres et les éléments d'interface. Un joli texte gris clair sur fond blanc est souvent illisible pour une partie des visiteurs, notamment sur mobile en plein soleil.
Une couleur ne doit jamais être le seul moyen de transmettre une information : ajoutez toujours une icône, un soulignement ou un libellé.
- Vérifiez chaque paire texte/fond avec un outil de calcul de contraste.
- Gardez les liens soulignés dans le texte.
- Prévoyez un état de focus bien visible pour la navigation au clavier.
- Testez votre palette avec un simulateur de daltonisme.
Formaliser la charte avec des variables CSS
Pour réutiliser vos choix partout, centralisez-les dans des variables CSS. Il suffit ensuite de modifier une valeur pour mettre à jour tout le site. Si les bases du langage vous semblent encore floues, consultez notre guide Bases de HTML et CSS pour créer son premier site.
- Couleurs : principale, secondaire, accent, fond, texte.
- Typographie : familles, tailles de titres, interlignes.
- Espacements : une échelle cohérente (8, 16, 24, 32 px).
- Composants : style des boutons, des liens et des cartes.
Checklist avant de publier
- Deux polices maximum, chargées avec les seules graisses utiles.
- Une palette de cinq à six couleurs aux rôles définis.
- Tous les contrastes validés à 4,5:1 minimum.
- Variables CSS documentées et réutilisables.
- Rendu vérifié sur mobile, tablette et ordinateur.
Aller plus loin
Votre charte est prête : il reste à l'appliquer à des interfaces concrètes. Découvrez comment organiser vos écrans dans Design d'interface et UX : l'essentiel, puis donnez vie à vos pages avec JavaScript : ajouter de l'interactivité pour les débutants.