Typographie dans le design

Comme le savent les professionnels, les premières impressions comptent. La plupart des utilisateurs quitteront très rapidement une page web dont le contenu n'est pas clair et convaincant. Votre équipe créative fait de son mieux pour véhiculer le message de votre marque dans un langage attrayant et accessible. Elle compte désormais sur vous pour prendre au niveau de la police et du design des décisions qui amélioreront la lisibilité des contenus et la crédibilité de la marque.

Lisez la suite pour en savoir plus :

• Qu'est-ce que la typographie et pourquoi elle compte
• Les 5 types de polices les plus populaires et les 6 éléments clés de la typographie
• Comment trouver et explorer des caractères et des polices avec Figma

Qu'est-ce que la typographie ?

En matière de design, la typographie implique de créer ou de sélectionner un système de caractères et de polices pour exprimer le mot écrit. Cette forme d'art créatif peut évoquer des émotions fortes à l'aide de lettres visuellement attrayantes et en arrangeant la typographie pour exprimer la personnalité de votre marque. Une typographie bien conçue peut renforcer une communication claire, avec une lisibilité et une clarté immédiates.

Pourquoi la typographie est-elle importante ?

La typographie joue un rôle clé dans la création de sites web, d'applications, d'e-mails, d'eBooks, et plus encore. Une bonne typographie peut vous aider à :

• Attirer les utilisateurs avec des caractères et des éléments typographiques qui captent leur attention avant même qu'ils ne commencent à lire.
• Établir une hiérarchie visuelle avec des tailles de caractères, des épaisseurs, des polices serif et/ou sans serif, des associations de polices et des combinaisons de caractères cohérents pour guider les utilisateurs et améliorer la lisibilité.
• Faites connaître votre marque. Utilisée de manière cohérente, une bonne typographie aide les utilisateurs à identifier votre marque à travers les styles de caractères et de polices utilisés dans le contenu de votre marque.
• Soutenir les objectifs de votre contenu. Un espacement des lettres constant, des longueurs de ligne ajustées, l'utilisation de majuscules et de minuscules, ainsi que d'autres éléments typographiques, améliorent la lisibilité, tandis que les polices utilisées comme éléments de design graphique amplifient le ton et le sens.

Bref historique de la typographie

En inventant la première presse à imprimer à caractères métalliques mobiles, dans les années 1400, Johannes Gutenberg a contribué à faire évoluer la typographie en Europe. Gutenberg a utilisé les formes de lettres calligraphiques de style gothique afin de composer des lignes de texte plus longues pour les manuscrits et les textes religieux. Les imprimeurs italiens créèrent rapidement un caractère plus simple et plus compact, appelé à l'origine Antiqua et aujourd'hui mieux connu sous le nom de Roman. Les imprimeurs européens ont ensuite lancé les caractères italiques, permettant de composer encore plus de mots par page.

Avançons rapidement vers la fin des années 1700 et le début des années 1800, époque où les premiers caractères serif modernes arrivent sur le marché. Viennent ensuite les caractères sans serif, qui vont dominer le monde de l'impression en Europe jusqu'au 20ème siècle. Durant ce siècle, des caractères plus épurés et plus lisibles telles que ceux des polices Times New Roman, Futura, Helvetica et Arial prennent le relais. Aujourd'hui, les graphistes et les web designers du monde entier ont accès à de vastes bibliothèques de polices et de caractères.

Les 5 types de caractères les plus populaires

Les designers modernes choisissent généralement parmi cinq types de caractères populaires : serif, sans serif, script, à chasse fixe et affichage. Chaque caractère comprend une famille de polices, couvrant les différents styles de ce caractère. Par exemple, Helvetica est un caractère, tandis que Helvetica Light et Helvetica Regular sont des polices.

