Typographie : le secret le mieux gardé du Web Design

Il reste deux heures avant la grande présentation et quelque chose dans votre conception graphique n’est tout simplement pas… correct.

Le contenu est précis. Le choix des mots est excellent. L’agencement est satisfaisant. Les couleurs sont saisissantes. Les images transmettent votre message. Mais il vous manque le dernier composant pour lier l’ensemble du projet.

Oh! Qu’en est-il de la typographie du design ?

La typographie est souvent négligée dans la conception graphique, la conception Web et ailleurs. La typographie est une discipline de conception subtile mais essentielle qui peut faire ou défaire votre conception. Et l’utilisation créative des polices, au-delà de nos rêves les plus fous avec ou sans empattement, peut être puissante.

Dans ce guide de typographie Web, nous détaillerons la définition de la typographie et expliquerons pourquoi il est important que les concepteurs connaissent et apprennent les bases de la typographie.

Table des matières

Qu’est-ce que la typographie ?

Simplement, la typographie est l’art et la technique d’agencement des caractères. « Type » dans la typographie s’applique à :

• Police de caractères
• Taille des points
• Longueur de la ligne
• Interligne
• L’espacement des lettres
• Crénage

Claire dans sa définition, la typographie est une pratique qui atteint plusieurs millénaires. Les premiers typographes (même s’ils ne s’appelaient peut-être pas ainsi 😮) utilisaient des matrices d’estampage, des carreaux de lettres individuels et des caractères mobiles pour créer une monnaie, des sceaux et du texte uniformes dès le deuxième millénaire. Les typographes ont vu une grande évolution dans le texte avec l’invention de la presse à imprimer mécanique en 1439. Plusieurs technologies sont venues après la presse à imprimer mécanique, y compris la composition prête à photographier et la technologie de transfert à sec. Mais ne vous méprenez pas ! La typographie ne sert pas seulement à imprimer des mots dans les livres et les journaux.

Les premiers ordinateurs personnels au milieu des années 1980 ont permis aux concepteurs de créer la première police de caractères numérique. Même si la technique utilisée pour organiser le type a changé avec les progrès de la technologie, l’objectif est le même. Les concepteurs de sites Web et les graphistes organisent aujourd’hui les caractères pour créer des applications numériques lisibles, lisibles et visuellement attrayantes.

(Retour au sommet.)

Pourquoi la typographie est-elle importante ?

La typographie est importante pour plusieurs raisons : lisibilité et lisibilité… mais il y a une autre raison pour laquelle les concepteurs sont particulièrement préoccupés par l’attrait visuel d’une composition. Identité de marque.

La typographie, comme un logo et une palette de couleurs, fait partie de l’identité d’une marque. L’identité de marque est l’aspect visuel qui rend la marque ou l’organisation reconnaissable. Et chaque décision prise par un concepteur Web est l’occasion de laisser une impression sur l’utilisateur.

McDonald’s a son célèbre logo aux arches dorées. Les quatre couleurs de la marque Google – bleu, rouge, jaune et vert – sont simples mais mémorables. La police de lettres noires en vieil anglais qui attire l’attention du New York Times est indubitable.

Une bonne typographie est belle, lisible et lisible. Cela laisse également une impression que, ironiquement, les mots ne peuvent décrire.

(Retour au sommet.)

Éléments de typographie Web

Tout d’abord, jetons les bases – les éléments de la typographie :

Police de caractères et police

Vous pouvez voir des polices de caractères et des polices utilisées de manière interchangeable sur Internet. Soyons les premiers à corriger cette erreur facile. La police de caractères et la police ne sont PAS les mêmes, mais elles fonctionnent main dans la main.

• Une police de caractères est le nom d’un style typographique ou d’une famille de styles appliqués à un texte. Dans votre navigation Internet quotidienne, vous pouvez rencontrer des polices de caractères Arial, Calibri, Georgia, Helvetica, Times New Roman et Verdana.
• Une police est un fichier numérique qui contient une police de caractères et l’affiche sur une page Web. Les polices décrivent la taille en points, le poids de la police, etc. Par exemple, « Arial bold 18pt » et « Helvetica Italic 10pt » sont les deux polices.

Il y a quelques polices de caractères de conception que vous devriez conserver sur votre aide-mémoire typographique : serif, sans serif, script et display.

Serif ou sans serif ? Votre identité de marque vous aidera à décider.

Polices Serif avoir de petits « pieds » ou un empattement. Les « pieds » relient subtilement les lettres, créant une connexion visuelle et améliorant la lisibilité d’un texte. Les polices de caractères Serif sont parfaites pour les gros blocs de texte que vous pourriez voir sur les blogs, les journaux, les livres, les livres électroniques, etc.

