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, c'est très simple et pourtant assez compliqué. C'est pourquoi j'aimerais te montrer aujourd'hui quelles sont les bases de la typographie que tu dois respecter pour présenter au mieux le texte sur ton site web.

Ce n'est un secret pour personne que de nombreuses personnes ont du mal à 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 des polices de caractères 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. Sur Internet, c'est-à-dire dans la conception de sites Web, la typographie est soumise à des conditions particulières que j'aimerais mettre en lumière ici et qui devraient t'aider à mieux comprendre la question des polices de caractères 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 créés par des graphistes ou des concepteurs multimédias qualifiés, mais conçus et réalisés par des débutants. Cela peut expliquer pourquoi les règles graphiques les plus simples ne sont pas respectées sur de nombreux sites web. Cela devient particulièrement évident en matière de 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 précisément de cela qu'il s'agit quand on parle de typographie : de la lisibilité des textes. Sinon, à quoi bon avoir des textes sur son site web s'ils ne sont pas lisibles et 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 peux pas le comprendre, car nous disposons dans le graphisme de règles typographiques simples, éprouvées et très utiles pour créer des textes bien lisibles. La typographie, tout simplement.

L'une d'entre elles est le contraste, c'est-à-dire le rapport entre la couleur de la police et celle de l'arrière-plan. Dans un forum, j'avais un jour 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 beau - 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 pourtant, j'ai encore une bonne vue. 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é qu'il s'agissait de son design et qu'il le ferait de cette manière. Nous connaissons aussi : "Tu peux faire comme ça, mais alors c'est nul".

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

Conception de sites web et typographie

bases de la typographie webfonts

Dans le design web, nous avons toutefois d'autres exigences envers 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 de WordPress pour l'intégration des polices de caractères.

De plus, il faut garantir 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 l'affaire devient vite 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 adepte des polices standard. Ceci pour commencer. Je pense qu'il n'est pas vraiment nécessaire d'intégrer des polices spéciales sur un site web. Pour illustrer la raison pour laquelle on intègre une police propre, je citerai ici la police CI. Il s'agit donc d'une police spécialement développée pour l'entreprise, qui a une fonction importante dans l'identité d'entreprise. Ou alors, on est un très bon designer, artiste ou photographe et on attache de l'importance à une image extravagante ou très individuelle. Dans ce cas, il ne s'agit pas non plus 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 donc pas de problèmes de performance et l'intégration des polices CI est surveillée sur le plan technique.

Si l'on est designer et que l'on veut montrer ce que l'on sait faire, il est recommandé, pour la typographie, de recourir à des services existants - à des polices web éprouvées - afin d'intégrer la police souhaitée dans son propre site web de manière sûre et performante.

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

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Ces 10 règles typographiques t'aideront

bases de la typographie polices web

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 rédactionnels 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. largeur de ligne

Celle-ci est nettement sous-estimée. On a déterminé la largeur de texte que les gens aiment encore lire : Il s'agit d'une largeur maximale d'environ 70 caractères, soit la largeur de texte standard A4 d'un document Word. Il suffit de consulter SPIEGEL ONLINE et d'autres sites pour voir la largeur de leurs blocs de texte.

3. espacement des lignes

Pour une lisibilité optimale, l'espacement entre les lignes d'un texte - également la hauteur d'un paragraphe - est très important. Selon la police de caractères, une hauteur de 140 à 150 % a fait ses 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. 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 des mises en évidence par le biais des caractères gras, italiques 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 seule police par site web, livre ou document suffit. Dans des cas particuliers, plus de polices fonctionnent, mais tu devrais être prudent avec l'utilisation de plus de 2 polices par document.

8. les capitales

Renonce aux 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 plutôt la fonction CSS "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 de telles polices système parfaitement lisibles, que presque tous les périphériques de sortie possèdent et qui sont toujours bien représentées.

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

10. formation

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

Conception de polices avec CSS : Est-ce utile ?

Un mot sur la conception des polices, ou plus précisément sur leur réglage au moyen de CSS : Depuis l'introduction de CSS3, les développeurs disposent de possibilités de réglage subtiles pour les polices de caractères d'un site WordPress. Mais sont-elles vraiment toujours utiles ? Pourquoi et quand les utiliser ? Quel est mon objectif ? 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 le tracé ("line-height"), ce qui pose parfois des problèmes de hauteur, d'espacement et de positionnement, mais aussi l'espacement des lettres ou placent des ombres autour du texte ("text-shadow"). C'est grave ce que l'on peut parfois voir.

Je te conseille donc d'être très prudent avec ces réglages et d'utiliser ces techniques avec discernement. Elles ne fonctionnent pas partout et peuvent même gêner l'affichage sur les petits écrans. Tu dois alors annuler les instructions pour le bureau via les "Media Queries", ce qui coûte à nouveau 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

