Guide complet de la typographie de conception Web pour chaque site Web

Avant de passer en revue l'application pratique des principes de la typographie à votre site Web, expliquons brièvement ce qu'est la typographie . Par définition, la typographie est un ensemble de règles concernant les aspects visuels. C'est un terme utilisé à la fois dans l'impression traditionnelle et numérique.

La typographie Web est essentielle lorsqu'il s'agit de créer des sites Internet ou tout autre contenu destiné au Web. Cela dépend si, par exemple, un article donné est facile à assimiler ou si le logo est bien visible sur le site comme une différence sur les documents imprimés.

Une police de caractères est un ensemble de caractères avec des caractéristiques graphiques cohérentes , par exemple, la forme, le style et les proportions. Beaucoup de gens confondent une police de caractères avec une police.

Quand quelqu'un parle de changer la police (Times New Roman, Arial, etc.), il se réfère à la police de caractères. Les polices de caractères peuvent être divisées en catégories , en tenant compte des différentes caractéristiques du script.

Les types les plus connus de la police de caractères sont:

a) Police Serif (appelée empattements) - les lettres ont des terminaisons aplaties (par exemple, Times New Roman).

b) Police de caractères sans empattement - lettres simples sans fin (par exemple, Arial).

L'interlignage, le suivi et le crénage sont des moyens de réguler la lumière (ou la distance) entre les lettres. Ce sont des fonctions populaires trouvées dans de nombreux programmes graphiques conçus pour fonctionner avec du texte. Quelle est la principale différence entre ces trois méthodes ?

Diriger en typographie fait référence à la régulation de la distance entre les lignes d'écriture où se trouvent les lettres.

Le suivi (également connu sous le nom de modification de la densité de composition ) peut être appliqué à une zone de texte plus grande, par exemple, le paragraphe entier.

Le crénage est utilisé de manière sélective dans le texte. Par exemple, il peut être utilisé entre les lettres similaires V et A pour faciliter la lecture. De plus, le crénage détermine l'espacement non seulement entre les lettres individuelles, mais également entre les signes de ponctuation et les chiffres.

Les orphelins sont des mots qui apparaissent à la fin d'un paragraphe et qui restent seuls sur la ligne suivante. Si vous mettez un mot d'une seule lettre à la fin d'une ligne, c'est une erreur de composition. Par conséquent, les conjonctions laissées à la fin de la ligne doivent toujours être déplacées vers la ligne suivante.

Une veuve est une ligne de texte laissée isolée à la fin d'un paragraphe. Ceci est généralement considéré comme une mauvaise typographie, car cela peut perturber le flux de lecture.

Le rôle de la typographie ne se limite pas aux fonctions décoratives. Dans le monde en ligne, sa tâche principale est de permettre aux utilisateurs de percevoir plus facilement les messages des sites Web. La plupart des internautes ne lisent pas les textes mot à mot mais se contentent de scanner le contenu en sélectionnant les fragments les plus importants. Par conséquent, toute la typographie de la page doit être conçue de manière réfléchie. Après tout, votre objectif est d'attirer l'attention du lecteur sur les informations les plus critiques que vous souhaitez transmettre.

On ne peut nier que des polices bien choisies peuvent animer votre site Web et inciter les utilisateurs à rester plus longtemps. En respectant les règles de typographie , vous pouvez être sûr que le contenu de votre site Web sera esthétique, lisible et cohérent avec son style.

L'apparence du texte sur un site Web est importante pour un certain nombre de raisons. Tout d'abord, cela aide à créer un site visuellement attrayant et agréable à regarder. Deuxièmement, cela peut aider à transmettre le ton général et l'ambiance du site Web. Troisièmement, cela peut aider à rendre le site plus facile à naviguer et à lire. Quatrièmement, un texte bien formaté peut aider à améliorer l'optimisation des moteurs de recherche (SEO). Enfin, une bonne typographie peut aider à créer un site d'aspect plus professionnel.

Le texte sur le site Web affecte la façon dont votre marque sera perçue sur Internet. L'image de marque comprend le nom, le logo, les couleurs de la marque et la typographie.

La typographie peut avoir un impact important sur l'image de marque. Il peut communiquer le ton et la personnalité d'une marque et influencer la façon dont les consommateurs perçoivent une marque. Une bonne typographie permettra à la marque de paraître plus crédible et digne de confiance , tandis qu'une mauvaise typographie peut donner à une marque une apparence bon marché ou non professionnelle.

