Typographie

Les différentes polices utilisées sur nos produits et les normes typographiques à suivre.

Polices de caractères

Radio-Canada

Pour toute question concernant la fonte Radio-Canada, communiquez avec Julie Desilets, directrice, stratégie design et expérience utilisateur, ou Sylvain Cossette, premier chef, Marque.

La police de caractères Radio-Canada a été créée en 2017 par le designer et typographe montréalais Charles Daoud, en collaboration avec Coppers and Brasses et Alexandre Saumier Demers, et revue en 2022 pour y inclure les caractères du syllabaire autochtone canadien utilisé pour certaines langues algonquines (dont le cri) et athapascanes. Elle est accessible sur Google Fonts.

« Son style humaniste aide à mieux différencier les caractères entre eux et lui permet d’être très performante lorsqu’utilisée en texte continu. Elle se démarque dans de subtils détails, comme des angles aux caractères descendants (p, q) et ascendants (b, d), ou encore des empattements distinctifs (I, J). » (Daoud, 2017)

Autres polices

Bien que la fonte Radio-Canada soit la police de caractères officielle du diffuseur public, d'autres sont utilisées sur différents produits comme police secondaire ou pour le titrage :

• Jeunesse utilise Roboto Sans Condensed;

• MAJ utilise Montserrat;

• Mordu utilise New Hero;

• Rad utilise GT Walsheim.

Choisir une police de caractères

Si vous devez choisir une nouvelle police de caractères pour votre produit, assurez-vous qu'elle soit lisible, autant pour le confort à la lecture (readability), que pour la facilité de comprendre chacun des caractères (legibility). (Jacinta Oakley, 2022)

Plus précisément, une police accessible devrait :

• Avoir une grande hauteur d'x

• Avoir de grandes contreformes (ex. o, p, b) et ouvertures (ex. e, c, 3)

• Avoir un dessin distinct pour chaque lettres (par ex., d et b ne devraient pas être un symétrie identique)

• Avoir un dégagement suffisant entre chaque lettres (interlettrage, crénage, approche)

• Éviter les ligatures esthétiques (ffl, ffi, st)

Pour valider un le choix d'une police de caractères, portez attention aux caractères qui peuvent se confondre en raison d'un dessin de la lettre trop similaire ou un interlettrage trop serré : m, rn; cl d; ce, œ; Ile, IIe; 1e, le, je; 2Z, 22; 5S, SS; D, 0, O, o; a, o; BI, 81.

Taille de texte

Il n'existe pas en soi de taille de texte minimum à respecter. Par contre, l'utilisateur doit pouvoir augmenter 400% avec son système d'opération ou son navigateur sans perdre d'informations ou de fonctionnalités. Il revient donc au designer de distinguer quels éléments sont informatifs ou décoratifs. Par exemple, sur l'application Info, on retire les images de l'accueil à 400% considérant qu'à cette dimension l'image ne peut réellement communiquer l'information pour laquelle elle est utilisée au départ. Sur le Web, c'est la vue mobile est utilisée à 400%.

Échelle sur les applications

Un système doit être mis en place afin de permettre l’incrémentation de la taille de caractères. 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.

Incrémentation de base du système d’exploitation (De XS à 3XL)
et incrémentation lorsque l’accessibilité est activée (Ax)

Ces tailles peuvent être adaptées en fonction du projet applicatif. Large (LG) est la valeur affichée par défaut.

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.

Interlignage

Spécifier un interlignage optimal pour les textes. La norme recommandée se situe entre 1.3 et 1.9 de ratio, soit entre 130% et 190% de la taille du texte. Sur Radio-Canada, l’interlignage par défaut est de 1.5 pour le texte courant. 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.

Couleurs

Règle générale, le texte courant doit respecter un ratio de 1 pour 4.5 et le titre et les textes courts, un ratio de 1 pour 3. Les critères plus spécifiques se trouvent sous Couleurs.

Alignement

L'alignement du texte doit suivre le sens de lecture. En français, le texte courant devrait être aligné à gauche seulement, et non justifié des deux côtés. Il est possible d'aligner à droite ou au centre des textes courts pour l'effet de style, mais il faut tenir compte que cela nuit au retour à la ligne.

Capitales

L'utilisation exclusive des lettres capitales (all caps) nuit au confort de lecture parce qu'en retirant les jambages inférieurs (g, p, y) et supérieurs (b, f, h), on réduit la capacité du lecteur à bien distinguer les lettres, ce qui est amplifié pour certaines personnes vivant avec de la dyslexie. Elle devrait être limitée à certains contextes bien spécifiques, comme c'est le cas pour les acronymes.

Références

• Autosizing TextViews (Android Developers)

• Best Font for Online Reading: No Single Answer (NNG, 2022)

• cbcrc/radiocanadafonts (GitHub)

• Exemples d'interlignage, Elbow Room (24ways.org)

• Police de caractères Radio-Canada (Charles Daoud, 2017)

• Scaling Fonts Automatically (Apple)

• Spécimen typographique, Police de caractères Radio-Canada (Charles Daoud, 2017) (pdf)

• Spécimen typographique, Police de caractères (édition imprimée) (Charles Daoud, 2017)

• The Dos and Don’ts of Pairing Typefaces (NNG, 2022)

• The IL1 Typography Test (NNG, 2023)

• The type system (Material)

• Typography (Marvel)

• Typography, Visual Design, Human Interface Guidelines (Apple)

• Understanding Success Criterion 1.4.12: Text Spacing (WCAG 2.1)

• Vision Australia Digital Access webinar: Typography in Inclusive Design (en) (Jacinta Oakley, 2022)

Annexe

Table des caractères de la police Radio-Canada

Exemple de terme à tester

Incrémentation de base du système d’exploitation (De XS à 3XL)

Incrémentation lorsque l’accessibilité est activée (Ax)