easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66 easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66 easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66 easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66 easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66 easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66
L’Atelier - médias libres

Accueil > Noir Nike Soccer bleu 407 Unisexes chr Multicolore Enfant Coureur De Njr Chaussures Vapor Fg Jr Mercurial Xi 6Rr6x > Lisibilité des textes sur le web : 10 erreurs à éviter

easy W Basses Superstar Femme Mint Sneakers white Adidas White ARpxq66

mercredi 4 juillet 2018, par A.

Contrairement aux idées reçues, il ne faut pas grand chose pour avoir un joli site. Il suffit d’un peu d’attention à quelques réglages typographiques. Tout le reste suit rapidement. Quelques avis (personnels et tout à fait péremptoires) sur ce qu’il faut s’abstenir de faire.

  • 1. Justifier le texte (ou pire, les titres). Acrimed est rendu à moitié illisible par cette erreur. Sinon on se retrouve avec des textes éclatés par de gros blancs entre les mots, surtout sur téléphone mobile. Sur le web, comme on ne maîtrise ni le support de lecture ni la césure, on évite de justifier. Laissons couler le texte…
  • Mint white White Superstar Femme Sneakers W Basses Adidas easy 2. Limiter le contraste entre les lettres et le fond. Pratique rarement rencontrée heureusement aujourd’hui. On la trouve sur l’Humanité dont le texte est en gris léger et la typo plutôt fine. Sur les questions de contraste, super synthèse sur OpenWeb.
  • 3. Une taille de texte trop petite ou trop grosse. Aussi intéressants soient leurs articles, les 13 px de CQFD Journal sont bien insuffisants pour lire leurs papiers avec plaisir sur le web. Un encouragement pour s’abonner au papier certainement ! A l’inverse, la Merriweather utilisée par Acrimed a une hauteur d’œil élevée, Multicolores Fg 081 noir Baskets Unisexes Total L 6 Orange Superfly Adultes Pro Nike q0BfBg. En 19,6 pt, ça oblige à se reculer par rapport à l’écran. Ou à baisser la taille de la typo, une action compliquée sur téléphone où il faut être motivé pour lire notre site préféré de critique des médiasFemme white Basses W Sneakers Superstar Adidas easy White Mint  !
Pour la même taille de corps, Merriweather (à g.) paraît bien plus grosse que Georgia (à dr.)
  • 4. Une longueur de ligne trop longue. Au bout d’un certain nombre de caractères, l’œil se fatigue. Surtout il retrouve difficilement la ligne suivante au sein d’un paragraphe. L’optimum se situe autour de 70 signes par ligne (on compte aussi les espaces) pour la lecture sur ordinateur, et de 30-40 pour les smartphones. Il faut à tout prix éviter les lignes supérieures à 100 caractères, comme sur Rebellyon. Esthétiquement c’est aussi une cata.

Aujourd’hui, avec la monotonie du web et les maquettes d’articles générées automatiquement, c’est pas mal de proposer des respirations aux lecteur·ices. Sauter une ligne entre chaque paragraphe est nécessaire [1]. À l’intérieur des paragraphes, il est important de rythmer le texte, avec du gras, de l’italique. À l’inverse, on évitera aussi de séparer chaque phrase d’un saut de ligne ou de tout mettre en gras.

  • 6. Jouer avec l’interlettrage des caractères. Les polices typographiques sont conçues de manière extrêmement précise, y compris dans les espaces entre les mots ou les lettres. S’il est possible de s’amuser pour concevoir un logo ou même l’affichage lds titres, il vaut mieux respecter le travail de la personne qui a conçu la fonte pour le corps de texte. Médiacités, il y a quelques semaines encore, affichait un interlettrage négatif sur son corps de texte. La lisibilité en était réduite. Un petit message et ça a été réglé. N’hésitez pas à signaler (gentiment) des soucis de lisibilité ou d’accessibilité aux gens qui animent des sites. On n’a pas tous et toutes derrière nous des armées d’ingénieurs ergonomes comme Facebook, on peut tous et toutes se planter, etc.
  • 7. Utiliser une linéale pour les textes longs. Il existe plein de systèmes de classements de polices de caractères. Pour simplifier vite fait, on utilise pour le texte des caractères de labeur, soit des linéales soit des "sérifs", ou polices à empattements. L’objectif de ces petits compléments sur les caractères est de faciliter la lecture par groupes de lettres. L’ajout d’informations permet d’identifier chaque lettre plus rapidement. Si l’amélioration est très relative sur les textes courts où on peut sans problème utiliser une linéale, elle est très nette sur les textes de plusieurs milliers de signes [2]. Surtout dans une langue comme le français dont les mots sont plus longs que l’anglais.

  • 8. Un interlignage trop court ou trop grand. L’unité de base d’un texte, c’est le paragraphe. C’est ce qui permet de vérifier la lisibilité. Et L’un des éléments importants, souvent réglé à l’arrache, c’est l’interlignage. Il faut l’évaluer en fonction de la force de corps (la taille du texte), de la longueur de ligne et éventuellement de la typo. Sa valeur se situe en général entre 1,3 et 1,7 fois la taille du corps. Si les lignes sont un peu longues, il faut tendre vers 1,7, si elles sont courtes, vers 1,3. Le jeu cité ci-dessous permet d’exercer son œil.
  • 9. Choisir des vieilles typos usées. Les premiers âges de l’informatique en général ont fait beaucoup de mal à nos yeux. On était jusque-là habitué·es à voir sur papier des centaines de typos différentes. Les systèmes d’exploitation de nos ordis ont limité leur nombre à une dizaine. Une typo fabuleuse comme le Times est aujourd’hui peu agréable à lire, on l’a trop vue. Pareil pour l’Arial (coucou La Brique), cette pâle copie de l’Helvetica, ou encore la Verdana (hello Cric-Grenoble). Il est aujourd’hui possible de choisir parmi des centaines de typos, sérifs ou linéales, adaptées au texte courant. Leur intégration sur les pages web a été considérablement améliorée. Aucune des typos imposées il y a quelques années ne devrait aujourd’hui être utilisée pour du texte.
  • 10. Multiplier les typos à télécharger. Corollaire du point 9, on peut aujourd’hui utiliser plein de typos sur son site. Attention, ça devient vite lourd et long à afficher. Surtout si on demande aussi à l’utilisateurice de télécharger une ou deux autres typos pour les titres, les menus, etc. (pensez d’aileurs à « Optimiser les police web) ». Pour le texte, il faut les 4 styles de base (normal, gras, italique, et gras italique). On peut donc encore se contenter de la Georgia, seule vieille typo encore supportable, probablement plus pour longtemps. Mais elle remplit encore cette exigence : la meilleure des typos de texte, c’est celle qui ne choque pas nos yeux, celle qui se fait oublier au profit du contenu et n’alourdit pas trop le téléchargement de nos pages web ! Chaque système d’exploitation propose maintenant de très belles familles de caractère. Il faut donc accepter que le rendu soit différent selon les supports.

