css 4 design » interlignage

Webdesign, lisibilité, typographie et rédaction web

Bruno Bichet — Tue, 25 Jan 2011 13:03:04 +0000

Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web. En 1997, Jakob Nielsen déclarait que la lecture sur écran était 25% plus lente que sur le papier. Depuis cette époque, la technologie n’a cessé d’évoluer et la qualité des écrans et des polices de caractères va dans le bon sens. Il est temps de se poser des questions sur la lisibilité des caractères, le sens de lecture d’une page, les valeurs optimales pour le corps des textes et leur interlignage, le nombre de fontes que l’on peut utiliser dans une page et la rédaction pour le web.

Lisibilité des caractères: Les caractères avec des empattements sont réputés pour offrir une lisibilité supérieure à ceux qui n’en possèdent pas. Les empattement guideraient l’œil. Pourtant dans le même temps, on entend souvent dire que l’on ne déchiffre pas les mots lettre à lettre mais que l’on reconnait la forme globale des mots. Il manque donc un paramètre pour démontrer la supériorité des caractères possédant des empattements.

Il faut savoir qu’au début du XXe siècle, il y avait effectivement une différence notable entre la lecture des caractères serifs et sans-serif : ces derniers faisaient tout juste leur apparition. En matière de lisibilité, les habitudes sont un critère important.

→ Lire Le petit journal permanent de la TypOgrApHiE !

Lecture en «F» ou en «Z» ?: Certaines études utilisant l’eye-tracking ont démontré que les résultats issus de la page du moteur de recherche Google étaient pour ainsi dire «scannés» par l’œil selon un parcours en «F». Pour autant, vos pages doivent-elles se contenter d’un seul sens de lecture ? Non ! Le parcours en «Z» d’une page imprimée est sans doute encore d’actualité sur le web. La question étant plutôt de placer les éléments importants de votre communication au-dessus du fold plutôt qu’au-dessous.

→ Lire 10 principes pour un design web efficace et Les habitudes de scrolling à la loupe (Eyetracking).

Interlignage à 120% ou 150% ?: Dans l’imprimé, on utilise couramment des valeurs d’interlignage comprises entre 100% et 120% de la taille des caractères pour les pavés de textes destinés à la lecture continue. A l’écran, ces valeurs sont trop faibles. En raison des contraintes de la lecture à l’écran (définition, contraste, luminosité, distance de lecture), il est préférable d’utiliser un interlignage compris entre 140% et 150% par rapport au corps de la fonte utilisée.

A moduler évidemment selon l’œil, la hauteur d’«x» des caractères, la largeur des pavés de textes, le nombre de mots et la difficulté intrinsèque des concepts abordés. Un nombre de caractères compris entre 60 et 66 par ligne est idéal pour la lisibilité et l’intelligibilité des textes. On peut aussi estimer la largeur des pavés à environ 40 fois la taille du caractère qui le compose (soit 640 pixels pour un corps de 16 pixels).

→ Lire Manifeste pour un interlignage minimum syndical pour les blogs !

Taille des caractères: La distance qui nous sépare du support de lecture est un élément essentiel qui est rarement évoqué pour expliquer la différence qu’il y a entre lire à l’écran et sur le papier. C’est pourtant cette distance qui a été retenue pour définir la taille par défaut des polices utilisées par les navigateurs : les 16 pixels que certains trouvent trop importants à l’écran ne sont finalement que l’équivalent des 12 points sur le papier, si l’on tient compte que l’œil n’est pas à la même distance dans les deux cas.

→ Lire 5 règles simples pour améliorer l’affichage de vos textes.

Nombre de fontes par page: Au-delà de trois fontes, il est généralement admis qu’une page web ou imprimée manque de… de quoi au juste ? De classes ? De lisibilité ? D’intelligibilité ? Bref, on ne sait pas trop. Mon conseil : utilisez autant de fontes que nécessaire, selon votre projet. Ne vous limitez pas à-priori. Expérimentez : il en restera toujours quelque chose ! Il sera toujours temps de faire le ménage dans un deuxième temps. Notez que c’est la même chose pour l’utilisation des couleurs.

→ Lire Des ensembles de polices cohérents pour le web et La typothèque idéale par Smashing Magazine

