Une histoire de polices

Choisir une police pour le web, c’est tout un cheminement. Du choix de la bonne typo, en passant par son intégration en CSS ou le réglage de l’interligne et des marges. Beaucoup de question se posent au webdesigner. Voici de bonnes pistes pour y répondre.

Un peu d’histoire

Lorsque Gutemberg invente le caractère d’imprimerie en 1450… Hey, ne partez pas !!
Ok, alors jusqu’à récemment, un site web avait deux choix en ce qui concerne sa typographie :

  • utiliser les polices de caractères les plus répandues pour assurer au mieux le rendu sur la plupart des terminaux,
  • utiliser des images au lieu du texte pour avoir une typographie personnalisée et un rendu fidèle pour les utilisateurs.

Vous l’aurez compris, chaque solution avait ses inconvénients : peu de choix de polices pour la première, problème de référencement et temps de chargement pour la seconde.

Cependant, aujourd’hui, avec l’émergence et la prise en charge des spécifications CSS3 par la majorité des navigateurs, il devient possible d’intégrer des polices variées, tout en respectant les standards du web, et en garantissant un rendu fiable sur les différents terminaux et navigateurs.

Choisir sa police

Pensez aux différents éléments rencontrés et les couvrir : citations, listes, mise en emphase, tableau, légendes d’images etc. On créera ensuite un ficher html avec toutes les variantes de texte et les éléments. La police utilisée devrait pouvoir couvrir toutes les situations.

Temps et complexité de lecture

En moyenne, un adulte lit entre 200 et 250 mots par minutes (les études récentes estiment que la lecture est légèrement plus lente sur écran ±6%). Quoi qu’il en soit, de nombreux facteurs peuvent influer sur ce chiffre : complexité du texte, langue utilisée etc. On peut néanmoins estimer le temps de lecture d’un texte en divisant son nombre de mots par 250.

Plusieurs tests existent pour évaluer la complexité d’un texte donné :

  • Automated readability index (ARI) qui se concentre sur le nombre de signes, mots et phrases. Son calcul nécessite peu de ressources et il convient donc bien à des estimation en temps réel,
  • Flesch–Kincaid readability tests, consistent en plusieurs tests permettant d’évaluer la difficulté de lecture et de compréhension d’un texte. Flesch Reading Ease fourni une note absolue sur la facilité de lecture (plus la note est haute, plus le texte est facile), tandis que Flesch–Kincaid Grade Level donne l’équivalent du niveau de classe américain nécessaire à la compréhension. Ces tests nécessite plus de puissance de calcul car ils prennent en compte le nombre de syllabes.

Plus le temps de lecture est long, plus il convient d’aérer le texte, de veiller à conserver une longueur de ligne pas trop importante (entre 60 et 85 caractères par ligne (ponctuation et espaces compris)).

Polices et fontes

Des études ont montré que les lecteurs lisent plus vite un texte lorsque la police d’écriture leur est familière. En revanche, contrairement à ce qu’on entend souvent, il n’y a pas de différence significative entre le serif et le sans-serif. Les polices à empâtement donneront un aspect plus formel, chic, traditionnel ou qui fait autorité. À l’inverse, une police sans empâtement constituera une ambiance plus informelle, détendue, moderne.

Pour la combinaison de différentes polices, une certaine cohérence s’impose si l’on veut éviter le désastre. On veillera donc à avoir des polices avec une hauteur de x semblable. Cependant, il est plus facile de ne pas faire de faux-pas en utilisant des polices appartenant à la même famille (pour le gras, l’italique etc.).

Si l’on utilise différentes polices, il est toujours conseillé d’utiliser des polices du même créateur (elles partageront ainsi le même ADN). À minima, l’utilisations de polices provenant d’une même fonderie est recommandé dans la mesure où elles seront compatibles. Enfin, si certaines polices conviennent pour de courts titres, elles décourageront à coup sur vos lecteurs si elles sont utilisées pour de longs paragraphes de texte.

Où les trouver ?

Il y a sur le web de nombreuses ressources pour trouver des polices. Une des plus connues est Dafont. Ce site permet de télécharger des polices que l’on installe ensuite sur son ordinateur. La police est ensuite utilisable avec tous les logiciels (Photoshop, Illustrator… mais aussi Word etc).

Plus récemment se sont développés des services spécialisés dans la fourniture de polices pour le web. Ainsi, il suffit de copier un petit bout de code dans vos CSS et la ou les polices choisies deviennent immédiatement et automatiquement disponibles sur vos sites. Parmi les plus connus :

Toutes les polices ne n’ont pas forcement exactement le même rendu sur tous les systèmes et navigateurs. On a parfois droit à des surprises. En effet, les utilisateurs de Windows profitent par exemple de ClearType, lequel permet une optimisation de rendu.