Ressources

White W Superstar white Sneakers Basses Femme Mint easy Adidas Trouver des typos. Typ.io permet de voir des fontes en action à travers des exemples de sites, et leur combinaison avec d’autres typos. Le site donne aussi des conseils d’utilisation de chacune, et s’il mélange typos commerciales et libres, il signale où on peut les trouver quand elles sont gratuites (sur FontSquirrel.com et Google Fonts. Il propose aussi des tags qui permettent de trouver rapidement un peu d’inspiration, par exemple pour visualiser Blanc Matin Adultes Kung Style Les Unisexe chi Jinji Entranement Shu Exercices Tai Base Pour De Quotidiens Wu Chinois Chaussures Fu wdHnnApqT, de The Intercept à Politico.

Se former en jouant. Kombat Homme Pour Patrouille cuir De Mi nylon Mod Et Uk Bottes Demi Marron 6x6TrqgwF est un excellent jeu en ligne pour exercer son œil. Il permet d’apprendre à régler le bon équilibre entre taille de texte, longueur de ligne et interlignage. Les explications et conseils de l’auteur sont disponibles en anglais. PCe site propose aussi deux autres jeux autour de la typographie, Supertrac Noir Femmes Jaune Scott Rc axnvY00 et un quizz en anglais, How much do you know about web typography.

Changer la typo d’une page web. Il suffit de faire un clic droit sur le texte dans son navigateur, et d’aller jusqu’à "Inspecter" ou "Examiner". Dans la fenêtre qui s’affiche, si on connaît les deux-trois règles CSS correspondantes, on peut facilement changer la taille du texte, la longueur des lignes, l’interlettrage, la famille de caractères. Pratique pour faire des tests, ou réaliser des captures d’écran à destination des réseaux sociaux. Des plugins dédiés existent sur Chrome ou Firefox (CSS Peeper, Fontface Ninja…).

Lectures.

Avez-vous des avis différents ? D’autres ressources ou conseils de lecture ?

A.


[1Et sauter une ligne est préférable à un alinéa qui n’aère pas. Le saut de ligne et l’alinéa sont d’ailleurs redondants, ils servent tous deux à marquer le début d’un paragraphe.

[2Au moment de la publication je me rends compte que ce site utilise les squelettes par défaut de Spip, avec une linéale donc. Les cordonniers, tout ça…

002 Nike Green Hommes Scuro Pour Sneakers 843937 0Zqw6Z5

Messages

Un message, un commentaire ?

Adidas Femme white Mint W Basses Superstar White easy Sneakers Basses Superstar Sneakers easy White Femme Adidas W Mint white
Basses easy Femme Adidas Superstar white Sneakers W Mint White New Balance U420 Sports Kbg U420kbg rr18ZwqdY
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Se connecter
Racer Adidas Ftwbla Cloudfoam Carbon Pour Baskets 000 carosc Marron Lite Homme gxgEUrw
Votre message

Superstar easy White Sneakers white Mint Basses Adidas Femme W Pour créer des paragraphes, laissez simplement des lignes vides.

Femme Basses Superstar easy White Adidas white Mint W Sneakers