Francis Chouquet Graphiste Lettering

Webdesign: jongler entre les polices de caractères pour Windows, MacOSX et Linux

0

Quand on crée son site web pour la première fois, on ne se pose pas trop de questions. On est sur son OS préféré, c’est-à-dire Windows, Mac OSX ou encore Linux. On développe son site, on met tout en ordre et puis voilà. Seulement, si on fait l’effort de « porter » son site sur un autres OS, on se rend compte que non seulement il y a des différences entre les navigateurs, et ce, même pour le même navigateur mais sous un OS différent, mais que certaines polices ont disparu et ont été remplacées par d’autres, bien moins belles ! Et oui, les polices standards système ne sont pas les mêmes d’un OS à un autre…super… Du coup, vous voilà parti à devoir tout repenser pour que votre site ou blog soit plus ou moins valable sur les différents OS… Dans cet article, je vais essayer de vous donner quelques trucs pour faciliter votre travail au niveau du choix des polices et vous permettre de faire le meilleur choix, ou plutôt devrais-je dire le moins mauvais choix !!

N’oubliez pas non plus un aspect que je n’aborderai pas ici, mais j’ai remarqué que la même police peut avoir un aspect différent selon le navigateur. C’est le cas par exemple de Verdana dont l’épaisseur est plus prononcée sur Internet Explorer 7 que sur Firefox 2.0.0.4… Donc, bien choisir ses polices peut devenir rapidement un vrai casse-tête si vous êtes un tantinet perfectionniste ! 😀

screen typography

Avec l’arrivée des CSS, la gestion des polices a été considérablement facilitée. Dans votre feuille de style, vous déterminez la ou les polices que vous voulez voir s’afficher et si l’ordinateur de la personne qui visite votre site ne l’a pas, elle ne verra le contenu comme vous souhaiteriez que ce soit le cas. La police par défaut des navigateurs est Times New Roman. Ca veut dire que si le navigateur ne trouve aucune police à afficher, c’est celle qu’elle utilisera.

Le problème qui se pose ici, c’est que selon l’OS sur lequel on se trouve, les polices de caractère « standards » ne sont pas les mêmes. Vous pouvez très bien développer votre site avec une police que vous aimez bien mais si le visiteur ne l’a pas sur son ordinateur, toute votre mise en page risque d’être chamboulée. Pour faciliter le travail, il vous faut donc choisir parmi les polices qui sont disponibles sur TOUS les OS. Et là, le choix est très limité… Du côté des Serif, on retrouve Times New Roman et Georgia, et du côté des Sans Serif, on retrouve Arial, Helvetica, Verdana et Trebuchet MS. Enfin, vous pouvez également utiliser la monospace Courier pour tout ce qui est code par exemple. Pour faire simple, ce sont les principales polices que vous êtes sûrs de trouver sur les différents OS.

Alors, pour être sûr que le navigateur n’ira pas pioché sur les Serif quand vous voulez une Sans Serif, vous pouvez rédiger des « font-family ». Prenons l’exemple suivant:

font-family= Trebuchet MS, Verdana, Arial, Sans-Serif;

Ici, le navigateur ira chercher la première police et s’il ne la trouve pas, ira chercher la seconde et ainsi de suite. En ajoutant « Sans-Serif » qui est une police « générique », vous êtes sûr de rester dans les polices droites. Déjà, c’est un premier point à ne pas oublier.

Mais vous aimeriez bien utiliser des polices un peu plus fun tout de même… Pour cela, il existe bien des possibilités comme créer des images pour certaines parties « statiques » du site, mais très mauvais en terme d’accessibilité, ou encore utiliser SiFR qui vient mettre un peu de Flash sur votre site, de manière dynamique, mais dont les conséquences au niveau référencement sont critiquées… Donc au final, rien de bien concluant. Il va donc falloir bien choisir ses polices, et ce différemment pour le corps du texte que pour les titres.

Comment bien choisir une police pour le corps du texte ?

Ici, vous avez un impératif. Il vous faut choisir une police qui soit lisible à petite taille. C’est très important. Vos visiteurs sont là pour lire vos articles, il faut donc qu’ils puissent le faire facilement. Mais certaines polices ne sont pas trop belles à petite taille et ont tendance à se déformer.

