Sélection de la langue

Mise en forme du texte – Système de conception GCWeb

Utilisez la mise en forme du texte pour faire ressortir les informations les plus importantes d'une page.

Sur cette page

Gras, italique et soulignement

Options

  • Par défaut
  • Gras
  • Italique
  • Soulignement
Apparence

Texte régulier

Code HTML 
<p>Texte régulier</p>

Utilisation correcte

Utilisation incorrecte

  • Ne combinez pas les styles, comme le soulignement et le gras, à moins que cela ne fasse partie d’un texte en hyperlien dans une page de sujet.
  • N'écrivez jamais une ligne entière ou un paragraphe en gras ou en italique, car cela rend la lecture plus difficile.
  • N'utilisez pas l'italique dans les cas suivants :
    • à des fins de conception ou d’esthétisme
    • pour mettre en évidence un mot ou une phrase (utilisez plutôt le gras avec modération)
    • pour les longs passages de texte, comme les citations
    • dans les titres de pages
  • Ne soulignez pas le texte s'il ne s'agit pas d'un lien, car cela imite l'aspect visuel d'un lien, ce qui pose des problèmes de convivialité.

Alignement

L’alignement permet d'aligner le texte à gauche, au centre ou à droite.

Le texte centré et le texte aligné à droite ont tous deux une bordure gauche « irrégulière » qui, nuit à la vitesse de lecture et à la compréhension. La combinaison d'une bordure gauche linéaire et d'une bordure droite irrégulière dans un texte standard aligné à gauche est la plus efficace pour les lecteurs car elle aide l'œil à trouver le début de la ligne suivante lorsqu'il quitte la fin de la dernière.

Options

  • Par défaut
  • Alignement à gauche
  • Alignement au centre
  • Alignement à droite
Apparence

Votre texte...

Code HTML 
<p class="">Votre texte...</p>

Utilisation correcte

  • Alignez les cellules de données d’un tableau à droite ou au centre pour imiter les tableaux comptables.

Utilisation incorrecte

  • N’utilisez pas cette composante pour aligner des informations non textuelles.
  • N’utilisez pas cette composante, sauf si elle apporte une valeur ajoutée au contenu.

Taille

• À utiliser pour remplacer la taille de police globale par défaut de 16px par une hauteur de ligne de 1.428.

Options

  • Par défaut
  • Taille H1
  • Taille H2
  • Taille H3
  • Taille H4
  • Taille H5
  • Texte de grande taille
  • Texte de petite taille
Apparence

Taille de texte par défaut

Code HTML 
<p>Par défaut</p>

Utilisation correcte

  • Utilisez un balisage sémantique approprié.
    • Les changements de taille du texte peuvent transmettre des informations.
  • Utilisez cette composante lorsque vous devez ajouter ou réduire l'incidence d'un texte qui n'est pas un vrai en-tête.

Utilisation incorrecte

  • N’utilisez pas cette composante à la place d'un vrai en-tête.
  • N'utilisez pas un texte de petite taille simplement pour condenser beaucoup de texte dans une petite zone.
    • Envisagez de diviser le texte en blocs plus petits.

Couleur

Texte/icône

  • Par défaut
  • Atténué
  • Info
  • Principal
  • Succès
  • Avertissement
  • Danger

Arrière-plan

  • Par défaut
  • Info
  • Principal
  • Succès
  • Avertissement
  • Danger
Apparence

Voici votre texte en couleur.

Voici un icône en couleur :

Code HTML 
<!-- couleur du texte  -->
	<p class="">Voici votre texte en couleur.</p>

	<!-- couleur de l'icône  -->
	<p>Voici un icône en couleur : <span class="fa fa-adjust"></span></p>

Facteurs à considérer pour le codage :

  • Mettez le texte dans une balise <span> si un style n'apparaît pas comme il le devrait, pour des raisons de spécificité

Utilisation correcte

  • Utilisez la couleur comme élément de présentation, soit à des fins esthétiques, soit pour transmettre des informations.

Utilisation incorrecte

  • N’utilisez pas la couleur comme seul moyen de communiquer une information ou une intention, car la couleur seule ne répond pas aux critères d’accessibilité.
  • Évitez d'utiliser des couleurs, sauf si elles apportent une valeur ajoutée au contenu.

Choisissez la couleur appropriée

Atténué
(gris)
  • Utilisez-la pour mettre moins d’accent sur le texte (pour qu’il ressorte moins).
Info
(bleu pâle)
  • À utiliser pour appliquer un style à des informations relativement importantes
Principal
(bleu foncé)
  • Utilisez-la pour assortir le texte à la palette de couleurs principale du site
Succès
(vert)
  • Utilisez-la pour indiquer que le contenu est approprié ou que c'est la bonne façon de faire quelque chose.
Avertissement
(jaune)
  • Utilisez-la pour attirer l'attention sur le contenu et avertir l'utilisateur de quelque chose.
Danger
(rouge)
  • Utilisez-la pour attirer l'attention sur du contenu très important et avertir l'utilisateur qu'une mesure est risquée.

Renvoi et tronquage du texte

Permet d'empêcher le renvoi du texte à la ligne suivante.

Options

  • Par défaut
  • Renvoyer
  • Tronquer
Apparence

La date limite pour produire vos impôts de cette année est le 30 avril 2021.

Code HTML 
<p>La date limite pour produire vos impôts de cette année est le 30 avril 2021.</p>

Renvoyer

Utilisation correcte

  • Utilisez cette composante pour contrôler où et comment les mots doivent être placés dans une ligne de texte.
  • Utilisez-la pour éviter que des éléments comme les numéros de téléphone, les codes postaux, les équations mathématiques, les dates et la ponctuation française (comme les deux points et les guillemets qui nécessitent des espaces) ne se retrouvent sur plusieurs lignes.
  • N'oubliez pas que la page s'adapte à la largeur du navigateur.
    • Les renvois à la ligne du texte se font à des endroits différents selon les appareils et les fenêtres d'affichage.
    • Assurez-vous de tenir compte des différentes résolutions.

Utilisation incorrecte

  • N’utilisez pas cette composante pour éviter de séparer des phrases complètes.
  • Ne l’utilisez pas pour des informations non textuelles.

Tronquer

Utilisation correcte

  • Utilisez cette composante pour tronquer le texte afin qu'il entre sur une seule ligne dans une colonne de la grille. Tout texte dépassant le bord de la grille sera coupé et remplacé par des points de suspension (trois points).
  • Le texte n’est plus visible mais il peut toujours être lu par les lecteurs d'écran.
  • Utilisez-la principalement pour éviter le renvoi à la ligne des hyperliens (si la hauteur est un problème et qu'il n'est pas possible d'appliquer une Égalisation des hauteurs (égaliser) (anglais seulement)) ou si le texte s'affiche en dehors des colonnes d'une grille (lorsque le renvoi à la ligne est appliqué).

Utilisation incorrecte

Composantes complémentaires

Des fonctionnalités et des comportements supplémentaires sont disponibles.

Date de modification :