Versions Compared

Old Version 5

changes.mady.by.user MATHIEU Côté

Saved on

compared with

New Version Current

changes.mady.by.user VERONIQUE LECLERC

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Image Removed

« 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 :

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%.

Note

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.

Note

Selon les statistiques d'utilisation, 30% des utilisateurs de l'app Info sur iOS augmente la taille de leur police de caractères. Ces utilisateur sont répartis également dans les trois premiers grades (10%, 10%, 10%)

Il est aussi possible pour l'utilisateur sur iOS d'augmenter la graisse du texte. Seuls les textes natifs semblent réagir à cette préférence.

É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.

Panel
panelIconId48e98656-91c3-4558-bd7b-a25943ae1a72
panelIcon:accessibilite:
panelIconText:accessibilite:
bgColor#EAE6FF

Pour accéder à la dernière version de cette article, voir sur le portail de l'accessibilité :

Meilleures pratiques en matière de l'accessibilité pour la typographie

Échelle sur les applications

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.

Style

XS

SM

MD

LG

XL

2XL

3XL

Ax1

Ax2

Ax3

Ax4

Ax5

Grand titre

31

32

33

34

36

38

40

44

48

52

56

60

Titre

23

24

25

26

28

30

32

36

34

38

48

52

Amorce

17

18

19

20

22

24

26

30

34

38

42

46

Texte principal

14

15

16

17

19

21

23

27

31

35

39

43

Citation

13

14

15

16

18

20

22

26

30

34

38

42

Intertitre

12

13

14

15

17

19

21

25

29

33

37

41

Texte secondaire

12

12

12

13

15

17

19

25

27

32

36

40

Bas de vignette

11

11

11

11

13

15

17

21

25

29

33

37

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

...

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

...

Références

Annexe

Table des caractères de la police Radio-Canada

...

Exemple de terme à tester

m et rn

cl et d

ce et oe

I, L et 1

LI, LJ et U

2Z, 22, 5S, SS

urne | ume

arme | anne

surnom

pattern

internet

moderne

journal

international

gouvernement

clés | dés

clic

clou

club

cycle

boucle | boude

classe

climat

exclu

cet

ces

ceux

face

ceder

ocean

parce

1e

le

il, IL

ilôt, ILÔT

îles, ÎLES

voile

grille

vieille

millilitre

LIN | UN

LIT | UT

PLI | PU

CLIC

CLIP

POLI | POU

LIME | UME

LISTE | USTE

CSS

CS5

Z22

222

105

iOS

IOS

5AM

SAM

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

Style

xsmall

small

medium

large (défaut)

xlarge

xxlarge

xxxlarge

Grand titre

31

32

33

34

36

38

40

Titre

23

24

25

26

28

30

32

Amorce

17

18

19

20

22

24

26

Texte principal

14

15

16

17

19

21

23

Citation

13

14

15

16

18

20

22

Intertitre

12

13

14

15

17

19

21

Texte secondaire

12

12

12

13

15

17

19

Bas de vignette

11

11

11

11

13

15

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

Style

AX1

AX2

AX3

AX4

AX5

Grand titre

44

48

52

56

60

Titre

36

40

44

48

52

Amorce

30

34

38

42

46

Texte principal

27

31

35

39

43

Citation

26

30

34

28

42

Intertitre

25

29

33

37

41

Texte secondaire

25

27

32

36

40

Bas de vignette

21

25

29

33