• Polices serif : ce type de caractère formel et plus traditionnel présente des lignes ou tracés courts qui s'étendent aux extrémités supérieure et inférieure des lettres. Des marques établies telles que le New York Times, Sony et J.P. Morgan optent pour un caractère serif. Times New Roman et Garamond sont par exemple des polices serif.
• Polices sans serif : ce type de caractère simple et moderne n'inclut pas les fioritures des caractères serif. C'est un choix populaire pour les marques jeunes et les start-ups technologiques (pensez à Target, Airbnb et Doordash). Helvetica, Arial et Calibri sont par exemple des polices sans serif.
• Polices script : ce style de caractère fluide et cursif peut aller de la calligraphie élégante à des styles d'écriture manuscrite ludiques. Pas idéal pour le texte principal, un caractère script fonctionne au mieux dans les citations, les signatures et les en-têtes courts. Snell Roundhand, Pacifico et Scriptina sont par exemple des polices script.
• Polices à chasse fixe : ce type de caractère rétro, de style machine à écrire, affiche un espacement et des lettres de largeur fixe, de sorte que chaque caractère d'un mot occupe la même largeur. Utilisé dans le code source pour améliorer la lisibilité, le type de caractère à chasse fixe apparaît également sur de nombreux sites web et designs graphiques. Courier, Bergen Mono et Source Code Pro sont par exemple de polices à chasse fixe.
• Polices d'affichage : également connu sous le nom de décoratif, ce type de caractère accrocheur peut ajouter une touche d'élégance et d'originalité aux logos, aux bannières et aux titres. Clearview, Johnston et Skywalker sont par exemple des polices d'affichage.

Éléments clés de la typographie

Vous pouvez optimiser l'apparence, la lisibilité et la tonalité d'un mot, d'une ligne de texte ou d'un produit en ajustant un ou plusieurs éléments typographiques.

Alignement

Pour parvenir à un équilibre et aider les utilisateurs à se déplacer facilement sur une page, alignez les éléments de conception, tels qu'un logo, une image, un en-tête et le texte principal. Espacez également chaque élément de design et utilisez les marges et les marges intérieures de manière cohérente. Justifiez votre texte à gauche, à droite, entièrement ou au centre en fonction des besoins de votre projet. Par exemple, les designers peuvent centrer un titre ou une courte citation, mais justifier à gauche un texte long.

Couleur

Sélectionnez une palette de couleurs qui correspond à votre marque et véhicule clairement votre message. Ajustez l'opacité du texte et utilisez des couleurs complémentaires qui contrastent bien entre elles pour assurer la lisibilité et l'accessibilité. Vous pouvez utiliser un générateur de roue chromatique pour créer une palette de couleurs bien équilibrée. Conseil d'expert : Reportez-vous aux directives sur l'accessibilité du contenu web pour connaître les rapports de contraste idéaux. Les couleurs plus audacieuses et plus vives peuvent mieux convenir pour les titres et les sous-titres, tandis que les couleurs neutres conviennent aux blocs de texte volumineux.

Hiérarchie

Développer une hiérarchie dans votre typographie aide à hiérarchiser et à mettre en avant les informations clés pour qu'elles soient faciles à parcourir et à assimiler. Faites en sorte que les titres soient plus grands que les sous-titres, et les sous-titres plus grands que le texte principal. Par exemple, le texte principal d'un site web est généralement de 16 px, avec des en-têtes H1 définis sur 48 px. Jouez avec l'espace vierge, l'alignement du texte, les couleurs et les différents caractères pour renforcer la hiérarchie visuelle.

Crénage

Ajustez la quantité d'espace existant entre les lettres afin que la distance soit cohérente. Un bon crénage aide à améliorer l'attrait visuel de votre texte tout en améliorant la lisibilité.

Interlignage