Rédaction web: La lecture à l’écran n’est pas si différente que sur le papier. Loin d’être des sœurs ennemies, ces deux lectures sont plutôt des sœurs jumelles dizygotes. En conséquence, il n’y au aucune raison pour que l’écriture pour le web soit si différente que celle destinée au papier. Si vous maitrisez l’enchainement des idées, la grammaire et l’orthographe, votre prose sera lisible sur tout les supports !

→ Lire Bien rédiger [ pour le web ] [ tout court ]

Justification des textes: L’alignement des textes au «fer à gauche» garantit un espacement constant entre les mots, ce qui améliore la lisibilité. Les textes justifiés offrent quant à eux l’avantage de produire des marges régulières à droite et à gauche, donnant au bloc de texte la forme d’un rectangle très net. HTML n’offre aucun mécanisme pour gérer les césures (je ne parle même pas des veuves et les orphelines.) ce qui entraine souvent des pavés de texte plein de trous (lézardes)…

→ Pour y remédier, jetez un œil sur Hyphenator — Gérer les césures avec Javascript.

Sortez du cadre !

Entre les idées toutes faites et les idées reçues, il reste de la place pour exprimer sa créativité : mélangez les polices de caractères et les couleurs, osez les structures de phrases alambiquées et l’imparfait du subjonctif (juste ce qu’il faut, hein ?). Jouez avec le sens de lecture pour maintenir l’attention de vos lecteurs et sortez du cadre (attention à la tête). Bref, soyez vous-même. Enfin, là, demandez quand même autour de vous, si c’est judicieux :-D

A suivre…

Linkographie

La lecture facile à l’écran,
De la typographie pour le web,
Confort de lecture : l’écart entre l’écran et le papier se réduit,
La macrotypographie de la page Web,
La typographie comme outil de design,
The 100% Easy-2-Read Standard,
How Users Read on the Web et iPad and Kindle Reading Speeds,
Stanford Poynter Project (Etude Eyes-tracking sur 67 personnes [en]).

Articles sur le même sujet

Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

Bruno Bichet — Fri, 19 Nov 2010 10:55:37 +0000

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière.

← Précédemment dans css 4 design…

Avec les blancs tournants, la gouttière est un élément essentiel qui participe à l’équilibre d’une mise en page en colonnes. Elle fait office de contre-poinçon, de contre-forme pour le contenu, et facilite la lecture et la recherche d’information, en plus de donner du rythme. C’est pourquoi, il me semble important que la largeur de cette gouttière ne soit pas simplement le modulo des calculs savants qui ont servis à déterminer le nombre et la largeur des colonnes.

J’ai donc choisi d’associer la largeur de la gouttière à la hauteur de l’interligne et à la largeur d’une colonne de base pour obtenir une grille composée de carrés de 21 x 21 pixels (mais on peut choisir un autre interlignage sous réserve qu’il corresponde aux critères de lisibilité selon la taille des caractères). Ces modules serviront de matrice pour déterminer toute une multitude de colonnages. Dans l’article cité plus haut, j’obtient pas moins de 13 grilles différentes permettant des regroupements de colonnes divers et variés.

Mise en page pour mobiles

Le Web est multiple et son accès s’effectue dans des conditions qui échappent aux concepteurs de sites. Le Web mobile a le vent en poupe et cela n’est pas prêt de s’arrêter. Voici donc une adaptation de ma grille modulaire pour ces nouveaux périphériques dont la particularité est d’avoir des petits écrans.

Plusieurs exemples de grilles pour les formats les plus courants en matière de périphérique mobile ou tactile.

Pour les besoins de l’exemple, j’ai choisi un interlignage de 20 pixels qui donne des comptes ronds vu que les résolutions sont des multiples de 10. Au cas où, voici les étapes à suivre dans Illustrator :

Créer un document au format 320 x480,
Faites glissez l’angle supérieur droit situé à l’intersection des règles (Ctrl + R) verticales et horizontales jusqu’au bord supérieur gauche du document pour définir les coordonnées x et y le cas échéant,
Sélectionnez l’Outil Trait (T), cliquez et précisez la longueur (320 px),
Ajustez le placement du trait aux coordonnées x : 0 px et y : 0 px,
Choisisez une couleur de contour (#cccccc) et une épaisseur (0.5 pt),
Copiez ce trait vers le bas : Ctrl + Maj + M (Horizontale : 0, Verticale : -20 px, Distance : 20 px et Angle : -90) et cliquez sur Copier,
Dupliquez-le avec Ctrl + D autant de fois que nécessaire.

Voici une grille vite fait bien faite pour l’iPhone. Cliquez sur l’image pour voir l’animation ;)

