Les styles de texte
1. Les couleurs
Le site utilise une palette de couleurs prédéfinies pour garantir un rendu cohérent partout. Vous retrouverez toujours les mêmes teintes principales :
- Couleur principale
- Couleur secondaire
- Couleur de réussite
- Couleur d’information
- Couleur d’avertissement
- Couleur d’erreur
- Couleur claire
- Couleur foncée
- Couleur grisée
Ces couleurs servent à mettre en forme les contenus, notamment pour :
La couleur du texte
Les arrière-plans
Les boutons et appels à l’action
Les encadrés d’information
2. Les formats
Le menu Formats sert à appliquer des styles « prêts à l’emploi » au texte, aux liens ou à certains blocs.
2.1. Appliquer un format
- Sélectionnez le texte (ou placez le curseur dans le paragraphe concerné).
- Ouvrez Formats.
- Cliquez sur le style souhaité.
Si aucun texte n’est sélectionné, certains styles s’appliquent au paragraphe où se trouve le curseur.
2.2. Les titres
Ces formats donnent l’apparence d’un titre, sans modifier la structure technique de la page.
Quand les utiliser ?
- Pour donner un aspect de titre à un texte.
- Pour garder une mise en page cohérente sur tout le site.
Les titres :
Titre 1
Titre 2
Titre 3
Titre 4
Titre 5
Titre 6
Recommandation : gardez une hiérarchie logique dans les tailles de titres. Utilisez les plus grands avec parcimonie, puis descendez progressivement vers les tailles plus petites. Cela rend le contenu plus clair et plus facile à lire.
2.3. Les couleurs des textes
Cette option permet de changer la couleur d’un texte à l’aide des couleurs prévues sur le site.
Les couleurs :
- Couleur principale : pour les éléments importants du site.
- Couleur secondaire : pour les éléments moins importants ou les actions secondaires.
- Couleur de réussite : pour indiquer une validation ou une bonne nouvelle.
- Couleur d’information : pour partager une information neutre.
- Couleur d’avertissement : pour signaler un point important ou une mise en garde.
- Couleur d’erreur : pour signaler un problème, une erreur ou une action critique.
- Couleur claire : pour les fonds discrets ou les zones de contenu secondaires.
- Couleur foncée : pour les textes importants ou les zones qui doivent ressortir visuellement.
- Couleur grisée : pour les éléments inactifs, désactivés ou moins importants visuellement.
2.4. Les textes (épaisseurs)
Ces options permettent de changer l’intensité du texte, du plus fin au plus épais :
- Très fin
- Extra fin
- Fin
- Normal
- Moyen
- Gras
- Très gras
- Extra gras
Bonnes pratiques :
- Utilisez le gras pour mettre en évidence des mots importants.
- Évitez de mettre trop de texte en gras, sinon rien ne ressort vraiment.
2.5. Les couleurs de fond
Cette option permet d’ajouter une couleur en arrière-plan d’un texte ou d’un passage sélectionné.
Exemples d’usage :
- Mettre en évidence une phrase courte.
- Créer un encadré pour une information importante.
- Faire ressortir un message clé.
Conseil : privilégiez des fonds clairs pour garder une bonne lisibilité, surtout si le texte est long.
2.6. Les Call-To-Actions
Les Call-To-Actions sont des liens auxquels on applique un style particulier pour leur donner l’apparence d’un bouton.
Pour chaque couleur disponible, il existe :
- une version pleine
- une version avec contour, plus discrète
Comment créer un bouton d’action :
- Créez d’abord un lien en sélectionnant le texte, puis en ajoutant l’adresse du lien.
- Sélectionnez ensuite ce lien.
- Dans les options de mise en forme, choisissez « Call-To-Actions » et la couleur souhaitée, avec ou sans contour.
Conseil : utilisez la version pleine pour l’action principale et la version avec contour pour une action secondaire plus discrète.
2.7. Les boutons
Ces options permettent d’appliquer les styles de boutons standards du site, avec les différentes couleurs disponibles.
Utilisation :
- Pour créer un bouton simple et cohérent avec le design global.
- Pour garder une apparence uniforme sur l’ensemble des pages.
Différence avec les boutons d’action :
Les deux ont le même objectif : créer un bouton.
- La catégorie “Boutons” correspond aux styles standards du site.
- Les “Call-To-Actions” sont souvent plus orientés vers la mise en avant d’une action précise ou plus visible.
2.8. La taille des boutons
Cette option permet de modifier la taille ou la largeur d’un bouton.
Tailles disponibles :
Conseil : évitez de cumuler trop d’effets. Une seule taille et une seule couleur suffisent généralement pour un résultat clair et efficace.
2.9. Les alertes
Cette option permet de créer un encadré coloré pour mettre en avant un message. Chaque couleur correspond à un type d’information.
Il est également possible d’appliquer un style spécifique aux liens à l’intérieur de l’encadré afin qu’ils restent visibles et cohérents.
Les couleurs :
Couleur principale : pour mettre en avant les actions importantes et les éléments prioritaires du site.
Couleur de réussite : pour confirmer qu’une étape est validée.
Couleur d’information : pour partager un contenu utile ou explicatif.
Couleur d’avertissement : pour attirer l’attention sur une précaution.
Couleur d’erreur : pour signaler un problème ou un point bloquant.
Couleur claire : pour créer des zones de fond discrètes et améliorer la lisibilité sans surcharger visuellement la page.
Couleur foncée : pour structurer le contenu ou faire ressortir un élément important grâce à un contraste marqué.
Liens des alertes : pour rendre visibles et cohérents les liens intégrés dans un encadré d’information.
3. Vous êtes perdu ?
Après toutes ces informations, il est difficile de savoir quelles sont les bonnes pratiques. Retrouvez nos : recommandations!