Cependant, l’optimisation des polices pour le web est un processus couteux en temps, et toutes les polices n’en bénéficient donc pas encore. Il est donc recommandé de tester dans les différents navigateurs et systèmes d’exploitations. LucasFonts est une fonderie allemande qui porte une attention toute particulière à l’optimisation de ses polices pour le rendu.

Adapter sa police

La police et le design sont interdépendant. On ne définit pas l’un sans l’autre. Il y a de multiples variables à définir en ce qui concerne la police : taille de la police et des différents niveaux de titres, longueur de ligne, justification, interligne, espacement entre les lettres, espacement entre les paragraphes… Nous allons voir ici les éléments les plus importants ainsi que quelques règles de base. Je vous invite aussi à lire mon article sur le webdesign ainsi que l’article sur le design appliqué au confort de lecture.

La justification pour le confort

differentes justifications

La justification, correspond à la longueur des lignes. Il peut aussi s’agir, comme sous Word, du fait que les lignes soient toutes de la même longueur. Cependant, vous l’aurez peut-être remarqué mais sur le web, la plupart de textes ne sont pas justifiés. C’est dû au fait que la justification automatique n’était pas du tout géré sur le web. Ensuite les CSS ont tenté d’y remédier, mais ce n’était pas la panacée. Ajoutez à cela des études qui démontrent qu’un texte justifié est moins lisible qu’un texte en drapeau et vous avez un web épuré de toute ligne justifiée. Cependant, le CSS3 apporte une réponse technique performante et facile à implémenter pour la justification du texte. Pour demander la jusitifcation d’un texte, il suffit d’appliquer justify à la propriété text-align, soit text-align:justify. En outre, la propriété text-justify permet d’affiner le calcul de l’interlignage. C’est à dire choisir si la distribution se fait juste entre les mots ou alors de manière homogène entre toutes les lettres et les mots (valeur newsletter). De nombreuses valeurs existent pour cette propriété, je vous laisse effectuer vos recherches.

Enfin, sachez qu’il existe un petit javascript qui gère automatiquement la césure dans pas mal de langues – dont le français – ça s’appelle hyphenator.js. Quoi qu’il en soit, sans le javascript, le CSS s’arrangera pour que la justification se fasse bien sans césure. Dans ce cas, le soin est donc laissé au navigateur de choisir la meilleur méthode de justification, ce qui correspond à text-justify:auto.

Revenons-en à notre longueur de ligne. Des lignes trop longues ou trop courtes peuvent être gênantes pour l’œil d’un lecteur. Trop long et le rythme de lecture est perturbé, trop court et c’est chiant, tout simplement. Des lignes très courtes sont acceptables uniquement pour une petite quantité de texte. Bon, ok, si y’a des étudiants dans le coin, ça sert aussi pour faire croire qu’on a plus écrit. Le prof à dit : « 10 pages, Time New en 12 ». Avec 6 mots par lignes, no problem Ms’ieur.

Pour calculer rapidement la justification adéquate, on peut utiliser la méthode de Robert Bringhurst. Elle consiste à multiplier la taille de la police par 30. Donc si votre corps de texte est en 14px, votre justification sera de 420px.

p{
  font-size: 14px;
  max-width: 420px;
}

L’interligne pour le rythme

differents interlignages

L’interlignage est l’espace entre les lignes qui ocuppe une place importante dans la lisibilité de votre texte. Une fois que vous avez fixé la taille de votre typo, il va falloir lui donner une taille d’interligne. Cette dernière rythmera votre texte.

Vous devrez tenir compte de plusieurs facteurs pour fixer votre interlignage :

  • La police (lisibilité…)
  • La taille de police
  • La graisse de la police
  • La casse
  • la justification

Plus la justification est longue, plus la taille d’interlignage se doit d’être importante. En règle général 140 à 160% de la taille de la police fonctionne bien. Ainsi, un texte de 14px aura un interlignage compris entre 18 et 20px.

p{
font-size :14px;
line-height : 1.43em; /* interligne de 20px*/
}

Note : il est préférable de fixer l’interligne en une valeur relative, comme les em ou un mutliple. De cette façon, lors du redimensionnement par un navigateur, vos lignes ne risquent pas de venir se chevaucher.

Les marges pour l’esthétique

differentes tailles de marges

Avant même de parler de fonctions sémantiques, qui n’est jamais arrivé sur un site avec cinq pages de texte sans intertitres ni paragraphes aérés ? En général vous êtes repartis avant même d’avoir lu la première ligne…

