2. LES TEXTES ET POLICES DE CARACTÈRES

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté
4 min read

Table des matières

2.1 Textes

2.1.1 Conserver les accents sur les lettres capitales

Même lorsqu’elles sont en capitales, les lettres doivent être accentuées. Cela permet notamment un meilleur rendu audio par les synthèses vocales.

REMARQUES

Selon les normes de rédaction de Radio-Canada, les accents ne sont pas requis sur les acronymes.

ATTENTION

Les informations relatives aux pièces musicales (titre, artiste, album, compositeur, interprète, etc.) provenant de la base de données musicales n’ont pas d’accent.

RESSOURCES


2.1.2 Conserver la ponctuation comme élément de texte et non comme action

La ponctuation doit être utilisée comme tel, et non comme un élément cliquable. Par exemple, si les points de suspension sont utilisés lorsque le chapeau (lead) est trop long, ce ne sont pas les points qui sont cliquables mais l’ensemble de la carte qui nous amène à la suite de la lecture, au deuxième niveau.

2.1.3 Ne pas justifier le texte

Les textes ne doivent pas être justifiés. Il est recommandé d’utiliser l’alignement à gauche en tout temps. Les textes courts, les titres et les intitulés peuvent être centrés.

2.1.4 Ordonner le texte de manière logique

Lorsque des listes déroulantes sont utilisées, les options qu’elles contiennent doivent être ordonnées de manière logique.

L’ordre logique dépend du contexte, mais il peut s’agir notamment :

  • D’un ordre alphabétique (une liste de titres, par exemple).
  • D’un ordre numérique (une liste de chapitres, ou des dates, par exemple).

L’ordre demandant des connaissances particulières ou plus précises (par exemple, un ordre provincial géographique – d’ouest en est, la Colombie-Britannique vient avant l’Alberta) est à éviter.

REMARQUES

Dans une liste présentant les titres d'émissions débutant par un article défini ou indéfini (le, la, l', un, des), le nom suit l'ordre alphabétique du titre, et non l'article qui le précède. Pour faciliter la lecture et éviter de dénaturer le nom de l'émission, l'entrée dans la liste peut cependant débuter avec l'article. Par exemple, l'émission « La facture » est ordonnée sous « F » et non sous « L ».


2.2 Polices de caractères

2.2.1 Choisir une police appropriée pour le numérique

Prioriser une police de caractère Google Fonts ou une fonte web qu’il sera possible d’afficher à même la feuille de style CSS. Les polices de caractères utilisées doivent pouvoir être affichées sous forme de texte plutôt que sous forme d’images. La police de caractères Radio-Canada a été développée à ce dessein, et est accessible en format EOT, OTF, TTF,  WOFF, WOFF2

  • Seules les polices officielles de Radio-Canada sont utilisées avec la propriété CSS3 @font-face. (Exemple: Radio-Canada).
  • Par défaut, font-family : idéal, commun, générique (ex. Arial, sans-serif).

REMARQUES

Pour définir les tailles des polices de caractères, utiliser uniquement des unités relatives en pixels.

ATTENTION

Utiliser CSS pour mettre en forme du texte sur des images. N’utiliser des textes intégrés aux images qu’en dernier recours. Voir le glossaire pour la définition de l'image informative.

RESSOURCES


2.2.2 Garantir la lisibilité des contenus sur un site web

Garantir la lisibilité des contenus, même si l’utilisateur peut doubler la taille du texte dans son navigateur.

  • Spécifier un interlignage optimal pour les textes. La norme recommandée se situe entre 1.3 et 1.9 de ratio. Sur Radio-Canada, l’interlignage par défaut est de 1.5 pour les documents simples. Pour les cas avec peu de texte (titre, amorce, liste de liens, fil en continu), un interlignage de 1.3 est acceptable.
  • Prévoir une marge entre les paragraphes d’au moins 1.5 fois la valeur de l’interligne, quelle que soit la taille du texte.
  • Lorsqu’une mise en page comporte plus d’une colonne de contenus côte à côte, en vue desktop par exemple, s’assurer qu’il n’y a aucun chevauchement de boîte ou de disparition de texte lors d’un agrandissement de page. En vue mobile, s’assurer que les colonnes s’empilent de façon optimale.

2.2.3 Garantir la lisibilité des contenus dans une application

Une bonne hiérarchie typographique répond à un besoin d’organiser efficacement l’information afin d’en faciliter sa lisibilité et sa compréhension. Un système doit être mis en place afin de permettre l’incrémentation de la taille de caractères. Cependant, comme l’information n’a pas la même importance, l’incrémentation varie en fonction du type d’information affichée.

Une taille minimum doit être définie, tout comme l’incrémentation souhaitée selon le type de texte et selon le ratio d’incrémentation offert dans les réglages des systèmes iOS et Android. À titre d’exemple, voici deux tableaux: l’incrémentation de base du système d’exploitation, et l’incrémentation lorsque l’accessibilité est activée. Ces tailles peuvent être adaptées en fonction du projet applicatif.


Incrémentation de base du système applicatif

Style
XSmall
Small
Medium
L (par défaut)
xLarge
xxLarge
xxxLarge
Grand titre31323334363840
Titre23242526283032
Amorce17181920222426
Texte principal14151617192123
Citation13141516182022
Intertitre12131415171921
Texte secondaire12121213151719
Bas de vignette11111111131517



Incrémentation avec la fonctionnalité d’accessibilité activée

Style
AX1
AX2
AX3
AX4
AX5
Grand titre4448525660
Titre3640444852
amorce3034384246
Texte principal2731353943
Citation2630342842
Intertitre2529333741
Texte secondaire2527323640
Bas de vignette2125293337


Afin de permettre à cette fonctionnalité de s’afficher correctement dans l’interface, il est recommandé d’utiliser:

  • une taille de police dynamique (« sp »)
  • le «textstyle» du système (UiFontTextStyle pour iOS)
  • le  «min-height» et le «height» des conteneurs avec la balise «wrap_content» pour gérer les débordements (si le texte est augmenté, le conteneur doit en faire autant)


ASTUCES

  • Prévoir un moyen de contrôler la taille du texte à même la page, à l'aide d'une icône qui permet un zoom manuel. Il est possible de ne pas afficher certains éléments, de bloquer l'agrandissement de certains éléments (photos, icônes) ou encore de réviser les alignements ou la mise en page pour optimiser la lisibilité. Ces décisions doivent être prises conjointement entre le PO et le designer, en validant en maquettes les adaptations proposées par niveau d'incrémentation.

RESSOURCES