Typographie

Q: Comment choisir la bonne typographie ?

Plusieurs critères sont à prendre en compte : lisibilité sur écran, disponibilité de la police de caractères en fonction du support utilisé, les variantes de graisses qui existent.

Q: Combien de typographies utiliser sur une interface ?

En général, on limite à deux typographies, voire une seule avec plusieurs graisses. Cela permet de créer une structure visuelle, tout en évitant de créer de l’hétérogénéité visuelle.

Q: Qu'est-ce qu'une échelle typographique ?

L’échelle typographique décrit la taille utilisée pour les différents niveaux de hiérarchie dans vos pages. On applique en général un multiple fixe entre deux niveaux successifs. La référence est la taille du corps de texte.

Q: Comment garantir la lisibilité du texte dans une interface ?

Il existe plusieurs règles fondamentales pour aider à garantir la lisibilité, que ce soit la longueur de ligne, l’interlignage, la taille de texte de 16px pour le texte. Le contraste entre la couleur de texte et la couleur de fond est également un critère important pour lequel le RGAA préconise un ratio de 3:1

Concept

La lisibilité comme choix de design

La typographie est l'un des éléments les plus importants dans la création d'une identité visuelle. Elle englobe le choix de la police, l'échelle de tailles, les graisses, les espacements et les styles. Souvent sous-estimée, elle est pourtant essentielle : elle permet de reconnaître votre marque en un coup d'œil et a un impact non négligeable sur la lisibilité globale de votre produit. Prenez donc soin de bien la choisir !

À quoi ça sert ?

Établir une bonne hiérarchisation de l'information à travers les différents niveaux de titres, corps de texte, paragraphes et boutons d'interaction.
Garantir une lisibilité du contenu optimale, et ce pour toutes les conditions d'affichage.
Contribuer à l'identité visuelle d'une marque grâce à une police distinctive et unique.

Pour quel besoin ?

Définir une cohérence graphique qui s'imposera sur chacun des usages de votre produit (web, mobile, print…).
Améliorer la visibilité générale de votre produit. Une typographie bien choisie permettra de rendre des textes très denses et compliqués plus lisibles et aérés.
Optimiser les performances de votre site grâce à une typographie pensée pour le web.

Définir le contexte et les objectifs

La typographie a une influence directe sur le ressenti d'une marque. Il est important de bien identifier le secteur afin d'orienter son choix vers le bon style (Serif, Sans-serif, Display…). S'il est évident qu'il faut garder une police claire et lisible, il est tout aussi important d'avoir une police qui se reconnaisse et qui puisse être associée à votre marque.

Vérifier la lisibilité et l'accessibilité

Dans le web, il s'agit là d'une étape obligatoire et très importante. Une belle police ne sert à rien si elle n'a pas une bonne lisibilité. Pensez à tester votre police à différentes tailles, sur différents fonds (clair ou sombre) et assurez-vous qu'elle respecte les standards de contrastes.

Définir une hiérarchie typographique

Une fois votre police choisie, il est important de définir une hiérarchie cohérente entre titres, sous-titres, paragraphes et légendes. Idéalement, il faut limiter le nombre de familles de polices à 2. Nous jouerons principalement sur les tailles, les graisses et les styles pour la hiérarchisation des informations.

Comment choisir la bonne typographie ?

Combien de typographies utiliser sur une interface ?

Qu'est-ce qu'une échelle typographique ?

Comment garantir la lisibilité du texte dans une interface ?

Bordeaux.fr : un portail qui informe les Bordelais autant qu'il les sert, sans concession sur l'accessibilité et l'écoconception

Voir l'étude de cas

La Coupe d’Or pivote vers la jeunesse, son logo aussi

Voir l'étude de cas

Les méthodes liées

Palette de couleurs

La palette de couleurs d'un produit numérique encode statuts, hiérarchie et accessibilité. Une palette bien définie est un système cohérent, pas une simple collection de teintes.

Iconographie

L'iconographie définit les icônes d'un produit, leur style et leur cohérence. Bien choisie, elle accélère la compréhension ; mal utilisée, elle crée de l'ambiguïté.

Grille de mise en page

La grille de mise en page structure l'IHM avec colonnes, gouttières et marges. Elle assure la cohérence visuelle et facilite le responsive design entre designers et développeurs.

UX writing

L'UX writing rédige les textes d'une interface : boutons, erreurs, états vides. Bien fait, il guide sans qu'on s'en aperçoive. Mal fait, il est la première source de friction.

Accessibilité numérique

L'accessibilité numérique rend les produits utilisables par toutes les personnes. Dans le numérique, c’est le RGAA qui fait référence en la matière.

Vous souhaitez en savoir plus sur nous ?

Tout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.

Parlons-en