parfaite-typographie sur le web

Typographie web : comment trouver la police de caractères idéale pour votre site web

Une police de caractères adaptée rend votre site web non seulement visuellement beaucoup plus intéressant. Les polices de caractères ont une influence décisive sur le fait que les sections de texte soient ignorées ou lues. Dans cet article, je vais vous montrer comment trouver la police parfaite pour votre site web !

Une bonne typographie est le résultat d'années d'étude des polices et du design. Cependant, quelques conseils de base peuvent vous aider à former votre œil en conséquence et à utiliser la bonne police pour votre projet web.

Meilleures pratiques, conseils & lignes directrices en matière de webdesign

La conception de sites web est plus qu'une question d'esthétique. Au moins aussi importants sont : un bon UX, l'accessibilité et le référencement. Dans cet article, je vous montrerai les meilleures pratiques pour des sites web performants et des utilisateurs satisfaits.

Le tout premier site web ...

Ou : que se passe-t-il lorsque vous chargez un site web sans CSS. Dans le passé, les sites web étaient rendus dans les polices de caractères intégrées au système d'exploitation. Elles sont encore chargées aujourd'hui si la police n'est pas accessible. Le tout premier site web est toujours en ligne aujourd'hui et ressemble exactement à ce qu'il était lorsqu'il a été mis en ligne en décembre 1990 :

Police web
Le tout premier site web

La façon dont le site web s'affiche dans votre navigateur ne dépend pas du site web, mais du système d'exploitation que vous utilisez. Et si vous avez apporté des modifications aux paramètres par défaut.

Pour les utilisateurs de Windows, les polices à empattements sont affichées en Times New Roman par défaut. Sous Mac OS X, la police par défaut est Times ou Times Roman. Arial est utilisé par Windows comme police de caractères sans serif. Mac OS X utilise Helvetica comme police par défaut.

Zach Leatherman a développé un projet dans lequel il a testé différents systèmes d'exploitation et les polices de caractères correspondantes. L'outil Famille de polices vous donne un aperçu intéressant des polices de rechange - et de leur aspect final. 

Géorgie et Verdana

Au milieu des années 1990, les polices standard ont été rejointes par Georgia et Verdana, conçues par Matthew Carter spécialement pour le web. La construction de bons sites web avec une maigre sélection de cinq polices de caractères a donné naissance à une habitude douteuse par nécessité : Ainsi, des polices qui n'existaient généralement pas sur le Web ont été incorporées sous forme de fichiers d'images.

Les inconvénients de cette solution sont évidents :

  • La représentation appropriée sur différents appareils peut dégénérer en un travail de détail fastidieux.
  • Les mots ne peuvent pas être découverts ou traduits en utilisant la fonction de recherche.
  • En outre, chaque modification de texte représente une énorme dépense supplémentaire.

Concevoir pour l'inconnu

Heureusement, la technologie a beaucoup évolué entre-temps. Malgré cela, une connaissance fondamentale du domaine technique est également nécessaire ici. Parce qu'il est important de comprendre ce qui se passe sur votre site web lorsque la police désirée n'est pas disponible. Cela peut avoir plusieurs raisons. Par exemple, une mauvaise connexion internet, qui entraîne un retard dans le chargement de votre fichier CSS.

Contrairement à la conception graphique, sur le web, un mauvais caractère (inapproprié) est préférable à l'absence de caractère.

Ainsi, pendant que vous vous débattez avec la police qui conviendra le mieux à votre site sur le plan visuel, il y a aussi des questions techniques de base à poser :

  • Votre texte sera-t-il affiché même si le fichier CSS n'est pas chargé ? 
  • Votre page est-elle encore lisible en version avec et sans empattement ? 
  • Fournissez-vous une autre police de caractères ? Comment s'affiche-t-elle ? Pouvez-vous effectuer d'autres réglages qui vous donnent plus de contrôle sur vos polices de rechange ?

