bases de la typographie webdesign

Les bases de la typographie pour ton prochain projet

La simplicité est difficile. C'est ma devise. Et il en va de même pour l'utilisation de la typographie dans le design web, des polices de caractères sur le site web - en fait très simple et pourtant assez compliqué. C'est pourquoi je veux te montrer aujourd'hui les principes de base de la typographie que tu dois respecter pour présenter au mieux le texte sur ton site web.

Ce n'est pas un secret que pour beaucoup de personnes, il est difficile de s'exprimer de manière claire et compréhensible. Pourquoi cela devrait-il être plus facile via les médias ? Pour faciliter cela - la communication - il y a la typographie. Il s'agit d'une part de l'étude de l'écriture, et d'autre part d'un élément de conception permettant de présenter des textes ou des contenus de manière habile, adaptée à l'objectif ou "esthétiquement agréable". La distinction entre microtypographie et macrotypographie n'a pas d'importance à ce stade.

Pourquoi les bases de la typographie dans le design web ?

bases de la typographie webfonts

Il ne fait aucun doute que les polices de caractères peuvent animer un site web et l'enrichir visuellement. Les polices de caractères sont des éléments importants de tout bon design. Mais sur Internet, c'est-à-dire dans le design web, la typographie est soumise à des conditions particulières que je souhaite mettre en lumière ici et qui t'aideront à mieux comprendre la question de la police sur les sites web.

"Une bonne typographie ne cherche pas tout ce qui est encore possible, mais demande ce qui est nécessaire".

- Kurt Weidemann

Souvent, les sites web ne sont pas réalisés par des designers graphiques ou des concepteurs de médias formés, mais conçus et mis en œuvre par des débutants. Cela peut expliquer pourquoi de nombreux sites Web ne respectent même pas les règles graphiques les plus simples. C'est particulièrement évident en ce qui concerne la typographie. L'utilisation effrénée de VERSALIES peu lisibles, le manque de contraste entre la couleur de la police et le fond, ainsi que la structure confuse des textes rendent la lecture difficile pour les utilisateurs.

Mais c'est justement de cela qu'il s'agit quand on parle de typographie : de la lisibilité des textes. Sinon, à quoi bon avoir des textes sur ton site web s'ils ne sont pas agréables à lire ? Il paraît que les avis sont partagés sur la question de savoir à quoi doivent ressembler des textes faciles à lire. Je ne comprends pas, car nous avons dans le graphisme des règles typographiques simples, éprouvées et très utiles pour créer des textes faciles à lire. La typographie, tout simplement.

L'une d'entre elles est le contraste - c'est-à-dire le rapport de couleur entre la couleur de la police et le fond. Dans un forum, j'ai une fois critiqué une mise en page web fièrement présentée pour cette raison. Dans le graphique, nous appelons le phénomène que le prétendu webdesigner voulait vendre ici "aigle blanc sur fond blanc". Dans ce cas, il avait un texte courant gris foncé sur un fond gris clair, donc un contraste insuffisant.

C'est peut-être joli - c'est probablement une question de goût - mais c'est difficile à lire. Je l'ai signalé et j'ai trouvé que ce n'était pas un bon design pour moi si j'avais du mal à lire le texte. Et j'ai encore des yeux sains. Que font ceux qui ont une vue limitée ? C'est aussi un problème souvent sous-estimé - mot-clé : accessibilité. Quoi qu'il en soit, le designer a déclaré que c'était son design et qu'il le ferait. Nous savons aussi que "tu peux faire comme ça, mais alors c'est nul".

Pour moi, c'est une preuve supplémentaire du peu de connaissances sur la lisibilité des textes, donc sur une bonne typographie. Il y a de nombreuses années, j'ai eu une graphiste et une typographe confirmée lors de ma formation de concepteur de médias (impression), et j'ai pu apprendre beaucoup d'elle.

Design web et typographie

bases de la typographie webfonts