Polices de caractères sans empattement sont des polices de caractères sans « pieds ». Les textes sans empattement sont propres et faciles à lire, ils sont donc généralement utilisés pour les titres et les légendes.

Afficher les polices de caractères transmettre BEAUCOUP de personnalité et de courage. Ces polices de caractères sont audacieuses, uniques et parfaites pour créer le caractère de la marque. Les polices d’affichage sont utilisées avec parcimonie, car elles demandent de l’attention mais peuvent être difficiles à lire.

Polices de caractères de script sont l’une des polices de caractères les plus explicites. Ces polices de caractères ressemblent beaucoup au lettrage à la main. Avec ses boucles et ses boucles distinctes, le script ajoute une touche personnelle que les autres polices de caractères d’apparence générée par ordinateur ne peuvent pas. Soyez prudent, cependant, comme les polices d’affichage, le script peut être difficile à lire dans le texte en bloc.

Bien sûr, il existe plusieurs autres polices de caractères à votre disposition comme le monospace ; néanmoins, les quatre précédents sont les plus couramment utilisés.

(Retour au sommet.)

Cohérence

L’un des moyens les plus rapides d’augmenter votre taux de rebond est une composition bâclée et incohérente. Une composition incohérente brouille l’identité de la marque et brouille les messages. Les compositions cohérentes suivent un modèle dans la même famille de polices. En pratique, un concepteur peut utiliser la même police pour le corps du texte sur un site Web et une autre pour les balises de titre afin de créer des modèles prévisibles que le lecteur peut suivre.

Il y a absolument des cas où il est approprié d’enfreindre cette directive, mais ceux-ci sont rares, surtout si l’on considère l’expérience du lecteur.

(Retour au sommet.)

Alignement

Gardez à l’esprit que la typographie est plus qu’un simple texte. Les typographes et les concepteurs manipulent également la façon dont ce type apparaît sur une page ou un site Web en ajustant d’autres facteurs exceptionnels tels que la hauteur et l’alignement des lignes.

L’alignement est le processus de composition de différents éléments (texte, images, etc.) pour assurer un espacement, un dimensionnement et une distance égaux entre les éléments.

Il existe quatre types d’alignement :

1. Alignement à gauche, lorsque le texte est aligné sur la marge de gauche
2. Alignement à droite, lorsque le texte est aligné sur la marge de droite
3. Alignement centré, lorsque le texte est aligné au centre de la zone de texte
4. Alignement justifié, lorsque le texte est aligné avec les deux marges

L’alignement est une décision de conception visuelle et pratique. L’alignement influence la façon dont un utilisateur interagit avec une page, créant une hiérarchie et un attrait visuel global. La langue a également un impact sur l’alignement. Par exemple, l’arabe et l’hébreu se lisent de droite à gauche, tandis que l’anglais se lit de gauche à droite. Les concepteurs doivent équilibrer les exigences d’un design visuel et pratique qui a du sens pour leur public.

(Retour au sommet.)

Couleur

Si vous lisez notre guide sur la théorie des couleurs, vous saurez que la couleur a un impact profond sur la perception du spectateur. Des combinaisons de couleurs magistrales peuvent influencer les comportements et communiquer de manière subliminale. Bien sûr, vous pouvez vous en tenir au texte noir standard que la plupart optent… ou vous pouvez créer un air d’élégance raffinée avec une police de ton gris ou communiquer l’attitude courageuse de votre marque avec une couleur turquoise.

Les concepteurs peuvent créer leurs propres combinaisons de couleurs en mélangeant des teintes, des nuances, des teintes et des tons, mais faites-le avec prudence. La couleur est une façon amusante d’ajouter de la personnalité à une conception, mais elle peut également nuire à la lisibilité et à la lisibilité d’une conception Web si elle n’est pas effectuée correctement.

(Retour au sommet.)

Espace blanc

L’espace blanc est explicite. C’est l’espace vide ou négatif sur une page ou un site Web. La question est : pourquoi l’espace blanc est-il important ? Dans le contexte de la typographie et de l’expérience du lecteur, l’espace blanc a un impact considérable sur la lisibilité et la lisibilité d’un texte. L’espace blanc est créé en ajustant :

• Longueur de la ligne
• Interligne
• L’espacement des lettres
• Espacement des paragraphes

(Retour au sommet.)

Hiérarchie

La hiérarchie est un système d’organisation, où différents éléments de conception sont utilisés pour distinguer les éléments d’information vitaux.