Pour les colonnes, les étapes ressemblent à la duplication des colonnes, à ceci près qu’il faut choisir l’Outil Rectangle (M) et spécifier une largeur de 20 pixels et une hauteur de 480 pixels. Dupliquez cette première colonne 7 fois, sélectionnez-les toutes et déplacez-les de 10 pixels vers la droite de manière à laisser des marges correctes de part et d’autre. Choisissez les couleurs qui vous conviennent et voilà !

Le bonheur est dans la gouttière

La largeur de la gouttière est donc un bon point de départ pour créer un gabarit de mise en page pour le Web. Ce qui m’amène à faire une proposition simple : plus que la gouttière ou tout autre élément, c’est la largeur totale de l’empagement qui doit servir de variable d’ajustement.

Articles sur le même sujet

Calculer une grille de mise en page « typo » avec le nombre d’Or

Bruno Bichet — Thu, 18 Nov 2010 12:59:37 +0000

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé).

Pour déterminer le pas d’une grille de mise en page pour le Web, on recherche souvent le meilleur rapport entre une largeur optimale (entre 900 et 1 000 pixels) et un nombre de colonnes divisible par deux, par trois et/ou par quatre. Les formats composés de 12 ou 24 colonnes répondent à ces critères (ce sont également des nombres hautement composés). On trouve aussi des grilles en 16 colonnes (nombre pratique). D’une manière générale, on privilégie les formats qui permettent des regroupements de colonnes variés.

Pour faire entrer ces colonnes dans une largeur donnée, on utilise la gouttière, l’espace séparant les colonnes, comme variable d’ajustement avec des valeurs allant de 10 à 30 pixels. Oui, vous avez bien lu : la gouttière, cet élément fondamental pour la respiration de toute grille de mise en page, n’est souvent que le rebut de calculs fastidieux !

Un gabarit de page pour l’imprimé

Pour définir une maquette de magazine destinée à l’impression, nous pouvons partir de la plus petite taille de caractère repérée dans les contenus (notes de bas de page, légendes, etc.) et augmenter la taille des textes en fonction des différents niveaux (notez que l’on peut aussi jouer sur la graisse, la couleur, le contraste, la casse ou un changement de fonte) :

Notes de bas de page : 8 pt
Légendes des photos : 10 pt
Corps du texte : 12 pt
Intertitres : 14 pt
Rubriques : 18 pt
Titres de Chapitre : 21 pt
Titre de l’ouvrage : 48 pt

En fonction du style et du public visé par la publication, nous déterminerons ensuite l’empagement à l’aide de tracés régulateurs pour obtenir des blancs tournants (les marges, pour faire simple), puis, pour chaque niveau, nous regarderons le nombre de caractères optimum qui nous donnera la largeur des colonnes, une des clés de la lisibilité et du confort de lecture.

Reste à voir combien de colonnes entreront dans le format dont nous disposons. Dans la plupart des publications, les marges servent de variables d’ajustement ; dans les ouvrages de luxe, c’est le format de l’ouvrage qui peut évoluer pour préserver des blancs tournants généreux.

Une maquette pour le Web

J’ai cherché la meilleure approche pour concevoir une grille modulaire sans trop me soucier ni du nombre de colonnes ni de la largeur totale de l’empagement, dans les limites d’une résolution d’écran de 1 024 pixels de large.

Une grille de mise en page vraiment modulaire à laquelle ce GIF animé ne rend pas justice !

La pêche à l’interligne

Et si la seule constante indépassable n’était finalement rien d’autre que l’interlignage ? En effet, s’il y a bien une chose d’un peu scientifique dans le processus de lecture, c’est qu’un interlignage possédant un ratio de 1,5 à 1,6 par rapport à une taille de caractère comprise entre 12 et 16 pixels, possède un potentiel de lisibilité en béton.

Après quelques essais, une valeur de 21 pixels pour l’interlignage s’est imposée. Ce chiffre correspond à la fois au produit du nombre d’Or typographique par un corps de texte de 14 pixels (1,5 x 14 = 21) et au produit du nombre d’Or tout court par un corps de texte composé en 13 pixels (1,618 x 13 = 21,034), ce qui permet de faire face à la plupart des situations. Un corps de texte en dessous des 13 pixels n’est de toute manière pas très raisonnable !