Commencez par faire des essais pour voir ce qui vous plaît le plus et vous semble le plus lisible. Restez tout d’abord dans la liste réduite des polices valables sur tous les OS. Faîtes vos tests. Ensuite, vous pouvez très bien ajouter une police que vous aimez encore mieux mais qui ne sera pas forcément sur tous les OS.

Par exemple, pour les polices Serif, Book Antiqua et Bookman Old Style sont tout aussi lisible que Georgia et seront présentes sur tout ordinateur qui a Microsoft Office d’installé. Et ce, que ce soit sous Windows ou sous MacOSX. URW Bookman L peut être utilisée pour Linux. Ainsi, comme je l’ai expliqué plus haut, vous pouvez vous construire votre « font-family »en mettant en premier les polices que vous souhaitez voir apparaître et ensuite les polices dites « standards ».

Pour les Sans-Serif, j’aime beaucoup Lucida Grande, qui n’est valable que sous Mac OSX. Mais Lucida Sans Unicode et Lucida Sans sont valables sur les dernières versions de Windows, et remplaceront très bien la police Apple.

De même, j’aime beaucoup Century Gothic, mais elle n’existe pas de base sur les différents OS, mais elle utilisable dès lors que le visiteur a Microsoft Office. Du coup, vous pouvez faire votre mise en page avec les polices standards et y ajouter devant Century Gothic qui ne s’affichera que chez les personnes qui l’ont sur leur ordinateur. Et chez les autres, ils auront la police qui suit que vous avez défini et paramétré.

Attention cependant à une chose. A une famille de polices sont associés des paramètres, comme la hauteur de ligne (line-height) ou l’espace entre les lignes (letter-spacing) par exemple. Vérifiez bien que que chaque police soit toujours lisible selon les paramètres définis.

Et pour les titres ?

on gardera le même principe. Ici, votre police doit être lisible à plus grande taille. Ici, je souhaiterai juste intervenir sur un point en particulier. Il peut arriver que dans votre sidebar vous mettiez des images en background, derrière du texte, histoire de mettre les choses bien en forme. Vous avez mis par exemple un joli cadre en arrière plan et vous avez bien centré votre texte. Ici, selon la police qui va s’afficher, leur taille peut être différente et ainsi mettre en péril le centrage de votre texte. Il est impératif de faire votre cadrage avec une police standard et de voir s’il n’existe pas d’autres polices, plus sympas, qui pourraient être utilisées avec ce même cadrage… Attention à ne pas aller piocher dans des polices peu connues ! Auquel cas, ça ne servira pas à grand chose puisqu’à part vous, peu de personnes la verront… Mais dans ce cas, vous pouvez également utiliser des images sans texte pour pouvoir utiliser la police de votre choix… Cependant, pensez qu’en grossissant le texte, ces images resteront à la même taille…

Bref, il n’est jamais facile de choisir la meilleure police pour son site web… Et je dois bien avouer que c’est quelque chose qui me pose un problème comparé l’univers de du « print » ou du graphisme ou la créativité peut s’exprimer librement…

Quoi qu’il en soit, certaines polices sont tout de même intéressantes et proposent un niveau de lisibilité optimal, ce qui est le plus important ici. A vous ensuite de trouver le meilleur compromis entre « beauté » et « accessibilité »…

liens intéressants:
Guide Microsoft sur les polices (anglais)
Liste de polices sur Wikipédia
Article sur les fontes de caractères sr Wikipédia

Francis

6 Commentaires

  • Très bon article 😀

    Je rajouterais les 2 liens suivants:

    le premier indiquant les équivalents Mac aux polices Windows:
    http://www.ampsoft.net/webdesi.....Fonts.html

    le second la liste des polices généralement présentes sur Windows, Mac et Linux, ainsi que d’autres infos utiles:
    http://www.upsdell.com/BrowserNews/res_fonts.htm

  • Merci SK pour ces liens. Faut que je regarde pour Trebuchet MS, mais il ne me semble pas que ce soit Helvetica l’équivalent sur MacOSX…faut que je vérifie… Merci en tout cas !! 😉

  • Merci pour cet article très intéressant une fois de plus, à bookmarker 😉 🙂

  • Merci Daria ! 😉

  • Tres bon article, cela complete mes compétences au niveau du portage sur differentes OS.

    Merci encore une fois xD

  • Salut vous n’auriez pas d’autres liens dans le style de browser news ? Je le trouve intéressant !

Success, your comment is awaiting moderation.