Mais dans le design web, nous avons d'autres exigences pour la typographie que celle de la lisibilité, à savoir des exigences techniques. Sur Internet, une bonne lisibilité implique que le site web se charge rapidement. Nous avons donc affaire à la performance WordPress pour l'intégration des polices de caractères.

De plus, il faut s'assurer que les textes soient lisibles de la même manière sur tous les appareils de sortie, ce qui constitue un autre défi. Au final, avec les possibilités offertes par le langage de balisage CSS, tu as tellement de possibilités d'intervenir dans la typographie d'un site Web que cela devient rapidement plus complexe que prévu.

Et nous voulons bien sûr avoir un texte bien structuré qui augmente également la lisibilité, évite la fatigue et agit sur Google, c'est-à-dire sur le classement dans le moteur de recherche. Citons par exemple les balises de titre H1, H2, H3, etc., l'utilisation de listes et de formes de balisage comme Bold/Strong et em/i, ainsi que les marques de paragraphe et autres éléments HTML utiles.

Je suis un ami des polices standard. Ceci pour commencer. Je veux dire qu'il n'est pas vraiment nécessaire d'intégrer des polices spéciales sur un site web. Comme exemple de raison d'intégrer une police propre, on peut citer la police CI. Il s'agit d'une police spécialement conçue pour l'entreprise et qui joue un rôle important dans l'identité de l'entreprise. Ou alors, tu es un très bon designer, artiste ou photographe et tu tiens à avoir une image extravagante ou très personnalisée. Dans ce cas, il ne s'agit pas nécessairement de gros blocs de texte ou d'informations écrites.

Une police CI propre est généralement utilisée par les grandes entreprises qui disposent de leur propre service informatique et d'une ferme de serveurs. Il n'y a pas de problèmes de performance et l'intégration des polices CI est surveillée techniquement.

Si tu es designer et que tu veux montrer ce dont tu es capable, il est recommandé d'utiliser des services existants pour la typographie - des polices web éprouvées - afin d'intégrer la police souhaitée dans ton site web de manière sûre et performante.

Il semble parfois possible de transformer la police de caractères souhaitée en formats adaptés au Web et de l'intégrer individuellement. Que cela fonctionne toujours et durablement est une autre histoire. C'est pourquoi je préfère Google Fonts dans ce cas, car il est rapide, sûr et facile à utiliser. Mais là encore, c'est peut-être une question de goût.

"*" 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é.

Ces 10 règles de typographie t'aideront

Les bases de la typographie Les polices de caractères

Règles suprêmes et très simples : Moins, c'est plus. Prends en compte les habitudes de lecture des gens. Oriente-toi vers des sites qui présentent des textes éditoriaux volumineux et apprends.

La lisibilité des textes est soumise à certaines règles scientifiquement fondées. Elles ne concernent pas seulement l'écriture elle-même, mais aussi son environnement, le contraste, la clarté et la structure des textes ainsi que la netteté de leurs bords.

1. la taille de la police

Il dépend de la police de caractères et repose sur la conception de base du site web. Veuillez noter que l'utilisateur a toujours la possibilité de modifier la taille de la police dans son navigateur ou son smartphone. Essayez de prendre des tailles de police relatives, c'est-à-dire %, EM/REM ou petit/moyen/grand.

2ème largeur de ligne

Celle-ci est nettement sous-estimée. Il a été déterminé quelle largeur de texte les gens aiment encore lire : Il s'agit d'une largeur maximale d'environ 70 caractères, c'est-à-dire une largeur de texte A4 standard d'un document Word. Regarde sur SPIEGEL ONLINE et autres pour voir la largeur de leurs blocs de texte.

3. espacement des lignes

Pour une lisibilité optimale, ce que l'on appelle la trame, c'est-à-dire l'espace entre les différentes lignes d'un texte - également la hauteur d'un paragraphe - est très important. Selon la police de caractères, 140-150% de hauteur de ligne ont fait leurs preuves sur le web.

