10 règles de typographie Web que tout designer devrait connaître
Vous pouvez incorporer de nombreux éléments dans votre conception Web qui créeront un engagement et retiendront l’attention de vos visiteurs. Ceux-ci incluent des images, des vidéos et même du son. Cependant, la partie la plus importante de presque tous les sites Web est le contenu que les visiteurs lisent afin d’obtenir les informations qu’ils lisent.
Si vous souhaitez rendre ces informations plus faciles à lire, visuellement intéressantes et pour que ce texte s’ajoute à la conception globale d’un site Web, vous devez comprendre la typographie. C’est l’art et l’habileté de rendre le mot écrit à la fois fonctionnel et esthétique.
Si vous souhaitez apprendre à utiliser la typographie à votre avantage, consultez ces 10 règles que tout designer doit garder à l’esprit.
1 Arrêtez d’utiliser LoremIpsum après le processus de conception initial
Si le contenu est roi, pourquoi n’est-il pas sérieusement pris en compte dans le processus de conception Web ? En utilisant du faux contenu comme espace réservé, les concepteurs de sites Web relèguent le contenu à un rôle secondaire. C’est une grande indication que les priorités de conception sont toutes détraquées. Ce n’est pas si problématique dans les premières étapes, par exemple, lorsque vous simulez une variété de mises en page. Cependant, une fois que vous avez affiné les choses, il est important de travailler avec le contenu Web réel lors de la création de la conception finale. Cela garantit que ce qui est dit sur une page Web particulière a autant d’importance que la mise en page et les éléments visuels.
En plus de cela, avoir du texte réel est important en termes de conception et de mise en page. Vous ne voulez pas être dans la position d’avoir entièrement conçu une page Web, seulement pour apprendre qu’elle ne fonctionne pas avec le contenu réel. C’est pourquoi il est extrêmement important d’obtenir le texte réel de votre client du rédacteur de contenu dès que possible.
2 Faire du texte sans empattement
Le texte Serif est absolument magnifique. Ce sont d’excellentes polices à utiliser pour l’impression et pour les applications d’impression plus importantes telles que les en-têtes, les titres et les sous-titres. Malheureusement, à l’écran, les empattements ne s’adaptent pas bien lorsqu’il s’agit d’affichages de contenu plus petits tels que des blocs de texte. Les empattements qui ont l’air bien à une taille plus grande, rendent le texte difficile à lire lorsque la police devient plus petite. Pour cette raison, il est conseillé de conserver les empattements pour les gros textes et de s’appuyer sur sans lorsque la lisibilité peut être un problème. Mieux encore, adoptez le look épuré, élégant et moderne des sans polices et économisez les empattements pour la presse à imprimer. De cette façon, vous n’aurez jamais à faire face à la dégradation de la lisibilité en faveur de l’utilisation d’une police qui a l’air jolie.
3 Pensez aux guillemets intelligents et autres symboles dès le début du processus de conception
Il y a de fortes chances que vous ayez visité un site Web où certains symboles ne s’afficheraient pas correctement. Parfois, ils sont remplacés par une question ou une chaîne de caractères étranges. D’autres fois, ils ne sont tout simplement pas là. Cela se produit fréquemment avec des guillemets intelligents ou "curly". C’est souvent le résultat d’un texte créé dans MS Word ou un autre package, puis transféré sur une page Web. Les choses ne se traduisent tout simplement pas comme vous le souhaitez. C’est également courant pour l’euro. symbole, caractères à deux octets et autres symboles tirés du contenu étranger.
Afin d’éviter ce problème dans votre conception finale, vous avez plusieurs options. Tout d’abord, vous pouvez modifier votre contenu pour vous débarrasser de ces symboles. Cela fonctionne si vous êtes prêt à changer les symboles en langage naturel. Vous pouvez également utiliser HTML pour vous assurer que les symboles s’affichent correctement plutôt que de vous contenter de copier et coller. Quoi que vous décidiez, assurez-vous de tester la page Web dans tous les navigateurs que vous pouvez. Ce qui pourrait résoudre un problème avec les symboles dans un navigateur pourrait ne pas être efficace du tout dans un autre.
4 compétences CSS avancées sont extrêmement importantes
Si vous avez développé de bonnes compétences en CSS, vos visiteurs devraient pouvoir naviguer à travers les pages de votre site Web de manière absolument transparente. Si vous créez correctement vos feuilles de style, vous pouvez même avoir plusieurs versions de la même page tout en conservant une grande continuité en matière de typographie. Bien sûr, vous n’avez pas besoin d’utiliser beaucoup de ruse. Un bon CSS peut vous aider à éviter des problèmes mineurs mais courants, tels que la modification des polices de caractères et de la taille de la police d’une page à l’autre.
Pourquoi une typographie cohérente est-elle une telle nécessité? L’utilisation de CSS pour maintenir une typographie cohérente donne à votre site Web un aspect professionnel et net. Cela signifie également que vous n’avez pas besoin de penser à la typographie lorsque vous concevez chaque page. Au lieu de cela, vous utilisez simplement la feuille de style appropriée. Si vous décidez, sur une page particulière, que vous allez casser la norme et faire quelque chose de différent avec la typographie afin de créer un effet ou d’attirer l’attention sur quelque chose, elle se démarquera davantage grâce à votre utilisation du CSS.
5 Les typographies micro et macro sont importantes
La micro-typographie concerne les détails de la typographie liés à la lisibilité. Par exemple, l’espacement est une préoccupation liée à la micro-typographie, tout comme la mise à l’échelle et le contraste. Les ajustements que vous effectuez pour vous assurer qu’un bloc de texte est lisible sur n’importe quel appareil ou navigateur sont tous liés à la micro-typographie.
La macro-typographie se rapporte à la manière dont vos choix concernant la typographie sont liés à votre conception globale. Elle est liée à l’esthétique.
Une bonne typographie tient compte à la fois de la micro- et de la macro-typographie. Avez-vous déjà visité un site Web qui utilisait une police personnalisée très soignée et presque impossible à lire? C’est ce qui arrive quand on s’intéresse à la macro-typographie, mais pas à la micro-typographie.
6 Connaître le contenu ainsi que la conception
Comme vous le savez, un bon site Web a du débit. Une partie de cela est la lisibilité du contenu qui se trouve sur la page. Nous avons déjà expliqué comment cela est impacté par des éléments tels que les empattements, et nous avons expliqué comment le texte factice ne remplace pas le texte réel lorsqu’il s’agit des phases ultérieures de la conception. Nous n’avons pas encore fini. Le contenu est vraiment roi. Une fois que la conception finale, y compris le contenu, est en place, vous devez lire la page Web.
Lorsque vous lisez le contenu une fois votre conception terminée, vous pouvez déterminer s’il existe ou non des problèmes d’espacement ou de saut de ligne. Ceux-ci peuvent rendre le contenu déroutant, ou même modifier involontairement le sens du contenu. Résoudre ces problèmes en utilisant quelques astuces typographiques peut garantir que votre produit final communique exactement ce que vous ou votre client avez l’intention de faire.
7 Comprendre l’importance de la hiérarchie
La hiérarchie est la feuille de route que vous donnez aux personnes qui visitent votre site Web. Vous pouvez utiliser des images, des vidéos, des couleurs et (bien sûr) de la typographie pour créer cette hiérarchie.
Il s’agit simplement de guider le visiteur de la première chose que vous voulez qu’il voie à la suivante, et ainsi de suite. Avec la typographie, vous pouvez utiliser la taille, les changements de police et l’espacement pour vous aider à définir la hiérarchie que vous souhaitez que les utilisateurs suivent. En fait, si vous avez une page qui ne convertit pas, vous voudrez peut-être jouer avec la typographie pour voir si les modifications que vous apportez aideront à guider les visiteurs vers le bouton d’appel à l’action.
8 Soyez créatif mais prudent avec la couleur
Le moyen le plus simple de vous assurer que vous n’aurez jamais de problèmes de lisibilité en raison de problèmes de couleur de police et de couleur d’arrière-plan consiste à utiliser les couleurs les plus contrastées qui soient, le noir et le blanc. Malheureusement, cela peut créer un design assez ennuyeux.
N’ayez pas peur d’utiliser des couleurs. En fait, n’ayez pas peur d’utiliser des combinaisons de couleurs qui ne semblent pas fonctionner. Parfois, il vous suffit d’aller une ou deux nuances plus claires ou plus foncées. Ensuite, votre typographie passe d’illisible à parfaitement discernable et vraiment cool.
9 Texte centré sur le fossé
Les problèmes avec le texte centré sont nombreux. D’abord et avant tout, cela peut faire ressembler vos pages Web à des dépliants mal conçus. En plus de cela, vous vous retrouvez presque toujours avec des marges et un texte étranges qui semblent être destinés à être un poème ou des notes de pochette d’un vieil album de rock. Bien qu’il puisse être acceptable d’utiliser du texte centré pour les titres, il est généralement préférable de l’éviter complètement. Tenez-vous en au texte ajusté à gauche et vos lecteurs trouveront votre contenu beaucoup plus facile à lire.
10 Considérez à quoi ressemble votre texte agrandi
Qu’ils utilisent leur pouce et leur index ou qu’ils cliquent sur le bouton de zoom, les gens vont agrandir votre texte. Parfois, ils le font pour compenser un écran plus petit. D’autres fois, ils le font simplement parce qu’il leur est difficile de lire votre texte à la taille normale.
Ce serait formidable si tout le monde pouvait voir votre texte comme prévu, mais avec les baby-boomers qui ont souvent besoin d’une aide supplémentaire pour voir le texte, ce n’est tout simplement pas possible. Attention à ne pas utiliser une police qui se dégrade si elle est agrandie.
Outils et ressources utiles
Voici quelques outils et ressources utiles pour vous aider à en faire plus avec la typographie :
- FontFace Ninja: Cet utilitaire vous aide à identifier les polices que vous trouvez sur Internet. C’est un excellent outil à avoir lorsque vous rencontrez une police qui attire vraiment votre attention. Ce plugin Chrome vous aidera à identifier, trouver et acheter toute police disponible dans le commerce que vous voyez sur n’importe quel site Web.
- TypePlate: Il s’agit d’un cadre de typographie complet qui est parfait pour les concepteurs de sites Web. TypePlate peut gérer les lettrines, les guillemets, la mise à l’échelle, les couleurs et une variété d’autres défis liés à la typographie.
- Échelle modulaire: Il s’agit d’une échelle qui vous permet de déterminer la police et la taille de police idéales. Il vous aide également à créer un équilibre entre la taille de la police de vos titres et en-têtes et la police que vous sélectionnez pour votre texte.
- TIFF: Cet outil permet de faire apparaître deux polices différentes. Ensuite, il affiche pour vous les différences entre chacune des deux polices. Il vous permet même de comparer différentes lettres et chiffres d’une police à l’autre.
- TypeWolf: Utilisez ce site Web pour obtenir votre dose de certaines des polices les plus cool et de l’utilisation la plus inspirante de la typographie sur Internet. C’est une excellente source d’inspiration, ainsi que d’informations.
- Why Fonts Matter, Sarah Hyndman: C’est un excellent livre explorant l’importance des polices et les façons dont la typographie peut influencer l’état d’esprit. C’est un excellent livre pour les passionnés de typographie, mais aussi pour ceux qui ont besoin de se convaincre de l’importance de choisir le bon type de travail.
Conclusion
Espérons que cet article incitera les concepteurs de sites Web à réfléchir un peu plus à la typographie et à trouver des moyens d’utiliser le type de manière plus efficace et plus créative dans leurs conceptions.