Le terme « interlignage » désigne la hauteur de ligne (la distance entre la ligne de base d'une ligne de texte et la ligne de base de la ligne de texte située au-dessus). En général, une hauteur de ligne égale à 1,125 et 1,200 fois la taille de la police (112,5%–120.0%) aboutit à une meilleure lisibilité. Cela dit, chaque caractère nécessite un ajustement soigneux – y compris un espacement des lignes soigneux.

Suivi

Vous pouvez améliorer la lisibilité grâce au suivi (aussi connu sous le nom d'espacement des caractères), qui couvre l'espacement global entre les lettres dans un mot ou une ligne de texte. Augmentez le suivi pour ajouter de l'espace et diminuez-le pour le réduire. Les mots ou les phrases affichés intégralement en lettres majuscules sont parfois plus faciles à lire avec un suivi accru.

Comment choisir la bonne police de caractères

Le choix d'une police de caractères comprend les étapes clés suivantes :

• Considérez la portée de votre projet, ses exigences et ses objectifs. Posez à votre équipe des questions clés sur le contenu : comment fournir le contenu (via une application, un site web, un e-mail ou des supports imprimés) ? Quel est notre public et quels sont ses besoins ? Quelles polices de caractères et polices nos concurrents utilisent-ils? Gardez à l'esprit que certaines polices de caractères fonctionnent mieux pour les en-têtes que pour le texte des menus. D'autres ont de vastes familles de polices avec des scripts internationaux, des glyphes et d'autres caractères spéciaux.
• Créez un moodboard pour développer une tonalité visuelle, basée sur la recherche sur les utilisateurs et concurrentielle. Pour commencer, utilisez le modèle de moodboard de FigJam. Conseil d'expert : Examiner les solutions comparables peut aider à identifier des modèles et des normes utiles.
• Explorez les options de polices de caractères sur votre ordinateur ou sur des sites tels que Google Fonts. Recherchez une police de caractères présentant des indices visuels qui reflètent ce que vous souhaitez que votre produit ou votre marque transmette. Par exemple, si le ton de votre marque est professionnel plutôt que ludique, choisissez une police de caractères sérieuse présentant peu de fioritures. Lequel de ces exemples de design Figma vous semble plus professionnel ? Si vous avez choisi le module de gauche, vous êtes sur la bonne voie. Ce module utilise la police de caractères Roboto, une police sans serif épurée et facile à lire. Le module de droite inclut la police de caractères Almendra, une police basée sur la calligraphie et souvent utilisée dans les livres pour enfants.

• Choisissez des polices de caractères accrocheuses et conformes à votre marque pour soutenir les objectifs de votre projet. Considérez la construction générale des lettres (par exemple, hauteurs d'x, hauteurs de majuscules, contreformes, hampes et jambages), la capacité d'adaptation, la lisibilité, la personnalité et la décoration. Ces éléments influencent l'apparence générale d'une police de caractères.
• Testez vos polices de caractères avec un contenu réel et pertinent. C'est la meilleure façon de choisir une police qui engage vos utilisateurs. Essayez la police de caractères à différentes tailles pour vous assurer qu'elle fonctionne à la fois avec les textes de grande taille et les textes de petite taille.
• Testez les couleurs de votre marque sur votre police de caractères. Commencez parplacer le texte noir sur un fond blanc et le texte blanc sur un fond noir. Appliquez ensuite la couleur principale de votre marque au texte et voyez comment la police de caractères fonctionne sur les fonds blancs et noirs. Inversez les couleurs pour voir comment le texte blanc et noir se présente sur un fond dans la couleur principale de votre marque.

Épaisseur et style

Une police de caractères (par exemple, Montserrat par Julieta Ulanovsky et son studio) comprend de multiples styles et épaisseurs (par exemple, régulier, gras, italique, fin, noir, etc.) et chacun a une police. Une police est un fichier permettant d'installer et d'utiliser un ensemble de caractères dans une épaisseur de police et un style de texte particuliers. Une police de caractères comportant plusieurs épaisseurs possède une police pour chaque épaisseur ; ensemble, ils sont connus sous le nom de famille de polices.

La police de caractères Montserrat possède une famille de 18 polices : Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black et Black Italic.

L'épaisseur désigne l'épaisseur du tracé d'une lettre. Une police de caractères peut proposer des épaisseurs allant du plus fin à l'ultra-noir et comporter de nombreuses polices entre les deux, tandis que certaines polices de caractères peuvent n'exister que dans une seule épaisseur. Ces épaisseurs sont également associées à un numéro, ce qui est utile à comprendre lors de la programmation ou de la collaboration avec un développeur. Les épaisseurs correspondent généralement à un numéro sur une échelle de 100 à 900, par intervalles de 100 : Regular 400, Medium 500, Semi-Bold 600, Bold 700, etc.

Le style de police est l'ajustement des caractères ou de la casse, comme l'italique et les majuscules respectivement. Certaines polices de caractères n'ont pas d'option de style et n'offrent parfois qu'une épaisseur Regular.

Les majuscules et les minuscules, aussi appelées simplement « casse », distinguent les lettres plus petites telles que les minuscules des lettres plus grandes telles que les majuscules. La plupart des ensembles de polices de caractères possèdent des lettres des deux types, tandis que les polices telles que Bangers ne possèdent que des majuscules. Les polices de caractères ne comportant que des majuscules ou que des minuscules sont beaucoup moins courantes.

En anglais, les différents styles de casse sont utilisés différemment, selon les circonstances :

• La Casse De Titre est un Style de Casse Mixte Où Tous Les Mots D'une Phrase Sont Capitalisés À L'exception Des Articles, Des Prépositions Courtes Et Des Conjonctions. Ces Exceptions Sont Quelque Peu Subjectives.
• La casse de phrase est le style habituel du texte (par exemple, cette phrase).
• Dans le style TOUT EN MAJUSCULES, le texte est intégralement en majuscules. Ce style est couramment utilisé pour les titres, le wordmark, le texte des boutons ou d'autres types d'étiquettes. Utilisez-le pour l'accentuation, plutôt que pour du texte long où l'absence de hampes et de jambages peut rendre sa lecture difficile à la longue. Le style tout en majuscules étant également utilisé en ligne pour signifier un cri, évitez de l'utiliser sur les interfaces de chat.
• Les petites majuscules sont similaires en forme aux lettres majuscules mais sont aussi hautes que la hauteur d'x du caractère. Les petites majuscules sont utilisées pour faire la distinction entre le contenu et le texte principal/les titres, mais ne sont pas offertes dans de nombreuses polices de caractères.
• Le style tout en minuscules est un choix stylistique utilisé dans certains produits et wordmarks pour des raisons esthétiques.

Taille

Définir et modifier la taille des caractères peut être une décision difficile. Cela dépendra en grande partie du support sur lequel le texte apparaîtra (par exemple, papier, téléphone mobile ou panneau d'affichage) et de l'appareil de l'utilisateur ou de la réactivité du design.

Il est important de déterminer la hiérarchie avec vos choix de caractères, en utilisant la taille comme un élément d'accentuation.

Dans le développement web, certaines tailles clés doivent être définies, telles que les titres, les sous-titres, le texte principal, le texte des menus et des pieds de page, etc. Beaucoup de designers commencent par la taille du titre, également connue sous le nom de H1, mais il peut être utile de commencer par la taille du texte principal, car c'est ainsi que les développeurs front-end pourraient procéder. Lorsqu'un développeur travaille en ems, une unité de mesure basée sur l'échelle, la taille du texte principal est de 1em et chaque autre taille de texte est un multiple ou une fraction de celle-ci.

Par exemple, une taille de texte courante sur le web est 16 px. Le H1 peut être défini sur 3em, ou trois fois la taille du texte principal, c'est-à-dire 48 px ici. Comme la page web sera conçue pour plusieurs tailles d'écran, les designs que vous créez peuvent nécessiter différentes tailles de police selon l'appareil du client. Le développeur peut ajuster la taille du texte principal aux dimensions du navigateur de votre client, et tout le texte restant s'adaptera en conséquence.

Détails

En typographie, il est beaucoup question des détails mineurs et des nuances.

Par exemple, lors de la mise en page d'un texte, l'un des aspects à examiner est l'irrégularité. L'irrégularité désigne le bord inégal du texte aligné à gauche et à droite. Elle peut être manipulée en augmentant ou en diminuant la largeur d'une zone de texte ou en modifiant l'espace entre les lettres du texte entier.

Un ou deux mots se retrouvant à la fin d'un paragraphe sont généralement appelés « veufs ». Ou « orphelins » s'ils se retrouvent au début de la colonne suivante.

Cependant, comme le souligne May-Li Khoe :

Désignez plutôt ces mots par le terme « éléments pendants ».

Pendant que les zones de texte sont ajustées pour éviter les éléments pendants, la longueur de ligne est également ajustée. Pour le texte principal en anglais, limiter la longueur de ligne à environ 40 à 60 caractères, espaces et ponctuation compris, est idéal pour l'accessibilité et la lisibilité. Si la longueur de ligne doit dépasser 60 caractères, augmentez la hauteur de ligne pour une meilleure lisibilité.

L'un des moyens les plus simples de donner à un document ou à une interface un aspect bien conçu est la cohérence dans l'emplacement des objets dans l'espace.

Par exemple, l'écran de votre application possède un titre situé à 100 px du haut de la frame ou de l'écran. Vous souhaitez que sur tous les autres écrans de l'application ayant un titre similaire, ce dernier soit au même endroit.

Ici, les guides et les mesures sont vos alliés : il vous suffit de cliquer et de faire glisser à partir d'une règle dans Figma pour créer un guide, et de maintenir la touche Alt enfoncée lorsqu'un objet est sélectionné pour voir la distance qui le sépare des objets environnants.

Prenons l'exemple du côté gauche, ou marge verticale gauche, d'un site web, d'une affiche, de l'écran d'une application, d'une infographie, etc., contenant un logo, une image, un en-tête et le texte principal. Aligner ces éléments les uns par rapport aux autres facilitera le déplacement de l'œil vers le bas de la page, mais permettra également d'obtenir une mise en page de ce contenu réfléchie et intentionnelle.

La justification est un concept d'alignement spécifique aux blocs ou aux lignes de texte.

• Dans la justification à gauche, le début de chaque ligne de texte commence à la même valeur x le long d'une marge gauche. On parle également d'alignement à gauche, et cela a pour effet de créer une irrégularité à droite.
• Dans la justification à droite, la fin de chaque ligne de texte est alignée sur une marge droite. On parle également d'alignement à droite, et cela a pour effet de créer une irrégularité à gauche.
• Dans la justification entière, les extrémités gauche et droite des lignes de texte sont alignées sur les deux côtés de la zone de texte. L'espacement des lettres et des mots est ajusté pour donner à chaque ligne de texte une largeur cohérente. Dans la justification entière, il n'y a pas d'irrégularité.
• Un texte centré est dépourvu de justification.

Lancez-vous dans l'exploration typographique avec Figma

Figma fournit des ressources de design professionnelles pour vous aider à démarrer, y compris l'outil de design Figma et un exemple d'exploration de polices de caractères. Vous pouvez également créer un moodboard de marque à l'aide du créateur de moodboard de FigJam.

Pour obtenir d'autres conseils d'expert, consultez l'article de Figma sur la conception et la mise en œuvre de systèmes de typographie dans Figma.

Besoin d'inspiration ? Découvrez la vaste bibliothèque de modèles de typographie, d'exemples et de guides stylistiques partagée par la communauté Figma.

Prêt à trouver une police de caractères qui améliore votre marque ?