4ème largeur de fût

Il s'agit de l'espacement entre les lettres, qui est manipulé par "letter-spacing". Vous devez être très prudent ici et n'utiliser cette option de conception qu'avec précaution - par exemple, avec certaines rubriques. En cas de doute, ne l'ajustez pas.

5. le contraste

Le rapport entre la couleur et la couleur de fond est appelé contraste. Ce chiffre devrait être très élevé pour un texte continu. Le contraste maximal est bien sûr le texte noir sur fond blanc. C'est facile à lire.

6ème structure

Cela signifie : des textes bien structurés et sémantiquement corrects ! En HTML, cela signifie par exemple les balises de titre H1/H2/H3, les marques de paragraphe, les listes de marquage, l'utilisation intelligente de la mise en évidence par le biais du gras, de l'italique et de la couleur. Cela a un effet direct sur la lisibilité et sur le classement Google.

7. un maximum de deux types de police

Souvent, une police par site web, livre ou document suffit. Dans des cas particuliers, plus fonctionnent, mais tu dois être prudent avec l'utilisation de plus de 2 polices par document.

8. les capitales

Évite les majuscules dans les titres et le menu. Elles sont difficiles à lire. Mais s'il s'agit de mots isolés, par exemple dans la NAVIGATION, tu peux utiliser les majuscules. Mais ne les écris pas en majuscules. Utilise CSS pour les résoudre avec "text-transform:uppercase".

9. les polices standard

En cas de doute et comme solution de repli, tu devrais choisir des polices système éprouvées. Arial, Verdana, Georgia sont des polices système très lisibles, que presque tous les périphériques de sortie possèdent et qui s'affichent toujours bien.

Un fallback dans le CSS est la police qui suit, comme chez BMW : "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif ; ici, Arial, Helvetica et Sans Serif (c'est-à-dire la première police disponible sous Sans Serif) sont les fallbacks qui s'affichent lorsque la police précédente ("bmwTypeWebBoldAll") n'est pas disponible.

10. formation

Mon conseil : forme-toi à la typographie en participant à des ateliers, en lisant des livres et des magazines ou en regardant une vidéo YouTube sur le sujet. Je recommande par exemple cette vidéo. Contrairement à moi, Sven Wolfermann déconseille les polices système dans son exposé à la MobileTechCon, mais il fournit ici de nombreuses informations précieuses sur le sujet !

Conception de la police avec CSS : Est-ce que cela a du sens ?

Un mot sur la conception des polices, ou plus précisément sur leur réglage via CSS : Depuis l'introduction de CSS3, les développeurs disposent d'options de réglage subtiles pour les polices de caractères d'un site WordPress. Mais est-ce que cela a toujours un sens ? Pourquoi et quand les utiliser ? Qu'est-ce que je veux obtenir ? La lisibilité ? Un beau design ? Tous les codeurs - ou leurs clients - ne semblent pas y penser. Ils font parfois tout ce qui est possible. Ils modifient non seulement la hauteur de la ligne, ce qui pose parfois des problèmes de hauteur, d'espacement et de positionnement, mais aussi l'espacement des lettres ou l'ombre autour du texte ("text-shadow"). C'est terrible ce que l'on peut parfois voir.

Je te conseille donc de faire très attention à ces paramètres et d'utiliser ces techniques avec précaution. Elles ne fonctionnent pas partout et peuvent même gêner l'affichage sur les petits écrans. Ensuite, tu dois annuler les instructions pour le bureau via les "Media Queries", ce qui prend du temps et du code. Est-ce que cela a vraiment un sens ? La réponse doit être très claire et précise.

Coupes de caractères pour le web : les polices web

bases de la typographie webfonts