Maintenant que vous avez compris l’utilité des marges, parlons de leur fonction sémantique. Sous ce grand mot se cache un truc tout bête. Des paragraphes biens distincts avec des espaces entre eux, la même chose pour les titre, ça permet de se faire une idée du contenu en un coup d’œil. Donc d’appréhender le texte avant même sa lecture et de savoir où on en est pendant sa lecture. On peut tester et voir ce que ça rend, cependant, pour avoir un bon rythme vertical, il est recommandé d’utiliser un multiple de la taille de base du design (en % ou em).

p{
margin-bottom: 10px;

margin-top: 10px;
}

Le point sur la technologie

les browsers du marché

Compatibilité navigateurs

La propriété CSS permettant d’importer des polices sur votre site web s’appellent @font-face. Nous verrons par la suite que l’implémenter est d’une réelle facilité. Voici la liste des navigateurs qui la prennent en charge :

FirefoxChromeSafariOperaIE
3.5+9.0+3.2+10.5+6.0+

À première vue, tous les navigateurs sont compatibles. Vous avez même remarqué le IE6, et là vous vous êtes dit, le pauvre Buzut, il a insisté sur la fumette avant de rédiger ce post. Il faut croire que non. En fait, tous ces navigateurs et leurs différentes versions intègrent @font-face, mais ils ne prennent pas tous en compte les mêmes formats de police.

Différents formats de police pour différentes versions de navigateurs

Ce qu’il faut savoir, c’est que le format de police le plus répandu est le .ttf. Malheureusement, bien que tous les navigateurs récents le prennent en charge, toutes les versions ne le reconnaissent pas. Il faudra alors parfois avoir recours à d’autres formats. Voyez ci-dessous :

FirefoxChromeSafariOperaIEIE 6 – 7 – 8
.eot
.ttf.ttf .ttf.ttf.ttf
.otf.otf.otf.otf
.woff.woff.woff.woff.woff
.svg.svg.svg.otf

Vous l’aurez compris, mis à part pour les anciennes versions d’IE, le .ttf est ce qu’il vous faut – quoi qu’il ne coûte rien de renseigner plusieurs formats dans le CSS, le navigateur chargera uniquement le format qui lui sierra le mieux. Nous l’avons déjà abordé plus haut, cependant, ce n’est pas parce que le format de la police (ttc, eot etc.) est compatible avec vos navigateurs cibles, que le rendu sera nécessairement bon. Il peut y avoir de grandes disparités de rendus entre les différents navigateurs et OS.

Les différents formats

Nous venons de voir qu’il existe cinq formats différents. Kézako ?

.ttf ou TrueTypeFont
Format de police le plus répandu, développée par Apple puis racheté par Microsoft. Si vous téléchargez des polices sur internet, il y a de grandes chances pour qu’elles se trouvent dans ce format.
.eot ou EmbedOpenType
Format de police destiné au web et mis au point par Microsoft. Basé sur l’OpenType, il allège la police pour le web. Ce format n’est pris en charge que par Internet Explorer.
.otf ou OpenTypeFont
Évolution de .ttf. appartenant à Microsoft.
.woff ou WebOpenFormatFont
Format compressé pour être adapté au web. Développé en 2009, il est soutenu par Microsoft, Mozilla et Opéra.
.svg ou ScalableVectorGraphic
Format graphique libre développé et maintenu par le W3C.

En résumé, si le .woff paraît le meilleur car il est autant supporté que le .ttf et plus adapté au web, dans la pratique les ressources en polices sont plus nombreuse en .ttf.
Note : il est possible de convertir un format en un autre. Une petite recherche sur google et vous trouverez votre bonheur !

Intégration sur le site

Rien de bien compliqué je vous rassure tout de suite. Si vous avez quelques notions en CSS, vous ne serez pas dépaysé. On est parti !

Avant toute chose, il s’agit déjà d’uploader les polices que vous voulez utiliser sur votre serveur. Là je ne peux pas beaucoup vous aider…
Une fois que c’est fait, passons au CSS, appelons les polices dont nous avons besoin :

@font-face{
font-family : “Neubank NF”;
src : url(‘polices/NeubankNF.ttf’) 
format(“truetype”);
}

Ce n’est pas plus compliqué que ça ! Ici, la police Neubank NF qui a pour nom de fichier NeubankNF.ttf est placée dans le dossier polices.

Et si je veux plusieurs formats pour maximiser la compatibilité ?

C’est possible, regardez :

@font-face{
font-family : “Neubank NF”;
src : url(‘polices/NeubankNF.ttf’) 
format(“truetype”),
src : url(‘polices/NeubankNF.woff) 
format(“woff”);
}

Vous pouvez intégrer plusieurs polices différentes pour différencier, par exemple, les titres du contenu. Il faudra utiliser autant de @font-face que de famille de police.

Il ne vous reste plus ensuite, qu’a appeler votre police comme d’habitude :

p{
font-family: “Neubank NF”, helvetica, sans-serif;
}

Bons tests et bon design !

Il n'y a pas encore de commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *