Share
La typographie est l'une des compétences les plus importantes qu'un concepteur peut avoir? Les vétérans de l'industrie passent des années à perfectionner leur technique et vous pourriez facilement passer des années à l'université à étudier le sujet. Mais où est le meilleur endroit pour vraiment commencer? Aujourd'hui, dans le dernier ajout à notre série Basix, nous introduisons la typographie pour les débutants en expliquant une chose simple: Pourquoi la typographie est-elle si importante dans la conception Web?.
La typographie est une discipline ancienne qui peut être expliquée plus simplement comme l'art d'arranger et de concevoir le mot écrit. Les premiers exemples de typographie remontent à 1800 av. J.-C. avec les anciens Grecs, mais l'ère moderne de la typographie est liée au milieu du 15ème siècle, lorsque l'invention de la presse à imprimer a été inventée.
La leçon d’histoire est brève ici: la typographie est importante pour une raison: parce que c’est le principal moyen de communication des concepteurs avec les lecteurs? Que ce soit un livre, une publicité imprimée, un panneau d'affichage ou une émission de télévision, la typographie est importante car elle incarne le langage visuel.
96% d'Internet est composé d'informations écrites ou de texte. Ce texte est distribué en gros et en petits morceaux d’information répartis sur différentes pages avec différents formats..
La mise en forme de toutes ces informations écrites dans la conception d'un site Web est ce que nous appelons la "typographie Web"..
La typographie est la partie la plus importante d’une conception Web, car elle influe sur la façon dont un site Web communique avec les lecteurs. Des gros titres aux gros caractères en passant par les gros caractères, les différentes utilisations du texte sur le Web constituent-elles le principal moyen de communication? il est donc naturel que la façon dont un concepteur Web décide d'organiser le texte sur une page Web est cruciale pour l'efficacité de ce site.
Nous voyons son utilisation partout, car tous les sites Web utilisent la typographie pour transmettre leur message aux lecteurs. Cependant, certains concepteurs Web ont tendance à négliger l’importance inévitable de la typographie et à se concentrer uniquement sur la partie visuelle ou graphique de la conception Web..
Utiliser une typographie pour imprimer des supports tels que des brochures, des tracts, des magazines, des livres ou des supports extérieurs comme des poteaux et des panneaux d’affichage est différent de son utilisation pour l’écran d’ordinateur. En termes de typographie, l'écran est un média complètement différent? Et comme pour tout type de design, vous devez vraiment prendre en compte le support par lequel les gens verront votre design. Considérez les deux images suivantes:
L'image du haut est une affiche pour le groupe, The Black Keys. L'image du bas est leur site web. Même groupe, approche différente de la typographie. Pourquoi? Parce que le support (et donc le message et l'intention) de chaque design est différent. L’un consiste à promouvoir un concert, l’autre est un portail vers toutes sortes d’informations sur le groupe..
Lorsque vous utilisez la typographie dans un motif d’impression pour un livre, le fait qu’elle soit lue de manière relativement proche vous donne la possibilité de jouer assez souvent avec les polices car elle ne nuira pas beaucoup à la lisibilité. Si vous utilisez la typographie pour des supports de communication extérieurs comme un panneau d'affichage ou une affiche, vous savez que le lecteur n'a qu'une fraction de temps pour visualiser le tableau et consommer ce qui est communiqué, de sorte que vous ne jouez pas avec le réglage minutieux de la typographie. beaucoup - au lieu de cela, vous pouvez vous concentrer sur l'impression initiale d'une lisibilité du type.
Cependant, avec un site Web, les objectifs sont totalement différents. Pour concevoir une typographie pour les ordinateurs et le Web, le concepteur doit diviser de nombreuses informations en différents segments et sous-segments (micro et macro-typographie). En outre, une page Web n'est pas constante car elle doit apparaître sur différents navigateurs, différents périphériques d'accès Internet et avec différentes résolutions d'écran. La typographie Web doit donc traiter un bon nombre de problèmes par rapport à d’autres supports. Ainsi, tout en choisissant la typographie pour leur site Web, un concepteur doit prendre en compte la compatibilité et la lisibilité multiplate-forme. Ce ne sont là que quelques-unes des préoccupations qu’un concepteur de sites Web doit prendre en compte lorsqu’il aborde un site Web..
En matière de conception Web, la typographie ne se limite pas à choisir une police et à la présenter; C'est le art de diviser des paquets d'informations de manière à ce que le lecteur ait une bonne chance de trouver ce qui l’intéresse? c'est là que la typographie sur le web devient plus comme une conception de l'information.
La typographie sur le Web consiste autant à organiser le type en une mise en page efficace et significative qu’à utiliser un bon caractère..
Attirer l'attention sur un certain bloc de texte, aider les utilisateurs à trouver le contenu qu'ils recherchent ou adapter une grande variété de contenus sur une seule page se fait par le biais de compétences typographiques..
L’idée de concevoir un type doit être plus que lisible, mais aussi être significatif fait partie de ce qui déroute beaucoup de gens à propos de la typographie Web. Tout le monde peut taper un paragraphe de texte. moins de gens peuvent utiliser des éléments tels que l'espacement des lettres, la hauteur de ligne et la taille de la police pour lui donner un sens du caractère ;? mais les meilleurs concepteurs Web peuvent organiser le texte sur toute une mise en page de manière à donner un sens aux lecteurs et à les guider sur un site Web entier..
C’est ce que nous entendons par typographie étant la conception de l’information.
Il est souvent utile de commencer le système typographique pour un dessin en le divisant en deux segments différents:
En abordant d’abord la macro-typographie, il est facile d’esquisser les éléments "plus généraux" du système de types dans une conception. Où sera la navigation? Comment le texte sur le site sera-t-il présenté? Une colonne? Deux? Plus? Toutes les règles structurelles globales doivent être définies en premier. À ce stade, vous pouvez utiliser à peu près n'importe quel caractère que vous voulez. mais vous pouvez commencer à avoir une idée de la taille et de l'échelle d'un dessin.
Une fois que vous avez défini la "grande image", il est temps de passer à la microtypographie. C’est là que vous commencerez vraiment à affiner votre système typographique en définissant des éléments stylistiques tels que votre police primaire (et éventuellement une police secondaire), la taille des gros titres, la taille par défaut des éléments tels que les titres de barre latérale, le texte de paragraphe, etc. couleur du lien, etc..
Si vous débutez en tant que concepteur Web, il peut être décourageant de regarder toutes les choses folles et folles qui se produisent avec la typographie Web. Vous pourriez avoir un certain nombre de questions, telles que: par où commencer? Qu'est-ce qui est juste ou faux? Y a-t-il des règles que je dois suivre? La bonne nouvelle est que, à la base, la typographie Web comporte en effet quelques règles cohérentes que vous devez connaître. Voici quelques conseils utiles que j'ai rassemblés pour créer des systèmes de types efficaces pour le Web:
La hiérarchie de la typographie est très importante dans une conception Web. Pensez à tous les endroits où vous utilisez du texte sur un site Web: la navigation, les titres, les paragraphes, les légendes des images, les barres latérales, etc. Les chances sont bonnes qu'il y ait beaucoup de texte! Comment allez-vous transformer tout cela en un système de type logique? En développant une hiérarchie de types.
Une hiérarchie bien développée vous permet de savoir où commencer la lecture, comment poursuivre la lecture et la différence entre les informations les plus importantes et les moins importantes sur une page. Avec une hiérarchie de types efficace, vous n'avez plus besoin de placer du texte pour mettre en évidence ce que vous voulez que vos lecteurs passent en premier.
En savoir plus sur Comprendre la hiérarchie
Le manque de cohérence dans la typographie est l’une des erreurs les plus courantes et les plus répétées que les concepteurs Web commettent de nos jours. Un imprimeur créera-t-il méticuleusement chaque lettre sur une page? mais ce n'est pas nécessaire avec la conception Web.
Plutôt que d'essayer de concevoir manuellement chaque type de type sur un site, concevez avec l'idée de feuilles de style en cascade (CSS). Tirez parti de la bénédiction de CSS et définissez la police, la taille, la couleur, l’espacement des lignes, la hauteur et d’autres caractéristiques de votre typographie sur l’ensemble du site Web..
Je l’ai déjà dit tout à l’heure, mais permettez-moi de souligner le point important: les grands concepteurs de sites Web ne se contentent pas de placer des images et de coller du texte dans une présentation Web. Il faut de bonnes habitudes professionnelles pour concevoir un site Web gagnant; Une des meilleures habitudes professionnelles qu'un concepteur web devrait avoir est de: lisez le texte avant de le placer dans la mise en page Web. Si vous avez accès au contenu textuel que vous utiliserez, évitez de le coller en aveugle. En parcourant et en lisant le texte lui-même, vous serez en mesure de mieux relier le contenu à la conception..
De même, lorsque vous avez terminé de placer le texte et d'autres éléments dans la conception, veillez à le relire à nouveau en tant que méthode de relecture afin d'éviter toute erreur ou omission. Il est étonnant de constater combien de fois les concepteurs oublient de styler des choses simples comme les listes à puces.
Pour une conception Web réussie, un concepteur Web doit prêter attention à la typographie macro et micro. Même les meilleures mises en page peuvent s'effondrer si des choses manquent du côté "micro" des choses? et même la meilleure micro-typographie ne sera pas utile aux lecteurs si elle ne repose pas sur des principes de macro-typographie appropriés. Les deux sont importants!
Beaucoup de designers sont particulièrement bons sur l'un ou l'autre? Prenez donc le temps de réfléchir à ce qui vous va le mieux: macro ou micro? Ensuite, faites de votre mieux pour renforcer vos capacités (par la pratique et l’attention portée aux détails!) Dans vos compétences les plus faibles..
Cela va sans dire pour de nombreux concepteurs, mais la couleur du texte est un autre élément important à prendre en compte. Des centaines de sites Web prennent ce point pour acquis et utilisent des couleurs de police qui:
Vous n'avez pas besoin d'aller éclabousser tout l'arc-en-ciel sur la page, et vous n'avez pas besoin d'utiliser quelque chose de terrible comme du texte rouge sur un fond vert? utilisez simplement une théorie des couleurs simple et judicieuse pour choisir des couleurs lisibles et intéressantes pour vos polices. Rappelez-vous, les liens doivent être colorés dans la plupart des cas? il dit aux gens qu'ils peuvent cliquer dessus!
En savoir plus sur la théorie des couleurs de la conception Web.
Arrêtez d'utiliser Lorem Ipsum! Il n'y a pas de substitut au texte actuel lors de la conception d'un site Web. Bien que vous puissiez utiliser un texte factice pour avoir une idée de la présentation dans votre mise en page, dès que la conception de votre site Web s'achève, essayez d'utiliser le texte que vous ou votre client envisagez d'utiliser sur le site Web actif. . Ce n’est qu’alors que vous pourrez synchroniser la conception avec le texte et déterminer l’impact de l’allure générale du site Web. Même de petites omissions dans ce processus peuvent conduire à des points faibles dans une conception. Prenez donc le temps d'utiliser du texte actif avant d'appeler un projet 'complet'.!
Ce qui est merveilleux avec la typographie Web, c’est qu’il existe une grande variété de façons de l’aborder: chaque concepteur aura son propre style pour faire les choses, et il n’existe vraiment pas une seule "bonne" méthode de Web. Le type a de la personnalité, tout comme vous ou le client pour lequel vous travaillez, alors n’ayez pas peur de jouer avec vos propres variations créatives une fois que vous avez défini le basix du design d’un site..
En savoir plus sur le choix de la bonne police
La conception Web nécessite de maîtriser un certain nombre de choses pour créer une mise en page vraiment réussie, et la typographie en fait partie. Un concepteur de site Web qui comprend vraiment l'importance de la typographie sera en mesure de frapper le facteur de succès plus souvent? et tout ce qu'il faut, c'est s'entraîner à former votre esprit à la meilleure façon possible de disposer n'importe quel type de pièce! La typographie n’est pas sorcière, mais il faut beaucoup de travail pour découvrir la meilleure façon de faire les choses pour un projet donné..
Prenez le temps chaque jour de vous entraîner - essayez de prendre un article que vous aimez vraiment et de le redéfinir; Concevez votre propre CV, votre portfolio, tout ce que vous pouvez trouver? utilisez simplement toutes les idées que vous pouvez mettre en pratique et vous vous sentirez mieux en un rien de temps! Croyez-moi, dès que vous comprendrez les bases, cela deviendra un morceau de gâteau!
Cet article a été co-écrit par Arfa Mizra et Brandon Jones. Merci d'avoir lu!
Accentsconagua