Guide définitif de la typographie de site web : le design au service de la lisibilité
Le choix d'une police est simple : il suffit d'ouvrir le menu déroulant et de cliquer sur un nom. En revanche, le choix de la bonne police de caractères n'est pas aussi simple. Il implique une longue liste de considérations et constitue l'une des décisions les plus importantes que vous prendrez au cours du processus de conception de votre site web.
Les designers professionnels apprennent généralement les bases de la typographie dans le cadre de leurs études. Cependant, comme de plus en plus de personnes se renseignent sur Constructeur de sites web ou des outils similaires participent à la création de sites Web, la compréhension de la typographie de site Web devient de plus en plus importante, même pour les non-concepteurs. Pour rafraîchir les bases de la typographie de site Web, cet article contient donc des conseils que vous pouvez utiliser pour choisir une police de caractères pour votre site Web afin de garantir la meilleure expérience de lecture possible pour votre public.
Qu'est-ce que la typographie de site web ?
Chaque site web a du texte, et là où il y a du texte, il y a de la typographie. Définie de manière générale, la typographie de site web détermine l'apparence du texte sur le site web. Il s'agit de la manière dont les mots apparaissent sur la page, aussi bien le style (la police, la taille, l'espacement) que la manière dont le texte apparaît sur la page.
La combinaison de tous ces éléments doit viser à garantir une lecture facile du texte. En outre, la typographie du site web devrait également tenir compte des éléments suivants :
- Durée d'attention plus courte, en particulier en ligne ;
- l'accessibilité, car les gens interagissent de différentes manières avec les textes en ligne
- Skimmability, car les gens n'ont souvent pas le temps de lire le texte en entier ;
- Différentes tailles d'écran, car les utilisateurs parcourent les sites web sur différents appareils.
La chose la plus importante à savoir sur la typographie est la suivante : Si cela fonctionne, vous ne le remarquerez pas. Si elle ne fonctionne pas, vous ne resterez probablement pas assez longtemps sur le site.
Termes de typographie web
Pour mieux comprendre la typographie web et finalement l'introduire dans votre site, nous allons d'abord aborder quelques notions de base de la typographie et comprendre comment elles peuvent s'appliquer à la typographie web.
1. les polices de caractères
Une police de caractères est un aspect et un ensemble de caractéristiques spécifiques appliqués à un groupe d'éléments alphabétiques, numériques et de ponctuation. Si "Ce ne sont pas des polices de caractères ?" a été votre première question, vous n'êtes pas le seul : il s'agit d'une idée fausse très répandue.
Les polices de caractères sont une instance particulière d'une police de caractères ; ce sont des parties de la police. On les distingue alors par leur poids (gras ou clair), leur taille (14px ou 24px) ou d'autres stylisations (italique, souligné, etc.). Pour donner un exemple, Helvetica Bold (16px) et Helvetica Regular Italic (24px) sont des polices de caractères , et elles font partie de la police Helvetica. Les polices sont souvent appelées familles de polices, car il s'agit d'un terme large désignant des polices aux caractéristiques similaires.
De nombreuses polices ne correspondent qu'à deux types de caractères : serif et sans serif. Les polices serif contiennent généralement de petits ornements à la fin, ce qui n'est pas le cas des polices sans serif. Voici un moyen simple de les différencier : "Sans" signifie sans en français.
En dehors de ces deux types, d'autres polices sont disponibles, l'une d'entre elles étant le script. Ces types sont toutefois moins utilisés sur le web, car ils sont plus difficiles à lire sur les écrans.
2. sous-coupe
Le crénage est l'espace horizontal entre les deux caractères d'un mot. Différentes polices de caractères ont des intersections inférieures différentes afin d'améliorer la lisibilité et d'éviter des espaces désagréables dans les mots. Les sous-intersections peuvent également varier entre différents caractères d'un même mot pour les mêmes raisons.
Dans le second cas, le crénage est ajouté entre les T répétitifs afin d'améliorer la lisibilité.
3. suivi
Comme le kerning, le tracking est également l'espacement entre les lettres. Cependant, au lieu de l'espacement entre deux caractères individuels, le tracking est l'espacement entre toutes les lettres d'un mot ou d'une ligne. Et comme le kerning, il est également adapté pour améliorer la lisibilité, mettre en évidence un mot ou répondre à d'autres objectifs.
4. espacement des lignes
L'interligne ou la hauteur de ligne est le terme utilisé pour désigner l'espacement des lignes en typographie et joue un rôle essentiel pour rendre le texte lisible sur votre site web. En augmentant l'interligne, vous augmentez l'espace entre les lignes, ce qui améliore généralement la lisibilité. Pour une bonne lisibilité, l'interligne doit généralement être supérieur d'environ 30 % à la taille des caractères. Par exemple, si la taille de vos lettres est de 20 pixels, un interligne de 26 pixels est recommandé.
L'utilisation correcte de l'espace dans le texte doit améliorer la compréhension du texte, car elle sépare visuellement le contenu en parties digestes et n'encombre pas la page.
5. hiérarchie
La hiérarchie est l'ordre du texte sur votre site web. La plupart des sites web, en particulier ceux qui contiennent beaucoup de texte (comme les articles de blog), essaient de diviser les textes en sections plus petites afin de les rendre plus digestes et plus faciles à gérer. Ces sections sont appelées titres.
La hiérarchie du texte permet aux lecteurs de sauter à travers le texte et de voir les sections qui sont plus importantes ou qu'ils recherchent. Elles vous permettent également de mettre en évidence les parties du texte qui sont critiques, tandis que d'autres sont des informations secondaires.
Sur les sites Web, la hiérarchie du texte peut être soulignée par différentes polices, tailles de police, couleurs ou autres caractéristiques. Par exemple, dans cet article, les termes de typographie Web sont un titre 2 (H2,), tandis que les termes mentionnés sont des titres 3 (H3). Ces sections H3 deviennent de plus en plus spécifiques et leur apparence indique qu'elles sont une sous-section d'un sujet plus général . Le titre du blog est généralement l'en-tête 1 (H1). Voici un exemple de la hiérarchie de texte qui s'affiche dans notre éditeur de texte.
Sélection de la meilleure police de caractères pour la lecture à l'écran
Le design numérique évolue rapidement. S'il n'y avait qu'une poignée de polices à choisir il y a quelques années, le choix se compte aujourd'hui en milliers. Ces polices ont été créées pour l'écran et disposent de nuances et de détails qui les rendent lisibles sur différents appareils.
En dehors de cela, il y a quelques éléments à prendre en compte lorsque vous choisissez une police de caractères pour votre site web. Elles rendent l'expérience de lecture sur votre site web beaucoup plus agréable et permettent d'améliorer l'expérience client.
1. limiter au maximum le nombre de polices utilisées
Une bonne règle est de s'en tenir à une ou deux familles de polices. Si vous dépassez ce nombre, votre texte et votre site web auront l'air déstructurés, peu professionnels et parfois même confus. Il en va de même pour les tailles de police : Trop de tailles, surtout si elles sont mélangées, peuvent donner une expérience visuelle assez chaotique.
Une fois que vous avez choisi vos familles de polices, ne les changez pas sur l'ensemble du site. Si vous choisissez deux familles de polices, il est important de vous assurer qu'elles se complètent ou du moins qu'elles s'harmonisent.
Regardez les exemples de combinaisons de polices ci-dessous. Bien que les polices de la première image appartiennent à des familles de polices différentes et semblent assez différentes, aucune ne fait de l'ombre à l'autre. Les deux polices sont bien équilibrées et forment une combinaison harmonieuse.
Examinons maintenant une autre paire de polices. Dans cet exemple de combinaison Baskerville + Impact, Impact éclipse de loin Baskerville. Il attire l'attention sur lui et crée la possibilité que la première partie du texte soit ignorée.
2. essayez de vous en tenir à des polices standard
Des milliers de polices sont disponibles via des plates-formes telles que Google Fonts, qui vous offrent des possibilités passionnantes d'essayer quelque chose de nouveau et d'excitant. Une chose peut toutefois mal tourner : Des polices trop compliquées peuvent distraire les visiteurs de votre site. Pour éviter cela, essayez de rester avec des polices standard, à moins qu'il n'y ait une occasion vraiment spéciale qui nécessite des polices personnalisées. Expérimenter avec les polices est amusant, mais il est important de se rappeler que le but d'une bonne typographie est d'inciter les gens à lire le contenu.
3. utiliser une police de caractères qui s'affiche bien sur différents appareils
Les gens accèdent à votre site web à partir de différents appareils, des smartphones et tablettes aux ordinateurs. Pour vous assurer que votre site reste accessible à vos lecteurs, optez pour des polices qui ont une bonne apparence et qui sont lisibles sur différents écrans. Commencez par utiliser une police qui s'affiche bien dans différentes tailles. Un tel exemple est la police Roboto représentée dans l'image ci-dessous.
Évitez les polices cursives ou ornées. Elles sont très jolies, mais à mesure que leur taille diminue, elles deviennent de moins en moins lisibles, comme dans le cas de la police Comforter Brush ci-dessous.
Appariement de polices pour votre site web
Jetons maintenant un coup d'œil à quelques magnifiques paires de polices que vous pouvez utiliser pour votre site web afin d'obtenir un aspect équilibré et agréable.
1. Lora & Merriweather
2. Roboto & Archivo Black
3ème Bebas Neue & Old Standard TT
Conclusion
Muni de ces conseils et de ce savoir-faire en matière de typographie de site web, vous avez maintenant suffisamment de connaissances pour commencer à expérimenter. Jouez avec la typographie de votre site Web pour trouver des combinaisons de polices et de styles qui sont à la fois agréables à regarder et qui garantissent une excellente expérience à vos visiteurs. Si vous en avez les moyens, organisez un test utilisateur pour voir comment les gens réagissent à vos choix typographiques. Ou demandez simplement à quelques amis de vous donner leur avis. Cela vous donnera un aperçu de la lisibilité de vos textes et vous permettra de savoir s'ils atteignent l'objectif souhaité.
