Lisibilité de la mise en page typographique

Pour parler de la typographie, il faut en connaître l’anatomie. La lisibilité des signes dépend des habitudes de lectures, et d’un apprentissage qui favorise certaines graphies au détriment d’autres (ex. alphabet romain vs alphabet gothique). La lisibilité typographique est une affaire de dénotation : les lettres s – p – e – c – t – a – c – l – e , lorsqu’elles sont agencées de cette manière, signifient en français spectacle. Telle graphie renvoie à telle occurrence.

Concernant les caractères, les mots et les lignes

Une bonne hauteur d’x par rapport à la force de corps des capitales rendra les caractères bas de casse plus facile à distinguer.
De bons bassins bien larges et une chasse suffisamment généreuse aideront le lecteur à reconnaître les mots globalement d’après leur forme plutôt que lettre par lettre.

Peu de contraste entre les pleins et les déliés, les traits ayant tendance à disparaître lors des réductions. À cet égard des études ont démontré que la proportion optimale de la graisse du trait par rapport à la hauteur d’x est de 18%.

Le dessin même du caractère aidera à mieux distinguer une lettre d’une autre, par exemple le dessin du «a» à deux étages par rapport à l’autre plus rond. Le «a» favorise une meilleure lecture. De même, le «g» se distingue mieux du «g».

La partie supérieure et la partie droite des lettres sont plus significatives pour le lecteur que la partie inférieure et la partie gauche.

Avec ou sans empattement

Les caractères sérifs, ou avec empattements, permettent une meilleure reconnaissance des lettres pour un texte imprimé.
Les caractères sérifs tiennent les mots mieux soudés ensemble et guident l’œil le long de chaque ligne.
Les empattements aideront à réunir les lettres adjacentes pour former les mots, et les mots adjacents pour former une ligne.
Les sérifs permettront de mieux distinguer le chiffre «1» du «l» minuscule et du «I» majuscule. Les empattements ne seront pas exagérément longs, minces ou épais.
Malgré toutes les qualités de la typographie avec empattements, le texte courant qui doit être lu à l’écran est mieux servi par une typographie sans empattement. La faible résolution de l’écran rend difficile la représentation des lettres avec empattements qui ont beaucoup de petits détails et ainsi, le texte courant avec empattements est moins lisible que le texte courant sans empattement.
Dans la typographie écran, il vaut mieux réserver les caractères sérifs pour la composition des titres en gros caractères (16-24 pts et plus).

La force de corps

Le choix d’un caractère trop grand fait que l’œil s’arrête sur chaque mot pour le déchiffrer.
Relativement à la lecture à l’écran, une force de corps d’un minimum de dix points est recommandé pour le texte courant.
L’environnement PC présente les fontes plus grosses que l’environnement Macintosh. Cela peut causer des problèmes lors de la composition des pages web. Il sera préférable, si le logiciel le permet, de composer la force de corps en pixels plutôt qu’en points. Cette technique amoindrira les différences de force de corps, quelle que soit la plate-forme.
LE TEXTE COMPOSÉ TOUT EN MAJUSCULES OU EN PETITES CAPITALES SE LIT MOINS BIEN QUE LE TEXTE COMPOSÉ EN CAPITALES ET BAS DE CASSE. Cela s’explique par le fait que la minuscule avec ses ascendants et ses descendants forme un contour plus distinct que celui de la capitale qui ne présente qu’un rectangle.
L’usage de la majuscule prend plus de place et de ce fait, ralentit la lecture.
Le «gras» donnera sûrement de l’emphase à un texte, mais ne doit pas être utilisé dans le texte courant. La densité du noir tend à agir sur la persistance rétinienne et produit des brillances entre les lignes.
L’italique se lit moins bien que le caractère romain, surtout dans les caractères générés électroniquement qui sont souvent des versions inclinées du caractère romain, plutôt qu’une version dessinée à cette fin.
L’italique est le style le moins lisible sur un écran. La faible résolution de l’écran crée un «effet d’escalier» qui rend les lettres très difficiles à lire. Il faut éviter d’utiliser l’italique pour composer un texte qui sera lu à l’écran. Il sera préférable d’utiliser le gras ou le changement de couleur pour créer une différence.
Les caractères condensés sont à éviter pour la composition d’un texte courant qui doit être lu à l’écran. Les bassins tendent à se remplir et les lettres sont moins différentes entre elles, ce qui les rend moins lisibles.
Le condensé sera acceptable pour la typographie écran pour la composition des titres en gros caractères (16-24 pts et plus).
Les caractères étendus (extended) réduisent le nombre de mots pouvant être lus à chaque fixation de l’œil.
Le souligné est à éviter sauf pour signifier au lecteur la présence d’un lien hypertexte cliquable.
Il faut choisir un facteur suffisant d’approche de groupe, pour les détacher les unes des autres. Lorsqu’elles se touchent, la lisibilité se trouve sérieusement compromise. Trop d’espace entre les lettres nuit au lecteur lorsqu’il forme les mots.
Pour la typographie écran, l’approche de groupe pourra être légèrement augmentée, par rapport à la valeur programmée par défaut dans un logiciel, dans le but de faciliter la lisibilité.
L’espacement optimal entre les mots changera en fonction de l’espacement entre les lettres à l’intérieur du mot et l’interligne. Il sera naturellement plus grand que les espaces entre les lettres à l’intérieur du mot, tout en ne nuisant pas à la course de l’œil sur la ligne (ne pas être trop grand).