Avant tout, il est important que le contenu soit affiché. La lisibilité générale est la clé de voûte du choix de la coquille. 

Des bases intéressantes sur FOUT vs. FOIT (lorsque la police est chargée) sont données par Robin Rendle dans son article Loading Web Fonts with the Web Font Loader.

Vous pouvez trouver plus d'informations à ce sujet ici :

D'où vient votre police de caractères ?

Maintenant que tu as pris connaissance de l'arrière-plan technique et des polices de repli, il reste un aspect très important. Il s'agit de savoir d'où ta police de caractères est chargée. Comme nous l'avons déjà mentionné, chaque système d'exploitation possède ses propres polices standard. De plus, chaque utilisateur peut installer des polices sur son ordinateur. Il est donc impossible de savoir ce qui existe - ou pas. 

Afin de ne pas devoir afficher nos sites web uniquement en Arial et Times New Roman, nous nous tournons de plus en plus vers les services de polices de caractères basés sur le web. L'avantage est évident : les restrictions que nous avons en utilisant des polices standard sont contournées. Le choix des polices disponibles est élargi.

Les plus connus sont probablement les Google Fonts (gratuits) et les Adobe Fonts (payants). Cependant, il existe d'autres prestataires. En effet, en Allemagne notamment, les directives plus strictes en matière de protection des données conduisent plus souvent à la recherche d'une alternative à Google. Il n'y a pas seulement des polices à intégrer, mais aussi des plateformes qui hébergent vos polices pour vous, de sorte qu'il n'y a pas de limites à votre créativité. Bien entendu, la condition préalable est que vous soyez propriétaire des droits ou des licences.

Smashing Magazine a testé différents fournisseurs et a rassemblé ses expériences ici.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

Eléments de design des polices de caractères

Afin de choisir une police de caractères appropriée, vous devez connaître certaines caractéristiques des typographies. Ici, on peut dire en gros que les paragraphes doivent être constitués de polices de caractères faciles à lire. Si cela devient trop fatigant, le visiteur cessera de lire votre page. Les informations que vous présentez ne seront pas consommées. 

Un autre aspect consiste à faire attention à la façon dont la police change lorsqu'elle est réduite en taille. Une police lisible sur le bureau peut être difficile à lire dans un format plus petit sur un téléphone portable. 

Il existe des indicateurs qui vous aideront à choisir la bonne police.

Typographie web : comment trouver la police de caractères idéale pour votre site web
Article : Qu'est-ce que la typographie ?

x-height

Dans l'exemple suivant, vous pouvez voir trois exemples différents. La hauteur x décrit la hauteur verticale de la lettre x. S'il est trop petit, le texte devient plus difficile d'accès, surtout avec des polices de taille réduite. Si la hauteur du x est trop grande, il devient plus difficile de distinguer les majuscules des minuscules.

Typographie web : comment trouver la police de caractères idéale pour votre site web
Source : Professionnel
Web Typography

Ouvertures

Les ouvertures sont celles que l'on trouve dans les lettres. D'une manière générale, plus ils sont généreux, plus il est agréable de lire de longues sections de texte avec cette police de caractères.

Espacement des lettres et Kerning

Alors que Letter Spacing décrit l'espacement général entre les lettres, nous entendons par Kerning l'espacement entre certaines lettres. Cet espacement peut être plus grand qu'entre les autres en raison de la forme naturelle des lettres :

Typographie web : comment trouver la police de caractères idéale pour votre site web

Un espacement régulier donne à votre police une apparence plus harmonieuse. Cela le rend plus lisible. D'ailleurs, les deux peuvent être ajustées via le CSS, si vous avez le sentiment que la police que vous avez choisie doit encore être améliorée :

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminaux, ascendants et descendants

Les lettres a, ä, c, f, j, r et y sont des terminaux :

Typographie web : comment trouver la police de caractères idéale pour votre site web
Source : Professionnel
Web Typography

Les ascendeurs et les descendants sont similaires, mais signifient les extensions à, par exemple, f, q et j :

