Beaucoup de plateformes de médias sociaux et de géants de la technologie changent la police de leur logo à un moment ou à un autre. Vous ne vous êtes jamais demandé pourquoi ?
Google, Twitter, Instagram, ils ont tous, avec le temps, fait des retouches à leurs logos en matière de typographie. Exemple de typographie : la police du logo original de Facebook était celle du nom Klavika. Elle a été choisie en 2005 pour développer l’image de marque du réseau social. Mais en 2015, Facebook a décidé de relooker son image en utilisant une police qui lui était propre, bien que basée sur la précédente. Ils voulaient le rendre plus convivial.
Il se trouve que la typographie est une partie importante du branding de toute marque.
En 2020, l’une des plus grandes tendances en matière de conception de sites web était, à côté d’une tendance minimaliste, la typographie en gras. Le mariage est à la fois élégant et moderne, mettant l’accent sur le message plutôt que de distraire les utilisateurs avec des graphiques inutiles et un design encombrant (chose possible avec Strikingly).
D’ailleurs, par minimaliste, nous ne voulons pas dire rasoir et simple. Le minimalisme occupe une place particulière dans la conception des sites web modernes, car il permet de garder le cap sur le message et de créer un impact énorme sur le lecteur. Que fait une conception de site web simple mais pas ennuyeuse ?
Là encore, une typographie intéressante.
Pour attirer l’attention sur le contenu textuel de votre site web, il faut utiliser une typographie impressionnante. Un choix remarquable de styles de police fait ressortir votre message. L’éditeur de site de Strikingly comporte un large éventail de styles de police à utiliser pour cette raison. Et si vous ne trouvez pas le style souhaité ou si vous avez une police différente en tête, vous pouvez aussi télécharger votre propre style personnalisé et l’utiliser sur votre site.
Bon, puisque la typographie a autant d’importance pour la conception de sites web, autant faire focus sur le sujet et essayer de voir ce qu’elle signifie vraiment, quels sont les concepts clés en typographie à retenir, et comment les appliquer sur votre site web pour définir et présenter votre image de marque.
La typographie en bref
La typographie est la façon d’écrire avec différents types de lettres et de calligraphie. Elle est surtout importante lorsqu’il s’agit de publicité, de marketing, de design, d’art et de nombreuses autres activités dans lesquelles le visuel est essentiel pour attirer l’attention du public ou susciter des réactions différentes.
Le champ d’attention des gens est toujours en diminution, et ne compte parfois plus que quelques secondes. Les marques ont besoin ainsi d’attirer l’attention de leurs clients cibles dans cette fraction de temps. Les graphistes se servent donc du pouvoir de la typographie pour attirer immédiatement l’attention.
Cela est également essentiel en termes de ce qu’on veut communiquer, car un texte ou un document officiel ne sera pas la même chose qu’un texte ou un document en langage familier plus décontracté. Le public se sentira plus attiré et pourra se sentir concerné par une forme d’écriture et non par une autre.
Il arrive de voir une typographie par exemple plus formelle et plus sérieuse dans les messages et les textes institutionnels comme ceux d’un établissement médical, alors que dans la publicité destinée aux adolescents, par exemple, on utilise des polices plus souples, parfois même amusantes. Cela tient au fait que les polices de caractères ont, elles aussi, de la personnalité.
Ce que l’on appelle la psychologie des polices renvoie à l’étude de l’impact des différentes polices sur les pensées, les sentiments et les comportements.
Dans le passé, la typographie était une spécialité et une profession réservée à quelques-uns seulement. Jusqu’alors, il était très clair qui était typographe et quelle était la profession. Aujourd’hui, la technologie et les ordis ont démocratisé la typographie, mettant la technique à la portée de nombreux, graphistes ou non.
Mais ce n’est pas seulement une question de personnalité. La typographie donne aussi un objectif à votre marque. En effet, les graphistes utilisent la typographie pour harmoniser le texte au sein du design.
Une typographie design se révèle être un élément visuel en soi et non seulement textuel. Cela permet de créer un contenu ayant un but précis. L’utilisation planifiée des polices de caractères permet aux graphistes de rendre un design esthétique et agréable.
Autrement dit, un emploi stratégique de la typographie est essentiel pour qu’une marque, surtout s’il s’agit d’une start-up en herbe, se distingue sur son marché de niche. Cette composante du design donne aux logos et aux sites web un aspect distinctif.
Après ce tour d’horizon de la typographie et de sa finalité, passons à quelques détails sur cette activité que vous pouvez explorer et appliquer sur n’importe quel texte pour le distinguer du reste.
Notions clés en typographie
Une police de caractères signifie les poids, largeurs et styles d’une police de caractères et constitue une représentation graphique des caractères du texte. Les polices d’écriture ont une largeur et une hauteur qui font référence à son style.
Toutes les polices de caractères ont des tailles variables. C’est pourquoi les graphistes utilisent la « hauteur x, » ou longueur moyenne, pour chaque caractère, qui est généralement la hauteur de la lettre « x » de la police.
Il existe différentes variantes de polices de caractères, telles que les polices avec empattement, les polices sans empattement (« sans serif ») et les petites capitales, utilisées pour diverses raisons. Un peu de mélange ne fait pas de mal, mais en général, trois polices de caractères au maximum suffisent et il faut s’assurer qu’elles correspondent toutes à votre image de marque.
On retrouve généralement le modèle d’écriture avec empattement dans les livres, les magazines et les documents publicitaires imprimés. Il évoque la fiabilité, le confort, la tradition et le respect. En revanche, le modèle d’écriture sans empattement est plus souvent utilisé dans les sites web parce qu’il rend le texte plus facile à lire. Il a un aspect objectif et moderne.
Quant au modèle d’écriture scripte, il inspire l’élégance et la créativité. On le découvre généralement sur les sites de gestion d’événements et dans les secteurs qui font appel au romantisme et à la fantaisie, tels que les sites de mariage.
Les polices monospace, elles, sont toutes les polices dans lesquelles chaque forme de lettre occupe le même espace horizontal, c’est-à-dire la largeur de la typographie. Exemple d’écriture monospace est, entre autres, souvent présent dans les éditeurs de code de programmation.
Outre les polices installées sur votre ordinateur, vous pouvez également vous servir des polices Web, à savoir des polices qui ne sont pas chargées à partir de l’appareil du visiteur de la page, mais à partir d’Internet (en utilisant une adresse spécifiée dans le CSS de la page). Bien que les polices Web soient répandues dans la conception des sites modernes, elles restent expérimentales.
Surtout si vous utilisez des polices Web, mais aussi en général, veillez à utiliser au moins une police de repli (fallback). Une police de repli est une police qui sera utilisée si vos autres choix ne sont pas utilisables.
Les polices qu’on peut utiliser dans ce cas sont :
- Helvetica et Arial dans la catégorie sans empattement ;
- Times New Roman et Times dans la catégorie avec empattement ; et,
- Courier New et Courier dans la catégorie monospace.
En ce qui concerne la longueur des lignes, il existe un certain nombre de théories pour vous aider à définir la mesure idéale pour la typographie d’un texte. Une règle empirique est que vos lignes doivent avoir une longueur de 2 à 3 alphabets (soit 52 à 78 caractères, espaces compris).
Cela explique pourquoi les journaux utilisent traditionnellement des colonnes, plutôt que des lignes qui occupent toute la largeur de la page : c’est une question de lisibilité.
Il y a aussi la hiérarchie du texte, qui consiste à guider le lecteur pour qu’il remarque les en-têtes, les sous-titres et les types de corps selon l’importance du contenu du texte.
Les titres ont une meilleure apparence avec les polices d’affichage ou « display fonts. » Une police d’affichage est toute police destinée à être utilisée en petites tranches, plutôt que pour des blocs de texte. Les polices d’affichage sont souvent créées uniquement pour être utilisées en grandes tailles, comme pour les titres et les en-têtes.
La valeur hiérarchique est déterminée par la taille, qui correspond à l’utilisation de l’espacement, des dimensions et de la couleur.
La couleur du texte aide à faire ressortir un texte. Elle transmet le ton d’un message de marque. Assurez-vous que les couleurs du texte et de l’arrière-plan sont appropriées ; la couleur de la police doit se distinguer nettement de la couleur de l’arrière-plan.
Autre élément crucial de la typographie d’un texte : l’alignement, qui permet d’unifier le texte, de lui donner la même taille et le même espacement, et de garantir la bonne distance entre chaque élément du texte.
Le contraste est un autre ingrédient typographique essentiel à la mise en valeur d’une idée ou d’un message par les graphistes. Il donne au texte un sens, attire l’attention et le rend attrayant.
La motion design typographie est une autre technique utilisée pour emphatiser un texte et pour mettre en évidence dans la page de nouvelles informations ou des offres temporaires par exemple.
Les graphistes savent que, dans le motion design, typographie est centrale. Le motion design, ou conception graphique mise en animation, fait appel au texte pour expliquer, signaler des transitions, transcrire le langage parlé pour l’accessibilité et une pléthore d’autres fonctions, et la typographie est ce qui fait ressortir le texte. La typographie est ce qui permet au texte de se démarquer.
Ainsi, vous pouvez créer des images avec du texte dynamique, ou tout simplement utiliser le CSS pour animer du texte brut, ou encore voir comment Strikingly vous permet d’animer pratiquement chaque élément de la page.
Démonstration : Checklist typographique d’une page de destination
Les visiteurs d’une landing page, ou page de destination, vont prendre leur décision de rester ou non en trois secondes, au regard des éléments visuels présentés. Consciemment ou non, leurs yeux scrutent vite certains mots ; ils évaluent la crédibilité de la page en fonction de son design.
Étant un facteur essentiel ici, la typographie choisie pour réaliser votre page de destination pèse lourd dans la balance.
Voici une checklist à parcourir pour mettre en place une page de destination typographiquement correcte.
1. Limitez-vous en général à une seule famille de polices. C’est peut-être le plus facile des principes de conception à appliquer sans problème. Suivez cette seule règle et tout ira bien.
Par exemple, Helvetica, Arial, et Times, ce sont toutes des familles de polices différentes. Times est une famille de polices, tandis que Times Roman, Times Italic et Times Bold sont des polices individuelles qui composent la famille Times.
Sur Strikingly, lorsque vous cliquez sur une zone de texte, une boîte à outils s’affiche avec des boutons pour le gras, l’italique et d’autres fonctions de formatage.
2. Évitez les polices trop décoratives. Les polices Scripte dégradent la lisibilité et la clarté, ce qui nuit au confort du lecteur. N’oubliez pas que les polices de caractères sont là pour être lues, et non pour faire joli. Les lecteurs ne vont pas agir sur un texte qu’ils ne lisent pas.
3. Stylez les polices intelligemment. Une famille de polices vous permet de faire plein de choses avec votre texte pour le mettre au diapason de son message. La plupart des familles de polices vous donnent la possibilité d’ajouter des italiques, des caractères gras, des soulignements ou des caractères plus grands, par exemple pour mettre l’accent ou créer des liens.
En règle générale, ne changez pas le style de votre texte, à moins que vous ne sentiez que votre message manque de visibilité sur la page. Ce n’est qu’à ce moment-là qu’il faut agrandir le texte, le mettre en italique, en gras ou en majuscule.
Et soyez cohérent si vous commencez à faire des changements. Si vous utilisez des majuscules pour tous les titres, il faut le faire systématiquement.
4. Utilisez une police distinctive pour l’appel à l’action. L’appel à l’action est une expression spécifique, généralement sur un bouton, qui achève l’action que vous souhaitez déclencher chez les visiteurs. C’est une phrase qui doit vraiment se démarquer du reste de la page.
Cela peut exiger un choix de police différent de celui du corps et du titre de la page.
Strikingly fait facile en attribuant une sélection de police différente aux niveaux de contenu, dans les sections « Fonts » de la colonne de gauche.
5. Adaptez la typographie au mobile. Le portable est aujourd’hui le support visuel dominant. L’idéal est donc de concevoir un design avec une typographie adaptée.
Si vous avez une police qui s’affiche bien à l’écran de votre ordinateur mais qui ne se réduit pas correctement sur mobile, les visiteurs de votre page pourraient écourter leur visite, ou ne pas même remarquer l’appel à l’action.
Appliquez ce que l’on appelle parfois la typographie réactive ou la typographie fluide.
Utilisez des unités de taille de police telles que « rem » pour la taille relative à la police de l’élément racine (l’élément «
), » « vw » relative à la largeur de la fenêtre, et « vh » relative à la hauteur de la fenêtre.Sur Strikingly, vous pouvez éditer votre CSS via « Paramètres > Afficher les options avancées > Code Personnalisé. » Voilà qui est simple !
Aller plus loin
Maintenant, vous devriez vous être fait une idée de l’importance de la typographie, de ce qu’elle est et de ses concepts clés. Par ailleurs, si vous envisagez de faire appel à un graphiste, vous devez penser à quelques détails avant de le recruter, tels que le contrôle, les limites budgétaires et les contraintes de temps.
Et si vous êtes vous-même concepteur et que vous souhaitez mettre en valeur vos compétences, Strikingly est taillé pour vous. Grâce à cette solution, vous pouvez créer des pages web uniques en un rien de temps et en toute simplicité.
Mais si vous êtes un passionné de typographie graphisme et design et que vous vous demandez par où commencer, jetez un coup d’œil à cet article qui vous explique les étapes à suivre en prenant l’exemple de la conception d’un site de e-commerce, ou bien inscrivez-vous à Strikingly (si vous ne l’avez pas encore fait, cela prend environ une minute) et commencez à apprendre en jouant avec les nombreuses fonctionnalités de conception de sites web qu’il propose.
