Que ce soit sur nos téléphones, dans des livres ou sur des sites Web, nous digérons constamment les mots écrits. Des livrets d’instructions aux devantures de magasins, le type est tout autour de nous. Nous réfléchissons souvent à la puissance du mot écrit, mais nous considérons rarement le rôle du concepteur dans l’émulation du ton du mot ou de la phrase.
En coulisses, un designer a pris le temps de réfléchir à la relation entre l’aspect du texte et ce que dit le texte. En réalité, différentes ambiances, ambiances et émotions peuvent être exprimées simplement à travers le choix du type. Mais qu’est-ce que la typographie – et pourquoi est-elle si vitale ?
Dans cet article, nous allons lever le couvercle sur tout ce que vous devez savoir sur la typographie. Nous commencerons par la définition de la typographie, y compris une brève histoire de ses origines. Nous aborderons ensuite les avantages d’une bonne typographie et l’impact qu’elle peut avoir sur vos utilisateurs. Enfin, nous examinerons les différents éléments qui composent la typographie, et ce qu’ils signifient tous.
Voici ce que nous allons couvrir:
- Qu’est-ce que la typographie ?
- Pourquoi la typographie est-elle importante ?
- Les différents éléments de la typographie
- Comment choisir la bonne police pour votre site web
- Conclusion
Prêt? Plongeons dedans !
Qu’est-ce que la typographie ?
Commençons par les bases : qu’est-ce que la typographie ? En substance, la typographie est l’art d’arranger les lettres et le texte de manière à rendre la copie lisible, claire et visuellement attrayante pour le lecteur. La typographie implique le style de police, l’apparence et la structure, qui vise à susciter certaines émotions et à transmettre des messages spécifiques. Bref, la typographie est ce qui donne vie au texte.
Dans la vidéo ci—dessous, Olga, la mentor en conception d’interface utilisateur de CareerFoundry, explique pourquoi la typographie est importante – et quelle différence elle fait pour vos utilisateurs.
La typographie peut être datée du 11ème siècle, lors de l’innovation du type mobile. Avant l’ère numérique, la typographie était un métier spécialisé associé aux livres et aux magazines, puis aux travaux publics. Le premier exemple de typographie peut être vu dans la Bible de Gutenberg, qui a lancé une révolution typographique en Occident. Fait amusant: le style de type utilisé dans la Bible de Gutenberg est maintenant connu sous le nom de Textura, et vous le trouverez dans le menu déroulant des polices sur les principales applications de bureau aujourd’hui!
Avance rapide jusqu’à nos jours, où la typographie est principalement associée à la fois au monde numérique et à l’impression. Avec la naissance d’Internet est venue une explosion créative de l’art de la typographie. Soudain, les concepteurs de sites Web disposaient d’une abondance de polices et d’options de type, rendant la typographie plus diversifiée que jamais.
Pourquoi la typographie est-elle importante ?
La typographie est bien plus que le simple choix de belles polices: c’est un élément essentiel de la conception de l’interface utilisateur. Une bonne typographie établira une forte hiérarchie visuelle, fournira un équilibre graphique au site Web et donnera le ton général du produit. La typographie doit guider et informer vos utilisateurs, optimiser la lisibilité et l’accessibilité, et assurer une excellente expérience utilisateur.
Approfondissons un peu pourquoi la typographie est si importante.
La typographie construit la reconnaissance de la marque
Non seulement une bonne typographie améliorera la personnalité du site Web, mais vos utilisateurs commenceront subliminalement à associer la police de caractères présentée sur votre site à votre marque. Une typographie unique et cohérente vous aidera à établir un fort suivi des utilisateurs, à établir une confiance avec vos utilisateurs et à faire progresser votre marque.
La typographie influence la prise de décision
La typographie a un effet profond sur la façon dont les utilisateurs digèrent et perçoivent les informations véhiculées par le texte. Le type accrocheur est beaucoup plus convaincant que les polices faibles qui ne renforcent pas le message du texte.
La typographie retient l’attention des lecteurs
Une bonne typographie pourrait faire la différence entre une personne qui reste sur votre site Web pendant une minute ou une demi-heure. Il est important que votre site Web soit visuellement stimulant et mémorable, et la typographie joue un rôle énorme dans ce processus.
Les différents éléments de la typographie
Pour commencer la typographie, vous devez d’abord vous familiariser avec les huit éléments de conception typographique essentiels.
Polices et polices
Il y a une certaine confusion entourant la différence entre les polices et les polices, beaucoup traitant les deux comme synonymes. Une police de caractères est un style de conception qui comprend une myriade de caractères de tailles et de poids variables, tandis qu’une police est une représentation graphique du caractère du texte. En termes simples, une police de caractères est une famille de polices connexes, tandis que les polices se réfèrent aux poids, largeurs et styles qui constituent une police de caractères.
Il existe trois types de police de base: serif, sans-serif et décoratif. Pour garder l’interface épurée et simplifiée, un bon concepteur n’utilisera jamais plus de trois polices — et minimisera les polices décoratives. La plupart des concepteurs d’interface utilisateur associeront des polices à empattement avec des polices sans empattement, comme mettre du texte du corps principal dans une police à empattement et mettre votre titre dans une police sans empattement, ou vice-versa.
Contraste
Tout comme la hiérarchie, le contraste aide à transmettre les idées ou les messages que vous souhaitez mettre en valeur à vos lecteurs. Passer du temps sur le contraste rend votre texte intéressant, significatif et attirant l’attention. La plupart des concepteurs créent du contraste en jouant avec différentes polices de caractères, couleurs, styles et tailles pour créer un impact et diviser la page.
Cohérence
Garder vos polices cohérentes est la clé pour éviter une interface confuse et désordonnée. Lors de la transmission d’informations, il est essentiel de s’en tenir au même style de police, afin que vos lecteurs comprennent instantanément ce qu’ils lisent et commencent à remarquer un motif. Bien qu’il soit acceptable de jouer avec les niveaux de hiérarchie dans une certaine mesure, il est recommandé d’établir une hiérarchie cohérente des polices de caractères (une police cohérente pour les en-têtes, une autre pour les sous-titres) et de s’y tenir.
Espace blanc
Souvent appelé « espace négatif », l’espace blanc est l’espace autour du texte ou des graphiques. Il est souvent négligé et a tendance à passer inaperçu par l’utilisateur, mais une bonne utilisation des espaces blancs garantit que l’interface est épurée et que le texte est lisible. L’espace blanc peut même attirer l’attention sur le texte et offre une expérience esthétique globale. Les espaces blancs prennent souvent la forme de marges, de remplissage ou simplement de zones sans texte ni graphique.
Alignement
L’alignement est le processus d’unification et de composition du texte, des graphiques et des images pour s’assurer qu’il y a un espace, une taille et des distances égaux entre chaque élément. De nombreux concepteurs d’interface utilisateur créent des marges pour s’assurer que leur logo, leur en-tête et le corps du texte sont alignés les uns avec les autres. Lors de l’alignement de votre interface utilisateur, il est recommandé de prêter attention aux normes de l’industrie. Par exemple, aligner votre texte à droite semblera contre-intuitif pour les lecteurs qui lisent de gauche à droite.
Couleur
La couleur est l’un des éléments les plus excitants de la typographie. C’est là que les concepteurs peuvent vraiment faire preuve de créativité et élever l’interface à un nouveau niveau. La couleur du texte, cependant, n’est pas à prendre à la légère: clouer la couleur de votre police peut faire ressortir le texte et transmettre le ton du message — mais se tromper peut entraîner une interface et un texte désordonnés qui se heurtent aux couleurs du site.
La couleur a trois composantes clés : la valeur, la teinte et la saturation. Un bon concepteur saura équilibrer ces trois composantes pour rendre le texte à la fois accrocheur et clairement lisible, même pour les personnes ayant une déficience visuelle. Souvent, les concepteurs testeront cela en visualisant le texte en niveaux de gris (sans couleur) et en ajustant si le texte est trop sombre ou trop clair par rapport à la couleur d’arrière-plan.
Hiérarchie
Établir une hiérarchie est l’un des principes les plus vitaux de la typographie. La hiérarchie typographique vise à créer une distinction claire entre les pièces de copie proéminentes qui doivent être remarquées et lues en premier, et la copie de texte standard. À une époque de courte durée d’attention provoquée par les médias sociaux, les concepteurs sont invités à être concis et à créer des polices de caractères qui permettent aux utilisateurs de consommer les informations nécessaires en peu de temps.
La hiérarchie peut être créée en utilisant le dimensionnement, la couleur, le contraste et l’alignement. Par exemple, si vous avez une ligne de copie avec une icône de point d’exclamation au début qui est en rouge et plus grande que la copie précédente, c’est un indice visuel pour les lecteurs qu’il s’agit d’un appel à l’action. L’exemple le plus typique de hiérarchie typographique est la taille: les titres doivent toujours être plus grands que les sous-titres et le texte standard.
Comment choisissez-vous la bonne police de caractères pour votre site Web?
Maintenant que nous nous sommes familiarisés avec les différents éléments de typographie, parlons du processus de choix des polices de caractères pour votre interface. Avec autant de polices et de polices différentes parmi lesquelles choisir, il est facile de se sentir dépassé. Faire le bon choix dépend de bien plus que de voir ce qui est beau. Voici quelques considérations clés:
Pensez à la personnalité
Comment voulez-vous que vos utilisateurs se sentent lorsqu’ils entrent pour la première fois sur votre site Web. Voulez-vous imiter une ambiance conviviale? Voulez-vous que le site se sente haut de gamme, accueillant, ludique ou sérieux? Il est impératif que la typographie reflète la personnalité de la marque ou du produit. Un bon point de départ face à ce défi est de définir les traits de base de votre marque et de commencer à rassembler des polices de caractères qui reflètent ces traits. De là, vous pouvez commencer à remarquer une tendance.
Réfléchir sur le ton
Il est tout aussi important de considérer comment la police s’harmonise avec le ton du message. Par exemple, si vous souhaitez transmettre des informations sérieuses ou importantes, choisissez une police moins stylisée ou décorative qui soit à la fois clairement lisible et limitera la distraction.
Ne lésinez pas sur la fonction
La fonction est tout aussi vitale que la forme: il n’y a rien de pire qu’un site Web qui a l’air joli mais qui est entièrement illisible, ce qui vous amène à cliquer sur le mauvais bouton ou à prendre un mauvais virage car les instructions n’étaient pas claires. Lorsque vous décidez des polices à inclure dans votre interface, mettez de côté le style, l’esthétique et la voix et réfléchissez à la lisibilité, à la lisibilité et à l’accessibilité de la police. Le texte peut-il être lisible sans contrainte? Les caractères sont-ils suffisamment distincts ?
Considérez les performances
Une chose que de nombreux concepteurs négligent souvent est de choisir des polices de caractères compatibles avec les navigateurs Web. Les bibliothèques de polices couramment utilisées telles que Google Fonts offrent des fichiers de polices basés sur le Web qui peuvent être parfaitement rendus dans un navigateur sans aucun problème. Conseil de pro: lorsque vous téléchargez des polices Web, ne téléchargez jamais plus de jeux de caractères que nécessaire. De cette façon, vous éviterez l’excès de poids!
Inspirez-vous
Si vous ne savez pas par où commencer, prenez le temps de voir ce que font les autres. Ouvrez les yeux sur la typographie que vous voyez autour de vous. Pouvez-vous remarquer des modèles similaires? Pouvez-vous voir de bons et de mauvais exemples de typographie? Même en suivant les hashtags de typographie sur les réseaux sociaux ou en recherchant la typographie sur Pinterest, vous aurez de bonnes idées de ce qui existe. Vous pouvez également vous inspirer de ces huit tendances typographiques.
Prenez le temps de tester
La meilleure façon de déchiffrer quelle police utiliser pour votre interface ? Testez, testez et testez! En recueillant des commentaires utiles de vrais utilisateurs, vous aurez un aperçu plus clair de ce qui fonctionne, de ce qui ne fonctionne pas, de ce qui est lisible et de ce qui semble contre-intuitif ou maladroit.
Conclusion
La typographie est souvent négligée, mais c’est un élément crucial de la conception de l’interface utilisateur. Maîtriser la typographie vous permettra de devenir un concepteur d’interface utilisateur fantastique! Si vous ne savez pas par où commencer, pourquoi ne pas vous diriger vers vos sites Web préférés et commencer à noter les polices de caractères pour lesquelles ils sont allés.
Envie d’en savoir plus sur la conception de l’interface utilisateur ? Consultez ces articles de blog connexes:
- 10 exemples de beaux blogs qui ont cloué leur conception d’interface utilisateur
- 32 éléments d’interface utilisateur pour les concepteurs d’interface utilisateur: votre glossaire ultime
- Voici comment concevoir une icône à partir de zéro: un guide étape par étape