Typographie web : comment trouver la police de caractères idéale pour votre site web
Source : Professionnel
Web Typography

Ils sont d'autant plus discrets qu'ils sont moins adaptés aux textes prononcés. Les polices à empattements, en particulier, sont particulièrement bien définies dans les terminaux, les ascendants et les descendants, c'est pourquoi ces polices ont longtemps été considérées comme un compromis sûr pour les longues sections de texte.

Contraste

Les polices avec beaucoup de contraste (à gauche) sont moins adaptées aux petites tailles de police, comme celles utilisées dans les paragraphes, et sont mieux adaptées aux titres.

Typographie web : comment trouver la police de caractères idéale pour votre site web
Source : Professionnel
Web Typography

Gras et Italique

Lorsque vous choisissez vos polices, vous devez également vous assurer qu'elles sont disponibles en différents poids et styles. En effet, les styles de police qui ne sont pas disponibles peuvent être falsifiés par le navigateur et peuvent alors ressembler à ceci :

(Dans chaque cas, à droite, le style de police "falsifié" par le navigateur)

Typographie web : comment trouver la police de caractères idéale pour votre site web
Typographie web : comment trouver la police de caractères idéale pour votre site web
Source : Professionnel
Web Typography

Sur la base de ces critères, vous pouvez maintenant rechercher la police de caractères du corps de votre site web. Comme le choix est généralement plus compliqué et qu'il y a plus à prendre en compte ici, je recommande de commencer par choisir la ou les polices d'en-tête en fonction de la police du corps (et non l'inverse).

Vous pouvez obtenir un aperçu plus complet et de plus amples explications des termes ici : https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif et Monospace

Il existe un large éventail de catégories pour les polices de caractères. Les trois plus courantes sont probablement

  • Serif, par exemple Times New Roman
  • Sans Serif, par exemple Arial
  • Monospace, par exemple le code source

En ce qui concerne les combinaisons de polices, il existe deux procédures simples que vous pouvez suivre. Il ne s'agit pas d'une obligation, mais simplement de lignes directrices qui peuvent vous aider. Surtout si vous n'avez pas beaucoup d'expérience dans la combinaison des polices de caractères :

  1. Utilisez la même police pour le corps et les titres - mais modifiez le poids, l'espacement et la taille des lettres, par exemple Lato :
Typographie web : comment trouver la police de caractères idéale pour votre site web
Utilise la même police pour le corps et les titres.
  1. Combiner une police avec ou sans empattement, par exemple Baskerville et Open Sans :
Typographie web : comment trouver la police de caractères idéale pour votre site web
Une combinaison de polices peut ressembler à ceci

De plus, il existe un outil en ligne qui te permet de découvrir et d'essayer rapidement différentes combinaisons de polices : https://fontjoy.com/#.

Conclusion sur la typographie sur le web

Un autre sujet important que j'ai complètement omis est l'utilisation des couleurs. Selon que votre police se trouve sur un fond clair ou foncé, elle aura naturellement un aspect différent. Vous pouvez également créer des variations de police en prenant la même police et en l'affichant non seulement en différents poids, mais aussi en différentes couleurs. Lorsque vous choisissez une couleur, gardez à l'esprit le guide de style et l'image de marque de votre marque.

En plus d'analyser d'autres sites web, il est bon d'examiner les tendances actuelles pour s'en inspirer. Vous remarquerez rapidement que certaines combinaisons de polices sont toujours répétées ici et qu'il y a peu de nouveautés. Cependant, selon le projet et les exigences, il peut être nécessaire de se rabattre sur le familier plutôt que d'être particulièrement innovant - vous trouverez plus de détails dans cet article.

Autres ressources sur le sujet

Vos questions : la police parfaite

Quelles sont vos questions sur la typographie sur le web ? N'hésitez pas à utiliser la fonction de commentaire. Vous voulez être informé des nouveaux articles sur la conception et le développement de sites web ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.