L'image de marque peut également avoir un impact sur la typographie. Par exemple, une marque peut choisir d'utiliser une certaine police parce qu'elle est associée à un certain type de client ou parce qu'elle correspond à l'image de la marque. L'image de marque peut également dicter l'aspect général d'une typographie , comme les couleurs, l'espacement et la taille du texte.

La négligence typographique décourage effectivement les utilisateurs de revenir sur le site. Certains principes typographiques ne doivent pas être enfreints, et que même les graphistes oublient parfois à la va-vite. Les ignorer peut perturber voire empêcher complètement la lisibilité du message du contenu. Voici les oublis typographiques les plus flagrants qu'il vaut mieux éviter car ils peuvent ruiner l'UX de n'importe quelle conception de page :

Même si vous pensez qu'une petite police est jolie et correspond au style de la page, rappelez-vous de ne pas en faire trop. Une police trop petite est toujours difficile à lire . Et c'est la lisibilité du texte qu'il faut privilégier si l'on veut créer un site web convivial !

Toute négligence concernant la structure du texte rendra votre site Web perçu comme chaotique. Il est difficile de saisir les informations les plus cruciales lorsqu'il s'agit d'une page avec des chaînes de texte trop longues. Même si vous avez l'impression d'avoir beaucoup d'informations de redirection sur votre site, n'oubliez pas que les internautes préfèrent les textes courts ! Il suffit de raccourcir les textes et de respecter le nombre optimal de caractères dans une ligne, c'est-à-dire entre 40 et 80.

Un contenu sans paragraphes ressemblera à un train de pensée non organisé ou illogique plutôt qu'à un texte professionnel et substantiel. Pensez donc à découper le texte en paragraphes ; vous pouvez également le séparer avec des graphismes attrayants.

C'est un autre exemple du manque d'organisation d'un texte. Comme un détail, il peut complètement brouiller le message du contenu ou témoigner d'un manque d'ingéniosité.

Selon la règle, moins c'est plus . Familiarisez-vous avec les normes courantes de combinaison de polices avant de faire votre choix. Vous pouvez toujours choisir les combinaisons les plus populaires.

Vous savez déjà ce que sont les orphelins et qu'il ne faut pas laisser de conjonctions solitaires à la fin d'un texte. Cela vaut la peine d'être évité, même si ce n'est pas une erreur flagrante à première vue. Ensuite, le texte est beaucoup plus facile à lire.

Vous avez sans doute vu plus d'une fois un site Web où le texte est illisible en raison d'arrière-plans à motifs. Mettre du texte sur une photo, voire une couleur distinctive, est toujours une démarche risquée. Évitez tout arrière-plan avec des motifs si vous ne voulez pas fatiguer les yeux de l'utilisateur.

Justifier rendra votre texte peu naturel. Par conséquent, il vaut la peine d'éviter ce traitement. Au lieu de donner une impression d'organisation et d'élégance, le contenu devient illisible. La justification n'a l'air bonne que dans les colonnes des journaux. Sur Internet, cela se traduit par la formation d'espaces blancs dans le texte, c'est-à-dire de trous. Il est préférable d'utiliser l'alignement du texte à gauche.

Voici quelques ressources indispensables pour tous les concepteurs UX, les passionnés de conception Web et tous ceux qui souhaitent explorer les secrets de la typographie Web.

a) First Aid in Typography (Friedrich Forssman, Hans Peter Willberg) - une boîte à outils typographique qui aidera de nombreux concepteurs novices dans le besoin.

b) Shady Characters (Keith Houston) - connaissance de l'histoire de la typographie et des descriptions pratiques des caractères typographiques.

c) Les éléments du style typographique (Robert Bringhurst) - une lecture incontournable pour les typographes et plus encore. Vous trouverez une théorie et des connaissances sur la construction d'arrangements typographiques entiers.

d) Google Fonts Glossary - une base de données en ligne de termes et leurs définitions liés à la typographie.

Vous savez déjà ce qu'est une bonne typographie conviviale. Vous vous rendez compte de l'impact que cela a sur la lisibilité et la clarté de la communication de votre contenu. Il est maintenant temps de vous occuper d'une typographie parfaite sur votre propre site Web !