la longeur des lignes

Une ligne
trop courtebrise le mouvement de l’œil
dans sa vision
périphérique.
Elle fatigue l’œil
en lui imposant
un mouvement
constant.
Une ligne trop longue ne permettra pas un retour aisé au début de la ligne suivante. Le lecteur sautera alors une ligne, ou il reviendra sur la même.
À l’écran, une ligne confortable aura en moyenne entre quarante et cinquante caractères, incluant les espaces et les signes de ponctuation.
Au-dessus de cinquante caractères, le lecteur devra faire un effort de lecture.

L’alignement

L’alignement à gauche produit un effet d’ouverture, un sentiment informel et donne de la lumière à la page. Il est considéré comme le plus facile à lire.
L’alignement à droite est vraiment informel et très difficile à lire sur plus de quelques lignes. Il demande beaucoup d’effort au lecteur.
L’alignement centré est formel, officiel (les invitations sont la plupart du temps centrées). Il faut éviter de centrer des lignes trop grandes parce qu’elles forcent le lecteur à trouver le début de chaque ligne et c’est plus fatigant.
L’alignement justifié assombrit la couleur typographique d’une page. Il faut être beaucoup plus attentif aux espaces entre les lettres et les mots lorsqu’on choisit l’alignement justifié. Plus la colonne est étroite plus on doit être attentif. Il en résulte une réduction esthétique et moins de lisibilité. L’alignement justifié est plus formel et rigide.

La typographie et son rapport avec le fond

Le texte noir sur fond blanc possède le meilleur facteur de lisibilité mais est sujet au phénomène d’irradiation. Les petites images lumineuses cherchent à déborder. Pour contrer cette tendance, il faudra prendre la précaution de choisir un caractère comportant un bassin très ouvert et de ne pas resserrer l’espace entre les lettres dans le mot. En général, les caractères sans sérif s’adapteront mieux aux renversements.
Pour les textes sur fond tramé, il faut veiller à ne pas utiliser une trame à grain trop gros. Encore ici, les «sans sérif» supportent mieux le mariage du fond tramé.
Pour les teintes et les couleurs, il faut rechercher les contrastes (70% minimum) entre le fond et le texte. Il faut éviter les tonalités semblables dans les combinaisons de couleurs, surtout le voisinage des complémentaires qui produit un effet particulièrement déplaisant.

L’interligne

L’interligne affecte la couleur typographique de la page et la lisibilité d’un bloc texte. La règle générale veut qu’on place un minimum de 20% plus d’espace que la force de corps entre les lignes. Le texte d’une force de corps de dix points aura ainsi un interligne de douze points.
Les lignes courtes nécessitent moins d’interligne.
Les lignes longues ont besoin de plus d’interligne.
La typographie sans sérif nécessite en général plus d’interligne que la typographie avec sérif.
Une famille typographique qui a une plus petite hauteur d’«x» a besoin d’avoir plus d’interligne.
Il faut faire très attention à la hauteur de certaines familles de lettres comme le Futura. Les jambages ascendants de la ligne inférieure peuvent toucher aux jambages descendants de la ligne supérieure, même avec un interligne.

L’espace entre les paragraphes

L’espacement entre les paragraphes permet au lecteur de facilement repérer le début du prochain paragraphe.
Le blanc créé par ces espaces produit une ouverture et de la lumière sur la page. Il augmente la lisibilité et repose l’œil. Un texte composé sans espace inter-paragraphes pour économiser de la place, comme dans la plupart des journaux, est beaucoup plus fatigant à lire.

Les huit lois de la lisibilité d’une page

