Applications: comment choisir la bonne typographie?

Dans son célèbre livre intitulé The Elements of Typographic Style, Robert Bringhurst énumère les différents services que la typographie devrait rendre au lecteur:

• Inviter à se rapprocher du texte
• Révéler le ton et la signification du texte
• Clarifier la structure et l’ordre du texte
• Lier le texte aux différents éléments de la page
• Réunir les conditions optimales à la lecture en créant un sentiment de calme

Ces services doivent s’appliquer aussi bien aux textes destinés à un support imprimé qu’à un écran.

Dans Comprendre la typographie, Ellen Lupton critique l’idée reçue selon laquelle la lecture sur écran serait plus fatigante. Une étude datant des années 80 sur l’interaction entre l’Homme et la machine a démontré qu’un « texte noir sur fond blanc peut être lu avec la même efficacité sur une page que sur écran »¹, sachant qu’à l’époque, les moniteurs avaient une résolution bien plus faible qu’aujourd’hui. Avec la lecture numérique, ce sont les attentes qui changent. « Le lecteur sur support numérique s’attend à être “productif” et non contemplatif »², précise Ellen Lupton. Il parcourt toujours l’écran à la recherche de liens sur lesquels cliquer (ou à partager). De son côté, le lecteur sur papier prend son temps et déplace son regard de manière moins frénétique. Le support ne freine pas la lecture d’un long texte, surtout si ce texte a été pensé pour être lu, et pas seulement pour être vu (d’où les concepts anglais de readability et legibility).

L’importance de la lisibilité

La lisibilité d’un texte est déterminée par un ensemble d’éléments, dont le choix du type de police de caractères, sans oublier :

• la taille
• l’espacement entre les lettres et les mots
• la longueur de la ligne (la justification)
• la distance entre les lignes (l’interligne)

Tous ces éléments sont liés et influent les uns sur les autres. Plus une ligne est longue, plus la taille des caractères doit être importante, et plus l’interligne doit être large. La taille du texte et l’interligne dépendent du type de police utilisé. Certaines nécessiteront un interligne large, d’autres un interligne plus mince.

Pour représenter la corrélation existante entre la taille du texte, la longueur de la ligne et l’épaisseur de l’interligne, le designer slovène Matej Latin a utilisé l’image du triangle équilatéral en créant The Equilateral Triangle of a Perfect Paragraph. Ce jeu en ligne permet de s’entraîner à créer le “paragraphe parfait” et à voir en temps réel ce qui survient lorsque l’un des éléments n’a pas été paramétré correctement.

Les règles fondamentales de la typographie (et, plus généralement, du graphisme) peuvent s’appliquer de la même manière sur papier et sur écran, en gardant toujours à l’esprit le contexte et l’utilisation qu’en fera le lecteur. Lorsqu’on lit un texte sur un écran, on a tendance a être moins contemplatif, surtout s’il s’agit d’un écran de téléphone. Connaître ces dynamiques permet d’opter pour une typographie plutôt qu’une autre.

Création d’une application : l’importance de la typographie

Lorsqu’on crée une application pour smartphone, il ne faut pas perdre de vue son système d’exploitation, ses codes, sa logique de fonctionnement, sa disposition et son design. Aujourd’hui, Android et iOS sont les deux systèmes d’exploitation les plus répandus. Tous deux sont soumis à des guides de style très détaillés, où est entre autres spécifiée la taille idéale de la barre des menus, de la barre latérale et des typographies.

La navigation sur une application Android (conçue en respectant les directives de Google) se fait entre la barre des menus et la barre latérale, avec l’icône positionnée en haut à gauche. Sur une application iOS, elle se fait dans la partie basse (la tab bar). Android comme iOS sont préprogrammés avec une typographie par défaut, respectivement  Roboto et  San Francisco³.

Quelle typographie choisir pour son application ?