Les concepteurs peuvent créer une hiérarchie en utilisant la police, la couleur et l’alignement. Par exemple, un concepteur peut établir une hiérarchie en choisissant une police d’affichage différente du reste de la police de caractères ou en alignant le titre au centre pour attirer l’attention sur le texte intéressant et différent.

🔎 Regardez de plus près : Consultez la hiérarchie de cet article. La hiérarchie est établie par des balises d’en-tête (H1, H2, H3) afin que vous sachiez par où commencer et comment l’article est organisé.

(Retour au sommet.)

Concevoir une typographie pour le Web

Concevoir une typographie pour un site Web peut être extrêmement amusant ! Vous influencez subtilement la perception qu’a l’utilisateur de la marque. Bien que les éléments de conception soient subtils, cela ne signifie pas qu’ils ne sont pas nuancés. Il existe une gamme infinie d’éléments différents pour créer une identité de marque accrocheuse.

Nous savons. 😮‍💨 Il est très facile de se laisser submerger par les différentes pièces mobiles, mais ne vous inquiétez pas. Suivez ces étapes simples pour commencer votre conception de typographie.

📌 Qu’est-ce qu’une échelle de caractères ? Une police de caractères est une collection de polices stylisées utilisées pour établir l’identité d’une marque.

Créer une échelle de caractères

Commencez avec une police de caractères principale pour représenter votre marque. Gardez à l’esprit que la personnalité de votre marque doit guider cette décision. Ce sera la police dominante dans votre gamme de caractères. Après avoir choisi une police de caractères, vous devez explorer les innombrables polices disponibles dans la police de caractères que vous avez choisie jusqu’à ce que vous trouviez une police qui représente votre marque.

Avant de finaliser et de publier votre gamme de caractères, assurez-vous que votre gamme de caractères répond aux critères suivants :

1. Adapté. La police de caractères transmet-elle avec précision l’ambiance et le ton de l’identité de votre marque ?
2. Reconnaissable. La typographie est-elle distinctive et mémorable ?
3. Lisible. La police de caractères est-elle facile à lire et à comprendre en un coup d’œil ?
4. Polyvalent. L’échelle typographique peut-elle être utilisée sur différentes plates-formes ?
5. Résonner. L’échelle typographique correspond-elle au groupe démographique cible ?

Si votre typographie répond à ces critères, vous êtes sur la bonne voie pour établir la police parfaite pour votre marque.

💡 Exemple: Échelle de caractères du café

La personnalité de la marque doit guider la conception de la typographie.

Mon café en plein essor prépare des boissons au café non traditionnelles pour une jeune génération, et je veux créer un air d’innovation et de légèreté. J’ai choisi une police sans empattement car elle véhicule convivialité et modernité. Et après avoir versé sur les polices san serif, je me suis installé sur Lexend Zetta pour le texte du titre et Open sans pour le corps du texte.

(Retour au sommet.)

Examiner l’accessibilité Web

L’attrait visuel et la reconnaissance de la marque ne doivent pas remplacer l’accessibilité d’une conception typographique.

La lisibilité et la lisibilité sont souvent discutées dans la conception, mais pas l’accessibilité. La lisibilité mesure la différenciation des caractères et des mots individuels. La lisibilité est une mesure de la facilité de lecture d’un texte. La police accessible pousse les deux principes un peu plus loin et demande aux concepteurs de prendre en compte l’expérience des personnes handicapées, comme les utilisateurs malvoyants ou dyslexiques.

Voici quelques facteurs d’accessibilité que les concepteurs doivent prendre en compte :

• Couleur du texte
• Taille du texte
• Interligne

L’accessibilité du Web en termes de typographie est un sujet nuancé ; de Google « Présentation de l’accessibilité dans la typographie » est une ressource solide pour de plus amples informations.

(Retour au sommet.)

Test A/B

Après tout votre travail, vous devez tester votre conception de typographie pour comprendre l’expérience de lecture globale. Les tests d’utilisabilité ne sont pas un secret dans le domaine de la conception UI et UX, mais cette pratique devrait également s’étendre à la typographie pour assurer la lisibilité, la lisibilité et l’accessibilité.

La typographie est juste UNE discipline sous le large parapluie du design graphique et web. Outre la conception d’interface utilisateur, la conception UX, la conception visuelle et de nombreuses autres disciplines, les opportunités de croissance sont infinies. Si tout ce qui touche au type est votre truc, pensez à répondre au quiz technique de trois minutes pour voir si le design est la bonne carrière pour vous !

(Retour au sommet.)