L’œil du lecteur occidental est conditionné à explorer la page de haut en bas et de gauche à droite. Il est donc préférable de placer les titres principaux (titres de chapitres) en haut des pages et les sous-titres à gauche des pages.
L’œil est attiré par ce qui est visuellement fort et gros.
Le choix du lecteur est dirigé (par la personne qui fait la mise en page) au moyen des différentes grosseurs de corps du texte, de la couleur typographique, des contrastes. La perception de ces contrastes peut être influencée et modifiée par l’environnement, en particulier les espaces blancs.
Les capacités de décodage de l’œil et du cerveau, entre les différentes hiérarchies et dessins de fontes sur une page, sont limitées. Quand il y en a trop l’œil ne les différencie plus et accorde la même importance à l’ensemble. «La mise en page efficace est caractérisée par une économie de moyens.»
Si le lecteur recherche des informations dans un document, il le fait en priorité à la droite des pages de droite; s’il ne trouve pas ce qu’il cherche, il va à la gauche des pages de gauche. La meilleure connotation dans une page (ex: journal) est l’espace en haut à droite (positive); la moins bonne est en bas à gauche (négative).
Plus une illustration est grande, plus elle attire l’œil. Ce n’est pas le cas pour un bloc de texte.
Une illustration couleur attire plus l’œil qu’une illustration noir et blanc.
Les sept lois précédentes peuvent se combiner, se renforcer ou s’additionner mais, dans certains cas, une utilisation ingénieuse des contrastes peut atténuer ou annuler l’effet de ces lois. Par exemple, une petite photo en noir et blanc, centrée dans une page, attirerait davantage l’œil que neuf photos couleur dans la page voisine.

La grille

Comme les architectes qui conçoivent des plans et réalisent des charpentes, l’infographe utilise la grille, pour construire et organiser la page.
La grille aide à visualiser où nous devons placer les éléments sur la page; par la suite, elle organise l’espace de la page; elle détermine le nombre de colonnes, les marges, les gouttières, l’emplacement des titres, des textes et des photos. Elle permet de pré-définir la mise en page, de l’appliquer de page en page, et de garder l’uniformité du (ou des) document(s).
La grille nous permet de diviser les pages en sections plus petites, donc plus faciles à lire. Elle permet de visualiser la page et ses différentes parties. Elle aide le lecteur à se déplacer facilement d’un endroit à l’autre. Elle permet de diriger le lecteur à l’aide de repères visuels, vers où on désire qu’il aille.
La grille aide le concepteur à créer un rythme de mise en page. Lorsque le lecteur reconnaît ce rythme, cela lui facilite la compréhension du texte, car il peut prévoir la valeur ou l’importance d’un bloc de texte donné. Les colonnes ne doivent pas être nécessairement de la même largeur.

Les proportions

On doit choisir la taille des éléments selon leur importance et leur relation avec le document. De mauvaises proportions vont distraire le lecteur et moins bien communiquer le message.

On doit choisir des éléments qui peuvent aider le lecteur à comprendre le message, des éléments davantage communicatifs que décoratifs.

La direction et le rythme

En respectant le rythme, on optimise la communication. Le lecteur doit pouvoir naviguer aisément dans le document d’une manière logique.
Nous pouvons, à l’aide d’éléments judicieusement choisis et placés, guider le lecteur à travers la page, le conduire où nous préférons qu’il se rende. Ces éléments peuvent aussi contribuer à créer un rythme de lecture.

L’uniformité et l’homogénéité

Il faut choisir des éléments qui créent un document homogène. Utiliser des marges, des styles typographiques, des indentions, des colonnes… identique pour un même document ou une série de documents. Une identité est ainsi créée, elle facilite la lecture et rend le document plus facilement reconnaissable.

Le contraste

Le contraste est la base de la lecture (contraste écran / typographie). Trop semblable cela devient ennuyeux pour le lecteur et diminue la communication. Il ne faut pas non plus que le contraste soit trop grand pour ne pas briser l’uniformité.
Nous utilisons des contrastes de couleurs, de graisses, de force de corps, de styles, pour déterminer l’importance d’un élément.

La couleur typographique

La couleur typographique est la sensation visuelle de gris que donne un bloc typographique lorsque l’on se plisse les yeux. C’est le résultat de la juxtaposition des lettres et des blancs (interlettres, intermots et interlignes) qui contrastent avec la couleur de fond qui entoure le texte (marges).
La couleur typographique varie en fonction de plusieurs facteurs, le choix typographique, la graisse, l’étroitesse ou la largeur des lettres, l’interligne.
Pour indiquer les hiérarchies informatives ou refléter le sens du texte, on peut se servir de la couleur typographique.
Le lecteur décode moins bien plusieurs variétés typographiques que les contrastes entre les blocs de couleurs typographiques différentes.

La retenue

Il est facile, et c’est encore plus vrai depuis l’avènement du micro-ordinateur, d’en faire beaucoup trop (typographies différentes, déformations. etc.).
Gardons toujours à l’esprit la clarté, la simplicité, l’organisation et la structure. Nos choix doivent supporter le message plutôt que chercher à distraire le lecteur.

Des outils sur le Design!