L’utilisation de la police par défaut d’un système d’exploitation a certains avantages (pas de frais de licence, légèreté de l’application), mais ce n’est pas toujours la solution la plus adaptée. Certaines exigences liées à l’image de marque, à l’identité visuelle et au type de contenu peuvent nécessiter d’autres choix. Les éléments à considérer dans le choix d’une typographie pour écran ne sont pas si éloignés des exigences liées à l’impression. Il faut prendre en compte :

• le poids des caractères
• la hauteur d’x (la hauteur des minuscules)
• le contraste (la différence d’épaisseur entre les pleins et les déliés d’une lettre)
• la forme des lettres (permettant de distinguer sans problème les lettres comme le “e” et le “c“, ou le “l” minuscule et le “I” majuscule)
• la largeur des lettres

Plus une minuscule est haute, et meilleure est la lisibilité, surtout dans des petits formats. Il va sans dire que, sur un petit écran comme celui d’un smartphone, cette caractéristique est aussi fondamentale que le contraste des lettres.

Lorsqu’on s’intéresse de plus près aux applications les plus connues et téléchargées, aussi bien sur Play Store que sur App Store, on remarque souvent que la typographie utilisée est souvent celle par défaut. Pour les applications téléchargées des millions de fois, il faut prendre en compte l’effet que peut avoir le coût de licence d’utilisation d’une police de caractères. En général, pour une application, les coûts sont bien plus importants que pour l’impression ou le Web. Dans ce cas, pour éviter l’utilisation des polices par défaut et des typographies gratuites, on peut choisir de développer sa propre typographie. Par exemple, Netflix et Airbnb ont récemment abandonné les polices utilisées depuis des années (respectivement Gotham et  Circular) au profit de polices propriétaires.

Les polices propriétaires : personnalité et lisibilité

L’équipe de design interne de Netflix, en collaboration avec la fonderie anglaise Dalton Maag, a créé  Netflix Sans, tandis qu’Airbnb, toujours en partenariat avec Dalton Maag, a conçu Cereal. Le mot le plus employé dans les communiqués de presse de présentation de la nouvelle typographie de Netflix comme d’Airbnb a été “lisibilité”. Le but était d’avoir une police de caractères propre à la marque et qui soit lisible à la fois sur écran et sur papier. Les deux marques sont effet également largement présentes hors-ligne grâce à leur publicité traditionnelle, mais pas seulement. Airbnb, par exemple, imprime aussi son  magazine.

VSCO, une autre application toujours très attentive au design, est allée dans la même direction lors de l’un des ses derniers repositionnements de marque en réalisant, en collaboration avec la fonderie suédoise Letters from Sweden.

Pour paraphraser Robert Bringhurst, la police idéale pour une application (un site ou un livre) doit avant tout être une typographie réussie en elle-même. Ensuite, elle doit être adaptée à l’utilisation sur application, c’est-à-dire pratique pour une lecture continue et prolongée. Enfin, elle doit être en harmonie avec le thème.

N’oubliez pas que le choix de la police n’est qu’un début. Son utilisation déterminera par la suite la réussite ou l’échec du projet graphique, qu’il soit destiné à être lu sur écran ou sur papier.

Les alternatives gratuites

Terminons cet article avec deux polices de caractères gratuites qui sont d’excellentes alternatives aux typographies par défaut d’iOS et d’Android. L’une d’elles est IBM Plex, une police “open source” récemment créée par IBM et disponible en trois versions : mono, serif et sans-serif (il existe également une version condensée du sans-serif). Toutes les versions sont disponibles en huit poids (aussi bien les romaines que les cursives).

La seconde typographie est Inter UI, créée par Rasmus Andersson et disponible en quatre poids (en romaines comme en cursives). Le projet Inter UI a commencé en 2016 en tant qu’expérience pour la création d’une police parfaitement lisible, même en petite taille.

––––––––––––––––––––––––––––––––

¹ Dopo la chiusura della casa editrice che lo pubblicava, la Sylvestre Bonnard, Gli Elementi dello stile tipografico in italiano è difficile da reperire.

¹ Ellen Lupton, Comprendre la typographie, Pyramyd, 2015

² Ibidem

³ San Francisco a été introduite par Apple en 2015 pour remplacer Helvetica