Les colonnes, les colonnes !

Il suffit d’utiliser cette valeur pour la gouttière et d’en faire aussi la largeur des colonnes pour obtenir une grille composée uniquement de modules de 21 pixels de large. C’est donc la largeur totale qui devient la variable d’ajustement à la place de la gouttière, permettant à cette dernière d’être en harmonie avec l’interlignage et un regroupement plusieurs colonnes comme 42px + 21px ou 63px + 21px et ainsi de suite.

Ce mode de calcul autorise l’affichage de 48 colonnes totalisant 987 pixels (48 x 21) – 21 qui se centrent parfaitement dans un écran de 1024 pixels, ce qui est bien pratique. Ces 48 colonnes sont divisibles par 2, 3 ou 4 autorisant de multiples regroupements pour obtenir pas moins de 13 combinaisons : 24, 21, 18, 16, 14, 12, 9, 8, 7, 6, 4, 3 ou 2 colonnes. A noter que le nombre 48 fait partie des nombres hautement composés, comme 12 et 24.

On peut aussi retrancher une ou plusieurs colonnes de chaque côté pour obtenir une largeur réduite : 22 colonnes pour une largeur de 903 pixels (ok, 22 ne se divise bien que par 2, mais n’oublions pas que les mises en page asymétriques en ont sous le talon aiguille !) ; 20 colonnes pour une largeur de 819 pixels ; ou encore 18 colonnes pour 735 pixels au cas où vous auriez besoin de concevoir pour une résolution en 800 x 600.

Adaptez, il en restera toujours quelque chose

Si vous trouvez que les valeurs proposées sont trop contraignantes, n’hésitez pas à partir sur une base de 20, 18 ou même 16 pixels pour votre gouttière et votre interlignage, sachant que les valeurs (taille du caractère / interligne) 12/20, 13/20, 14/20 mais aussi 12/18,13/18 ou encore 11/16 permettent une lisibilité à l’épreuve des «séniors» pour peu que vous soyez attentifs aux contrastes ;)

Ne vous faites pas griller

Les grilles sont une aide précieuse pour élaborer un design cohérent et ne sont pas très difficiles à mettre en place pour peu que l’on prenne le temps de se poser des questions sur leur rôle. Le protocole HTTP est sans état : c’est la persistance des éléments récurrents des pages que vous liez entre elles qui crée la notion de site Web. Pour autant, il est important de ne pas se laisser enfermer dans une grille : c’est vous qui devez la mettre «au pas» et non le contraire. En d’autres termes, ne vous demandez pas ce que vous pouvez faire pour votre grille, mais demandez-vous plutôt ce qu’elle peut faire pour vous !

Articles en relation avec les grilles

Brouillons en cours sur le même sujet

Adapter votre grille aux agents utilisateurs avec les « Media Queries »

Articles sur le même sujet

Grille de mise en page, « zoning » et gabarit avec Adobe InDesign

Bruno Bichet — Thu, 28 Oct 2010 08:18:06 +0000

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet.

Préparer InDesign

Ouvrez Préférences (Ctrl + K) > Unités et incréments et modifiez les unités horizontales et verticales de la règle pour passer des millimètres (mm) aux points (pt) (à la résolution de 72 ppp, un point équivaut à un pixel). Reste à déterminer la largeur du plan de travail : dans les exemples qui suivent, j’ai choisi un design d’une largeur de 942 pixels pour 16 colonnes avec une gouttière de 18 pixels, mais n’hésitez pas à utiliser les valeurs de votre framework CSS.

Créer les colonnes

Avec InDesign, quelques réglages suffisent pour mettre rapidement en place une grille magnétique.

Boite de dialogue Nouveau document InDesign.

Selon votre framework CSS, choisissez le nombre de colonnes et la largeur de la gouttières qui les séparent. Pour finir, mettez les marges à zéro.

Notez qu’il est possible de créer un document à la taille du Viewport (ex. 1024). Pour obtenir un document hors marges de 942 pixels, utilisez la formule suivante : largeur du Viewport moins celle du framework et divisez le résultat par deux pour obtenir la valeur des marges gauche et droite. Exemple : (1 024 – 942) / 2 = 41.