D'ailleurs, BMW utilise ceci sur son site web : font-family : "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight : normal ; - dans le texte courant, Arial normal. Amazon utilise également Arial sur le site de sa boutique. Apple, par contre, utilise bien sûr sa propre police de caractères pour le web. La société pétrolière TEXACO utilise les polices Adobe. Juste un petit exemple.

Heureusement, il existe aujourd'hui de nombreux fournisseurs de polices web qui fonctionnent bien et qui sont généralement faciles à intégrer. Malheureusement, ces "polices web" sont généralement payantes et les prix varient considérablement. En plus de Google Fonts, on peut citer les exemples suivants : Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts et bien d'autres encore - c'est une question de goût.

L'avantage de ces services est évident : tu n'as pas de soucis de licence (voir plus bas "Attention aux licences !"), les polices fonctionnent et il y a de l'aide, plus précisément des instructions pour intégrer les polices sur ton propre site (donc du support ou des forums à ce sujet). Les tarifs sont souvent extensibles et tu as un certain choix de polices passionnantes.

Le malentendu avec les polices de Google

Lorsqu'en 2018, Mai a rendu RGPD obligatoire pour tous, la communauté du web a paniqué à l'idée d'utiliser les polices de caractères Google. On craignait que l'utilisation des polices de caractères Google Web - Google en tant que "pieuvre de données", contre laquelle cette législation était dirigée - ne soit pas conforme aux lois sur la protection des données et que l'on risque donc de recevoir des avertissements coûteux.

Cette peur toujours répandue met en lumière la grande confusion qui règne malheureusement toujours autour de RGPD. Pour le bien des avocats et des cabinets d'avocats du web, bien sûr. Si tu as conclu un contrat de traitement des commandes avec Google en raison de l'utilisation de Google Analytics et que tu mentionnes l'utilisation des polices - et en cas de doute des cookies - dans ta déclaration de confidentialité, le problème est réglé.

Si tu as toujours peur, tu peux aussi intégrer toutes les polices Google en local, c'est-à-dire télécharger les polices Google Web et les enregistrer sur ton propre espace web.

De plus, les performances ont été dénoncées à maintes reprises, car elles étaient soi-disant si mauvaises lorsque les polices étaient chargées via Google. On ne mentionne pas le fait que Google a une architecture de serveur rapide et très stable et qu'il y a encore des retombées (voir ci-dessus). De plus, on charge les polices à partir d'une autre URL, ce qui peut se faire en même temps que le chargement des fichiers à partir de son propre serveur. Mais une fois de plus, tu es dépendant de Google.

Attention : Temps de chargement !

Le problème est très simple. Les polices web intégrées en externe peuvent augmenter le temps de chargement du site WordPress. Le code nécessaire pour intégrer ses propres polices dans le site WordPress aussi. Seules les polices standard, les polices système sur les ordinateurs et les smartphones des utilisateurs, ne nécessitent pas de temps de chargement, car elles ne sont pas chargées via un serveur, pas via Internet.

En d'autres termes, si ton site WordPress a besoin de temps de chargement rapides, qu'il n'y a peut-être pas l'hébergement WordPress correspondant derrière et que l'entreprise n'a pas de police CI qui doit absolument être intégrée, je miserais toujours sur le standard. C'est-à-dire sur des polices système, comme Amazon le fait avec Arial. Cela a un sens.

Bien sûr, il ne s'agit pas des kilo-octets de polices à télécharger. Il s'agit du fait qu'elles viennent en plus, qu'elles doivent être téléchargées en plus et que le serveur qui doit les livrer est peut-être en train de faiblir. Ce n'est pas beau à voir et c'est... évitable.

Attention : Licences !

Ce dont il faut absolument tenir compte, ce sont les licences pour les polices utilisées. Si tu utilises des polices Google ou des polices système qui, comme chacun sait, sont chargées par l'ordinateur de l'utilisateur, tu es en sécurité sur le site WordPress. Pour toutes les autres polices que tu utilises sur ton site, tu dois t'assurer de posséder la licence correspondante. Et celle-ci peut vite devenir très chère. Que ce soit pour l'utiliser sur ton propre site ou pour une police gratuite qui pose parfois d'autres problèmes, comme les trémas allemands et l'eszett (ß).

