Typographie

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 sert la typographie ?

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

Pourquoi travailler la typographie ?

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

Comment bien choisir sa typo ?

01

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.

02

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.

03

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.

Questions fréquentes

Quelques exemples de réalisations

Palette de couleurs

Palette de marque ou palette d'interface, les deux ne se confondent pas. Comment construire un système de couleurs cohérent, lisible et accessible.

En savoir plus sur Palette de couleurs

Iconographie

L'iconographie d'une interface, c'est le style et la cohérence de ses icônes. Bien choisies, elles accélèrent la lecture, mal choisies elles créent le doute.

En savoir plus sur Iconographie

Grille de mise en page

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

En savoir plus sur Grille de mise en page

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 crée de la friction.

En savoir plus sur UX writing

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.

En savoir plus sur Accessibilité numérique

Charte graphique

La charte graphique rassemble les règles visuelles d'une marque : couleurs, typographies, logo, et les usages autorisés ou proscrits pour chacun.

En savoir plus sur Charte graphique

Architecture de l'information

L'architecture de l'information organise contenu et navigation pour que les utilisateurs trouvent ce qu'ils cherchent. Elle guide le design d'interface

En savoir plus sur Architecture de l'information

WCAG

Les WCAG sont les recommandations du W3C pour l'accessibilité web. Organisées en 4 principes POUR et 3 niveaux (A, AA, AAA), elles fondent le RGAA français.

En savoir plus sur WCAG

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