Remarque : BMW utilise sur son site web, comme nous venons de le voir, la police suivante : font-family : "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight : normal ; - dans le corps du texte : Arial normal. Amazon utilise également Arial sur le site de sa boutique. Apple, en revanche, utilise naturellement sa propre police de caractères pour le web. Le groupe pétrolier TEXACO utilise les polices Adobe. Ce ne sont que de petits exemples.

Heureusement, il existe désormais 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 fortement. Outre Google Fonts, on peut citer comme exemple : 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 aucun souci de licence (voir plus bas "Attention : licences !"), les polices fonctionnent et il y a de l'aide, plus précisément des instructions pour intégrer les polices sur son propre site web (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 mai 2018, la directive RGPDa été introduite de manière obligatoire pour tous, les internautes ont 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 des 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 crainte toujours répandue met en lumière la grande confusion qui règne malheureusement encore autour de RGPD. Pour le bien des avocats et des cabinets d'avocats du web, bien sûr. Si l'on a conclu un contrat de traitement des commandes avec Google en raison de l'utilisation de Google Analytics et que l'on mentionne l'utilisation des polices - et en cas de doute des cookies - dans la déclaration de protection des données, le problème n'existe plus.

Pour ceux qui ont encore peur, il est également possible d'intégrer toutes les polices Google en local, c'est-à-dire de télécharger les polices Google Web et de les enregistrer sur son propre espace web.

En outre, les performances ont été régulièrement dénoncées, car elles étaient soi-disant si mauvaises lorsqu'on chargeait les polices via Google. On oublie de mentionner que Google possède une architecture de serveur rapide et extrêmement stable et qu'il existe encore des cas de repli (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, on est 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 également. Seules les polices standard, les polices système installées 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, ni via Internet.

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

Bien entendu, il ne s'agit pas ici des kilo-octets de polices à télécharger. Il s'agit du fait que celles-ci viennent s'ajouter, qu'elles doivent donc être téléchargées en plus et que le serveur qui doit les livrer est peut-être en train de faiblir. Cela n'a pas l'air bon et est ... évitable.

Attention : Licences !

Ce dont il faut absolument tenir compte, ce sont les licences pour les polices utilisées. Si l'on utilise des polices Google ou des polices système qui, comme on le sait, sont chargées par l'ordinateur de l'utilisateur, on est en sécurité sur le site WordPress. Pour toutes les autres polices que l'on utilise sur le site, il faut s'assurer que l'on possède la licence correspondante. Et celle-ci peut vite devenir assez chère. Que ce soit pour l'utiliser sur son propre site ou qu'il s'agisse d'une police gratuite qui pose parfois d'autres soucis, si l'on pense par exemple aux Umlaut allemands et à l'eszett (ß).

Pour éviter tous ces problèmes, je mise justement sur les polices système ou sur Google Fonts. Si le client souhaite absolument avoir sa propre police de caractères, il faut prendre en compte le coût de celle-ci dans le calcul, car l'intégration de polices de caractères 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 t'exposer à 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, on voit parfois une autre police jusqu'à ce que le CSS l'écrase avec la police du web.
  • Temps de chargement plus long en raison de polices très complexes (plutôt rare).
  • Le flou des caractères, 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 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 vois, avec ce code @font-face qui intègre ta police, à quel point la chose est complexe - et donc sujette à erreurs.

Tu peux ensuite les utiliser dans ton code CSS et les attribuer aux classes et aux identifiants. Cette méthode peut entraîner quelques erreurs 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 particulière sur un petit écran ou sur un smartphone. Qu'en est-il des fallbacks, les polices système des téléphones mobiles ? Lorsque je réalise un site WordPress mobile ou que 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 de caractères nuit à la vitesse de chargement du site WordPress mobile, ce qui est justement important en cas de 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 devrais en tout cas vérifier si l'une des polices système est adaptée à ton projet. Tu trouveras une collection complète d'instructions CSS sécurisées pour les polices système, ou plus précisément les polices sécurisées pour le web, sur CSS Font Stack.

Que sont les polices sécurisées pour le web ? Les polices sécurisées 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é des paramètres CSS pour sélectionner plusieurs jeux de caractères qui semblent similaires et qui sont installés sur les différents systèmes que tu souhaites prendre en charge. À 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 hésiter des polices éprouvées comme Verdana, Arial, Trebuchet, Georgia, Times New Roman, etc. 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 question de 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 ou 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. Cela est d'autant plus vrai lors du chargement mobile, lors de 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 dispose déjà de polices Google à bord, je les utilise bien sûr. Car 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 cela. De nombreux chemins mènent à Rome, mais pas la mauvaise utilisation de la typographie sur un site web et dans la conception d'un site web. Les polices système, les polices standard permettent de créer et d'alimenter de magnifiques designs et de superbes sites web. Leur utilisation est plus sûre et le restera encore un certain temps. C'est peut-être une question de goût, mais c'est peut-être l'approche la plus judicieuse 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 commentaire. Tu veux être informé(e) des nouveaux articles sur WordPress, le design web et bien 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.