N’oubliez pas de cliquer sur Enregistrement prédéfini… pour enregistrer votre plan de travail.

Modifier la la ligne de base

Pour affiner la grille il est peut s’avérer utile de matérialiser la ligne de base en fonction de l’interlignage que vous avez choisi pour le corps du texte. J’ai opté pour un corps de 13 pixels avec un coefficient multiplicateur de 1,6 (pour tutoyer le nombre d’Or) ce qui donne un interlignage de 21 pixels (en arrondissant à l’entier supérieur).

Pour cela, je vais dans les préférences du logiciel Ctrl + K > Grilles et je règle le pas sur 21 pt. J’en profite également pour augmenter la valeur pour améliorer le magnétisme des repères pour faciliter le placement des blocs.

Il est toujours utile de visualiser la ligne de base de votre document.

Modifiez la grille de la ligne de base dans Préférences > Grilles

Gabarits de page avec InDesign

Si InDesign facilite la mise en place d’un système de mise en page en colonnes pour placer vos différents modules, il permet aussi de créer des gabarits réutilisables et c’est assez cool.

Profitez des modèles de pages modifiables d’InDesign !

La fenêtre Pages d'InDesign pour créer et appliquer un gabarit à une page.

A partir d’un zoning comprenant le header, le menu principal et le footer qui se répètent sur toute les pages comme autant de fichiers inclus, il est possible de créer plusieurs variantes d’une page selon les différents modèles de votre projet Web.

(In)Design Web ?

Après quelques tests rapides, je trouve qu’InDesign est une aide précieuse pour mettre au net les croquis et commencer le zoning d’un site. Pourquoi ne pas s’en servir pour faire une maquette plus fouillée en assemblant des éléments en provenance de Photoshop ou d’Illustrator avant d’intégrer le tout dans le navigateur ?

Bref, InDesign semble l’outil idéal pour se rappeler que dans Webdesign il y a aussi «design» avec tout ce que cela comporte de travail sur les blancs tournants, les volumes et la typographie.

Liens complémentaires

Résolution, pixels, points, dpi : un casse-tête insoluble ?
Création de gabarits dans InDesign
Apprendre InDesign : psill.net et milic.com

Articles sur le même sujet

Manifeste pour un interlignage minimum syndical pour les blogs !

Bruno Bichet — Thu, 28 Aug 2008 04:19:50 +0000

Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police. Ce qui est dramatiquement insuffisant au regard de la faible résolution du texte à l’écran, alors qu’il suffit d’ajouter une ligne de déclaration CSS à la balise html ou body pour permettre à vos lecteurs de passer du déchiffrage laborieux à la lecture pleine et entière. Essayez, vous serez surpris de voir à quel point vos pages web auront gagné en lisibilité.

Modifier l’interlignage par défaut

Les valeurs à ajouter à la balise body ou html dépendent de la configuration de votre feuille de style. Voici trois exemple à tester pour obtenir un interlignage de 1,5 fois la taille de caractère :

body {
    line-height: 1.5;
}

(Plus d’information sur l’absence d’unité dans cette partie de l’article 5 Reset CSS à la loupe.)

body {
    line-height: 1.5em;
}

body {
    line-height: 150%;
}

Une image vaut mille mots ?

Si vous avez des difficultés à vous représenter l’intérêt d’augmenter cet interlignage, voici deux captures d’écran significatives dans la mesure où elles ont été réalisées sur le site http://www.accessiweb.org/ dont le motto est La nature du web est son universalité. Il doit être accessible à toutes les personnes handicapées.

Il me semble que l’interlignage fait beaucoup pour la lisibilité d’une page web, et la lisibilité, pour une personne valide ou en situation de handicap, c’est le début de l’accessibilité. Et ça ne coûte vraiment pas cher de bien interligner !

Avec l’interligne par défaut (ajouté à la longueur des lignes), le site Accessiweb manque de lisibilité

Le site AccessiWeb avec les réglages par défaut.

Une fois la déclaration line-height: 1.6; ajouté au body, mes yeux me disent «merci»…

5 règles pour faire un beau design web

l’accessibilité du web passe aussi par un traitement typographique global au niveau de la page et l’interlignage n’est malheureusement pas le seul paramètre oublié. Pour se rafraichir la mémoire, révisons 5 règles pour faire de belles mise en pages.

Envoyons paitre les mauvais interligneurs ;-)