Une des principales erreurs commises dans l’apprentissage de la typographie et de ses règles est de se concentrer essentiellement sur les polices de caractère elles-mêmes, sans apprendre les fondamentaux de l’art de la lettre.
Appréhender les polices (pour leurs effets apparents) sans en saisir le rôle, leur place dans l’architecture globale d’une présentation, sans mesurer leurs forces ni faiblesses, c’est risquer de provoquer des erreurs de goût, de style et de compréhension dans le message à délivrer…
Les polices de caractère sont évidemment importantes et font partie des propriétés essentielles de la typographie. Il existe aujourd’hui plus de 3 000 polices différentes sans compter les familles liées à la langue, comme le coréen, l’hébreu ou l’arabe.
Même si dans la jungle des polices, vous trouvez certaines très distinguées, belles ou originales, il se peut qu’elles ne conviennent pas pour autant à votre message, site ou création graphique. Car chaque police raconte une histoire propre et il est important d’en saisir l’essence. Cela suppose d’en connaître ses origines, son auteur, l’époque de sa création et d’étudier un peu plus profondément les caractères qui la composent.
Apprendre d’abord les principes fondamentaux de la typographie vous permettra d’acquérir de bons réflexes dans le choix de vos polices. Cela sous-entend d’avoir bien en tête l’objectif même de votre présentation (site ou logo…).
Quelle est le but de la typographie ?
Par le passé, elle définissait surtout le procédé de composition et d’impression sur des formes en relief (gravures, clichés…) mais aujourd’hui, son acception vise toute conception graphique (d’un ouvrage, d’une publication) en choisissant les caractères, les corps, la présentation, en déterminant la dimension du texte, les illustrations (et leur position dans la page).
Doucement, nous sommes passés d’une définition technique à une véritable discipline artistique de la typographie : assemblage, mise-en-page, composition… dont le savoir-faire va donner cette solidité à l’ensemble et créer ainsi une réelle harmonie.
Le premier objectif est de concilier force, esthétisme et solidité. Le but est de permettre au texte de communiquer le message souhaité, à permettre aux lecteurs de s’immerger dans le contenu.
La typographie est la manière dont est composé un texte à travers la qualité des caractères et de la mise en page.
Les choix qui sont alors faits pour composer le texte vont transmettre certaines émotions, mais seulement à une autre condition : que le texte soit facile à lire.
Comment composer un texte facile à lire ?
En ce qui concerne la conception sur le web (et qui reste valable bien évidemment pour l’imprimé), il existe trois propriétés qui rendent le texte plus lisible :
- la taille de la police – propriété CSS {font-size}
- l’interligne – propriété CSS {line-height}
- la longueur de votre texte – colonne et propriété CSS {width}
Nous pouvons commencer le processus de composition dans l’ordre suivant : en déclarant la taille de police de caractères, suivie par la longueur du texte puis de l’interligne. Cela permet déjà de se rendre compte du « gris » ainsi crée.
La taille de la police
Le premier facteur est la police de caractère elle-même : certaines fontes semblent beaucoup plus grandes que d’autres, alors qu’elles ont le même corps de texte. N’hésitez-pas à poser quelques polices standard dans un fichier HTML simple. Dans l’exemple ci-dessous, la taille est celle du navigateur laissée par défaut à 16px et pourtant Arial, Cochin, Helvetica, Courier et Times ne semblent pas « avoir la même taille » !
Le second facteur est la distance entre votre écran et vos yeux. Tester une police de caractère dans certaines conditions influencent évidemment la perception que nous aurons du texte. N’hésitez pas à jouer avec votre clavier (Ctlr + ou – et Cmd + ou – pour Mac) pour réduire et augmenter le texte à l’écran.
Alors comment savoir si la taille de police de caractères est trop grande ou trop petite ?
- Votre taille de police de caractères est trop petite si : Vous devez plisser les yeux ou bien vous devez faire un zoom pour lire.
- Votre taille de police de caractères est trop grande si vous fixez votre attention sur les lettres au lieu de lire le contenu, vous ne pouvez lire qu’un à trois mots à la fois ou encore lorsque vous butez en essayant de lire rapidement.
Le colonnage (la longueur de ligne)
Une autre propriété à vérifier dans la composition de votre texte est la mesure de vos colonnes, elle se réfère au nombre de caractères sur une ligne.
Idéalement, la mesure idéale d’une colonne ou bloc se situe entre 45 à 75 caractères. Un caractère équivalent à 0.5em, nous pouvons déclarer cette propriété en CSS et définir une largeur entre 22.5em à 37.5em.
Plus la ligne est longue, plus vous perdez en lisibilité de part la lecture plus cadencée de l’œil qui devra parcourir plus de caractères, l’oeil étant habitué à deviner un ensemble de mots créant un ensemble de phrases donc de concept.
Comment savoir si la colonne de texte est bien calibrée ?
- Votre colonne est trop courte si : vous êtes agacés parce que le texte casse alors que vous avez développé une vitesse de lecture confortable. Vos yeux sont fatigués de rebondir de gauche à droite rapidement.
- La mesure est trop longue si vous avez dû tourner votre tête en lisant le texte ou vous perdez votre concentration à mi-chemin en lisant une ligne le pas final est de mettre votre interligne.
L’interligne
L’interligne représente l’espace qui se situe entre les lignes de votre texte. C’est la propriété line-height qui est utilisée en CSS.
L’interligne idéal se situe entre 1.2 à 1.6 selon la police de caractères, la taille de police de caractères et la longueur de colonne utilisée.
Comment savoir si l’interligne est trop grand ou trop étroit ?
- Votre interligne est trop étroit si le texte semble trop dense et comme serré.
- L’interligne est trop grand si les blancs entre les mots vous distraient du contenu.
Se perfectionner dans la composition de nos publications…
La première étape que nous venons d’appréhender est l’entraînement de son regard sur l’ensemble du contenu.
En presse et imprimerie, on parle du « gris typographique », il s’agit d’une perception fine du texte que nous sommes en train de parcourir : plus le paragraphe semble noir, plus l’interligne est serré et la densité des mots forte, a contrario, plus la perception d’un gris clair est ressentie, plus il y a d’aération et de blancs.
Soumettez vos textes et propositions à vos proches et observez comment ils parcourent votre site Web ou vos pages. Procéder ainsi vous permettra de ne pas uniquement vous baser sur votre propre perception.
Plisser les yeux sur les articles et titres de journaux quotidiens et interrogez-vous sur ce qui vous « sautent » aux yeux ou sur ce qui, au contraire, vous semble trop petit ou serré. Apprendre à regarder.
Petite conclusion…
Apprendre à voir les nuances entre les polices de même famille, à différencier les lettres, mesurer le rythme entre les lignes, percevoir les blancs, les espaces… cela prend quelques années d’entrainement mais cette observation est inévitable pour apprendre véritablement la composition en typographie.
Rechercher une bonne typographie dans un texte, c’est résoudre une équation harmonieuse entre le corps de la police, le rythme vertical des lignes et la répartition du nombre de caractères sur une colonne. Il faudra rechercher un certain esthétisme et jouer quelque fois avec la hauteur des lettres elles-mêmes qui deviennent alors une véritable matière première à modeler. Avec savoir-faire, bien sûr, car la lettre ne se laisse pas si facilement manipuler.