Pour éviter tous ces problèmes, j'utilise des polices système ou Google Fonts. Si le client veut absolument sa propre police, il faut inclure le coût dans le calcul, car l'intégration de polices externes dans le site Web peut parfois poser quelques problèmes. Par exemple, en ce qui concerne les instructions CSS et ici, par exemple, ce que je trouve toujours très mauvais, c'est la recherche du nom correct de la police afin de pouvoir accéder correctement à la police pour l'affichage des balises HTML.

Intégrez vos propres polices de caractères

bases de la typographie webfonts

Avec des polices web et/ou des polices personnalisées que tu as rendues utilisables pour ton site WordPress via un outil, tu peux rapidement te retrouver avec une série de problèmes pour ton site WordPress. Il n'est pas rare que les phénomènes suivants se produisent :

  • Police scintillante lors du chargement du site WordPress (pas inhabituel, parfois on voit une autre police jusqu'à ce que le CSS l'écrase avec la police web.
  • Temps de chargement plus long à cause de polices très complexes (plutôt rare).
  • Le flou de l'écriture, la distorsion due à un mauvais rendu (sur certains systèmes) sont plus fréquents.

Pour pouvoir afficher la police souhaitée sur le plus grand nombre possible de périphériques de sortie, tu as besoin de différentes variantes de celle-ci. "TTF" est clair et connu, mais tu as aussi besoin de "EOT" et des deux variantes "WOFF". C'est indispensable si tu veux intégrer tes propres polices dans ton site WordPress. Tu peux générer ces formats gratuitement avec le générateur de polices Web. Ensuite, tu télécharges tous les formats de ta police dans un répertoire de ton serveur et tu les intègres dans ta feuille de style (fichier CSS) avec le chemin comme suit :

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') format('ttf'),
      url('/deinfont.eot') format('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Tu peux voir dans ce code @font-face, qui intègre ta police, à quel point la chose est complexe - et donc sujette aux erreurs.

Tu peux ensuite les utiliser dans ton code CSS et les attribuer aux classes et aux ID. De cette manière, quelques erreurs peuvent survenir, que je ne souhaite pas aborder ici. Comme toujours : Je recommande les polices standard ou système, ou les polices Google, qu'il suffit d'intégrer via le fichier lié dans l'en-tête du site :

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Typographie et affichage mobile

bases de la typographie webfonts

Cet aspect est fondamentalement négligé. De mon point de vue, il n'est absolument pas nécessaire de charger une police spéciale sur un petit écran ou un smartphone. Qu'en est-il des fallbacks, les polices système des téléphones portables ? Si je fabrique un site WordPress mobile ou si je dois l'optimiser pour les mobiles, la première chose que j'économise en raison du temps de chargement est bien sûr le téléchargement d'une police web ou d'une police personnalisée.

Bien que ce soit une décision stratégique qui doit évidemment être discutée avec le client, je ne vois pas un seul argument en faveur d'une police web ou d'une police personnalisée en rendu mobile.

Bien entendu, toutes les polices système qui existent pour le bureau ne sont pas disponibles sur le smartphone. Mais de mon point de vue, peu importe que vous ayez telle ou telle police pour le système Android. Il s'agit d'une information rapide et d'une bonne lisibilité. C'est ce que garantissent Android et Apple avec leurs polices de caractères adaptées au web.

Si nous considérons la chose sous deux aspects essentiels, à savoir la vitesse de chargement et le design, nous devons conclure qu'une police de caractères propre à l'affichage mobile est superflue. D'une part, la police affecte la vitesse de chargement du site WordPress mobile, ce qui est particulièrement important lors de la consultation à l'arrêt de bus. D'autre part, nous avons réduit le contenu et le design de la version mobile du site web à l'essentiel (espérons-le) pour ces raisons. Pourquoi charger une police de caractères web sophistiquée ?

L'essentiel est toujours la lisibilité ou ce que nous voulons atteindre : La transmission de connaissances, le divertissement littéraire, l'achat d'un produit, un contact, la commande sur newsletter ou la consultation de l'adresse. Et pour cela, je pense que vous n'avez pas besoin d'une police spéciale ou d'une police web.

Des polices de caractères sûres pour le Web

Tu dois absolument vérifier si l'une des polices système est adaptée à ton projet. Tu trouveras une collection complète d'instructions CSS pour les polices système, plus précisément les polices web, sur CSS Font Stack.

Que sont les polices web sûres ? Les polices sûres pour le web sont des polices préinstallées dans de nombreux systèmes d'exploitation. Bien que les mêmes jeux de caractères ne soient pas installés sur tous les systèmes, tu peux utiliser un bloc web sécurisé de paramètres CSS pour sélectionner plusieurs jeux de caractères qui ont l'air similaires et qui sont installés sur les différents systèmes que tu souhaites soutenir. A partir de CSS3, si tu souhaites utiliser des polices autres que celles préinstallées, tu peux utiliser les paramètres de ces polices web.

Conclusion sur les bases de la typographie

Tu devrais réfléchir très attentivement si une police système fait aussi bien ou même mieux qu'une police web ou une police personnelle. Tu peux utiliser sans problème des polices éprouvées comme Verdana, Arial, Trebuchet, Georgia, Times New Roman et autres, car elles sont toujours lisibles. Et nous n'avons pas encore parlé de la qualité du contenu des textes, qui joue bien sûr un rôle décisif. Mais c'est un autre sujet. Ne sous-estime pas la typographie sur les sites web. Prends en compte les aspects techniques, comme le temps de chargement ou les trémas des polices, mais aussi la convivialité de ton design typographique, c'est-à-dire la lisibilité, le contraste et la hauteur des lignes.

Réfléchis bien si tu veux utiliser ta propre police de caractères ou une police externe, ou si tu veux utiliser des polices standard, plus précisément des polices système. Si tu décides d'utiliser ta propre police de caractères, demande-toi si tu peux utiliser cette police ou une variante similaire avec Google Fonts. Ou si tu veux vraiment intégrer les polices à la main via CSS et les charger au préalable sur le serveur dans tous les formats. Les polices standard que l'utilisateur a sur son ordinateur ou son smartphone et qui sont chargées à partir de là sont éprouvées et ne nécessitent pas de temps de chargement. C'est d'autant plus vrai pour le chargement mobile, pour l'affichage de ton site WordPress sur les smartphones.

Pour moi personnellement, il n'y a généralement pas beaucoup d'arguments en faveur de l'utilisation d'une police externe ou d'une police web. Si un thème WordPress possède déjà des polices Google, je les utilise bien sûr. Parce que sinon, je dois tout dévisser ou écraser. Ce n'est pas vraiment utile.

Si elle ne fait pas clairement partie de l'identité visuelle d'une entreprise, une police de caractères propre est un gadget. Et la plupart des clients n'ont ni le temps ni l'argent pour le faire. Beaucoup de chemins mènent à Rome, mais la mauvaise utilisation de la typographie sur un site web et dans le design web ne l'est probablement pas. Les polices système, les polices standard permettent de créer et d'alimenter de magnifiques designs et sites web. Leur utilisation est la voie la plus sûre et elle le restera encore longtemps. C'est peut-être une question de goût, mais c'est peut-être l'approche la plus raisonnable en matière de polices de caractères sur les sites Web.

Tes questions sur les bases de la typographie

Quelles questions as-tu sur les bases de la typographie ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé des nouveaux articles sur WordPress, le design web et plus encore ? Alors suis-nous sur Twitter, Facebook, LinkedIn 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 *.