La typographie peut évoquer un sentiment, rappeler une marque ou créer une atmosphère.
Pensez à l’audace du logo de FedEx (avec une flèche astucieusement dissimulée) ou au style classique de la lettre noire du mastodonte du New York Times. Pensez à la mise en page de votre magazine préféré lorsqu’il s’agit de la police de caractères rédactionnelle. Pensez à la manière dont différentes polices sont utilisées dans différentes applications sur votre téléphone.
Mais la typographie peut aussi distraire et détourner l’attention, voire être illisible si la typographie est mauvaise. Pensez à la dernière fois où vous avez été dérouté par une police de caractères bâclée dans une application, induit en erreur par une signalétique, ou avez eu du mal à comprendre une brochure ou un emballage de produit illisible.
Quand on y pense, l’art et la science de la typographie sont à la base de toute communication, y compris les logos, les textes publicitaires, les titres de magazines et de journaux et les titres de livres. Parlons plus en détail des raisons pour lesquelles la typographie est si importante.
Sommaire:
- Qu’est-ce que la typographie ?
Quelle est l’importance de la typographie ?
- La reconnaissance d’une marque est aidée par la typographie
- Les décisions sont influencées par la typographie
- La typographie captive le lecteur
Les différents éléments typographiques
- Polices de caractères et fontes
- Contraste
- Cohérence
- Espace blanc
- Alignement
- Couleur
- Hiérarchie
Conseils typographiques pour votre site web
- Considérez votre personnalité
- Tenez compte de la tonalité
- Ne lésinez pas sur les fonctionnalités
- Tenez compte de la performance
- Laissez-vous inspirer
- Prenez le temps de tester
- Voici Strikingly
- Conclusion
Qu’est-ce que la typographie ?
Avant de suivre ce cours, la typographie consistait plutôt à faire défiler un menu déroulant jusqu’à ce que nous trouvions une police de caractères qui nous semblait convenir.
Il s’est toutefois avéré que c’était bien plus que cela. L’art et la technique de l’agencement des caractères, c’est-à-dire des lettres et des signes, s'appellent la typographie.
Il ne s’agit pas seulement de la conception de lettres et de signes, mais aussi de la disposition de ces lettres et signes. On entend par là le choix de la taille des points, de la longueur des lignes et de l’espacement sur une seule ligne et sur toute une page ou un ouvrage.
Quelle est l’importance de la typographie ?
Image de site d’utilisateur Strikingly
La typographie ne se limite pas au choix de belles polices de caractères ; elle fait partie intégrante du design de l’interface utilisateur. Une bonne typographie crée une hiérarchie visuelle forte, assure un équilibre graphique sur le site et définit le ton général du produit.
Les utilisateurs doivent être guidés et informés par la typographie afin d’améliorer la lisibilité et l’accessibilité tout en créant une expérience utilisateur positive. Voyons plus en détail pourquoi la typographie est si importante.
∙ La reconnaissance d’une marque est aidée par la typographie
Une bonne typographie souligne non seulement la personnalité de votre site web, mais vos visiteurs commenceront aussi inconsciemment à associer la police de caractères de votre site web à votre marque.
Une typographie unique et cohérente vous aide à construire une base d’utilisateurs solide, à inspirer confiance à vos utilisateurs et à faire connaître votre marque.
∙ Les décisions sont influencées par la typographie
La typographie a une influence considérable sur la manière dont les utilisateurs reçoivent et perçoivent les informations transmises par le texte. Les polices fortes, qui renforcent le message du texte, sont bien plus convaincantes que les polices faibles, qui ne soutiennent pas le message du texte.
∙ La typographie captive le lecteur
Une bonne typographie peut faire la différence entre un visiteur qui passe une minute ou une demi-heure sur votre site. Votre site doit être visuellement stimulant et mémorable, et la typographie joue un rôle important à cet égard.
Les différents éléments typographiques
Image de site d’utilisateur Strikingly
Pour pouvoir commencer à travailler la typographie, vous devez d’abord maîtriser les huit éléments essentiels de la création typographique.
1. Polices de caractères et fontes
La distinction entre les polices de caractères et les fontes (couramment appelées « polices ») est souvent mal comprise et confondue.
Une police de caractères est un style de conception typographique qui comprend un grand nombre de caractères de tailles et de poids différents, tandis qu’une fonte est une représentation graphique d’un caractère de texte.
Une police de caractères est une famille de caractères apparentés, tandis que les fontes sont les poids, les largeurs et les styles qui composent une police de caractères. Les polices avec empattement, les polices sans empattement et les polices décoratives sont les trois plus courantes.
Un bon designer n’utilisera jamais plus de trois fontes et limitera les fontes décoratives au minimum afin de garder l’interface utilisateur claire et aérodynamique.
La plupart des concepteurs d’IU combinent des fontes à empattement avec des fontes sans empattement, par exemple une fontes à empattement pour le texte principal et une fontes sans empattement pour le titre, ou inversement.
2. Contraste
Tout comme la hiérarchie, le contraste contribue à faire comprendre au lecteur quelles idées ou quels messages vous souhaitez mettre en avant.
En vous concentrant sur le contraste, vous pouvez rendre votre texte typographique plus intéressant, plus parlant et plus susceptible d’attirer l’attention. La plupart des concepteurs expérimentent différentes polices, couleurs, styles et tailles afin d’aérer la page et de lui donner plus d’impact.
3. Cohérence
Il est important que les polices de caractères soient cohérentes afin d’éviter une interface confuse et peu claire.
Lorsque l’on transmet des informations, il est important d’utiliser le même style de police pour que les lecteurs comprennent ce qu’ils lisent et reconnaissent un modèle.
S’il est acceptable d’expérimenter dans une certaine mesure avec des niveaux hiérarchiques, il est préférable d’établir et de maintenir une hiérarchie uniforme des polices (une police uniforme pour les titres, une autre pour les intertitres).
4. Espace blanc
L’espace blanc, aussi appelé « espace négatif, » est l’espace autour du texte ou des graphiques. Il est souvent négligé en tant que bon élément typographique. Il n’est pas perçu par les utilisateurs, mais l’utilisation correcte de l’espace blanc permet d’obtenir une interface claire et un texte lisible.
L’espace blanc peut attirer l’attention sur le texte et créer une expérience globale esthétiquement agréable. L’espace blanc est souvent représenté par des marges, des remplissages ou des zones sans texte ou graphiques.
5. Alignement
Le processus d’uniformisation et d’assemblage du texte, des graphiques et des images afin de garantir le même espace, la même taille et le même espacement entre les éléments s’appelle l’alignement.
De nombreux concepteurs d’interfaces utilisateur utilisent des bordures pour s’assurer que leur logo, leur en-tête et le corps du texte sont tous alignés de la même manière.
Lorsque vous alignez votre interface utilisateur, vous devez vous baser sur les normes industrielles. Si vous alignez votre texte vers la droite, il sera contre-intuitif pour les lecteurs qui lisent de gauche à droite.
6. Couleur
La couleur est l’un des éléments les plus passionnants de la typographie. C’est là que les designers peuvent faire preuve de créativité et faire passer l’interface au niveau supérieur. D’un autre côté, la couleur du texte ne doit pas être prise à la légère.
La bonne couleur de police peut faire ressortir le texte et donner le ton du message - mais une mauvaise couleur peut entraîner une interface confuse et un texte qui entre en conflit avec les couleurs du site.
La couleur se compose de trois éléments principaux : Valeur, Teinte et Saturation.
Un bon designer sait comment équilibrer ces trois éléments de manière à ce que le texte soit visuellement attrayant et lisible, même pour les personnes souffrant d’un handicap visuel.
Les designers testent souvent ça en regardant le texte en niveaux de gris (sans couleur) et en effectuant des ajustements si le texte est trop sombre ou trop clair par rapport à la couleur de fond.
7. Hiérarchie
L’un des principes typographiques les plus importants est la hiérarchie.
La hiérarchie typographique vise à faire la distinction entre le texte remarquable, qui doit être perçu et lu en premier, et le texte standard.
À une époque où la durée d’attention est de plus en plus courte en raison des réseaux sociaux, les designers sont encouragés à être concis et à concevoir des polices qui permettent aux utilisateurs de saisir rapidement les informations dont ils ont besoin.
La taille, la couleur, le contraste et l’alignement peuvent être utilisés pour créer une hiérarchie.
Par exemple, si une ligne de texte commence par un point d’exclamation, rouge et plus grand que le texte précédent, c’est un indice visuel pour les lecteurs qu’il s’agit d’un appel à l’action. La taille est l’exemple le plus courant de hiérarchie typographique : les titres devraient toujours être plus grands que les intertitres et le texte normal.
Conseils typographiques pour votre site web
Image de site d’utilisateur Strikingly
Maintenant que nous avons abordé les bases de la typographie, nous allons nous pencher sur le choix des polices de caractères pour votre interface. Face à la multitude de polices et de types de caractères, il est facile de s’y perdre.
Pour faire le bon choix, il ne suffit pas de regarder ce qui est beau. Voici quelques éléments à prendre en compte :
a. Considérez votre personnalité
Quelles émotions souhaitez-vous susciter chez vos visiteurs lorsqu’ils visitent votre site pour la première fois ? Souhaitez-vous que votre environnement soit plus accueillant ? Voulez-vous que le site soit noble, accueillant, ludique ou sérieux ? La typographie doit refléter la personnalité de la marque ou du produit.
Si vous êtes confronté à ce défi, un bon début consiste à définir les caractéristiques clés de votre marque et à trouver des polices qui reflètent ces caractéristiques. À partir de là, vous pourrez identifier un modèle.
b. Tenez compte de la tonalité
Il est aussi important de réfléchir à la manière dont la police de caractères complète le ton du message. Choisissez une police moins stylisée ou décorative, facile à lire et qui ne distrait pas si vous souhaitez transmettre des informations sérieuses ou importantes.
c. Ne lésinez pas sur les fonctionnalités
La fonctionnalité est aussi importante que l’apparence : Il n’y a rien de pire qu’un site web qui a l’air beau, mais qui est complètement illisible et qui fait que l’on clique sur le mauvais bouton ou que l’on va dans la mauvaise direction parce que les instructions ne sont pas claires.
Laissez de côté le style, l’esthétique et la langue lorsque vous décidez des polices à utiliser dans votre interface utilisateur et considérez si la police est lisible, compréhensible et accessible. Le texte peut-il être lu sans effort ? La différenciation entre les caractères est-elle suffisante ?
d. Tenez compte de la performance
De nombreux concepteurs négligent l’importance de choisir des polices compatibles avec les navigateurs Web.
Des bibliothèques de polices très répandues, telles que Google Fonts, proposent des fichiers de polices web qui peuvent être correctement reproduits dans un navigateur.
Conseil de pro : lorsque vous téléchargez des polices web, ne téléchargez jamais plus de polices que vous n’en avez besoin. De cette manière, vous éviterez de prendre du poids.
e. Laissez-vous inspirer
Si vous ne savez pas par où commencer, regardez ce que font les autres.
Observe la typographie que tu vois autour de toi.
Vois-tu des motifs répétitifs ? Pouvez-vous reconnaître les bons et les mauvais exemples de typographie ? En suivant les hashtags de typographie sur les réseaux sociaux ou en recherchant de la typographie sur Pinterest, vous aurez un bon aperçu de ce qui existe. Vous pouvez aussi vous inspirer de ces huit tendances typographiques.
f. Prenez le temps de tester
Quelle est la meilleure façon de déterminer quelle police utiliser pour votre interface ? Testez, testez et testez encore. Les réactions des vrais utilisateurs vous aideront à déterminer ce qui fonctionne, ce qui ne fonctionne pas, ce qui est lisible et ce qui semble contre-intuitif ou encombrant.
Voici Strikingly
Image tirée de Strikingly
Strikingly est un kit de construction de site web gratuit qui permet aux utilisateurs de concevoir leurs propres sites web.
Cela semble compliqué, non ? Mais ne vous inquiétez pas. Strikingly est extrêmement facile à apprendre, et même ceux qui n’ont aucune expérience en matière de développement web s’amuseront. Strikingly contient des outils pour les concepteurs de sites web permettant d’ajouter et de modifier la typographie.
La variété des polices et des couleurs de texte disponibles vous étonnera.
Strikingly vous permet de manipuler les espaces libres autour de votre typographie et de créer un texte visuellement attrayant tout en respectant les bons éléments de conception typographique. Vous pouvez mélanger et personnaliser les styles pour créer une typographie qui met en valeur votre marque.
Conclusion
La typographie est souvent négligée, mais c’est un élément important de la conception d’une interface utilisateur.
Si vous maîtrisez la typographie, vous êtes sur la bonne voie pour devenir un fantastique concepteur d’interface utilisateur. Si vous ne savez pas par où commencer, allez sur vos sites web préférés et prenez des notes sur les polices qu’ils utilisent.
