Jouez avec les polices pour vos sites web

On le sait sans le savoir, ça nous gêne pas vraiment, on fait plus trop attention mais oui le web, même 2.0 n’a que 10 Polices de caractères (Fonts) utilisables.
* Verdana
* Arial
* Arial Black
* Comic Sans MS
* Courier New
* Georgia
* Times New Roman
* Trebuchet MS
* Century Gothic
* Impact
* la onzième est Webdings…

Ces *webfonts* sont « safe » car elles sont présentes sur tous les ordinateurs disposant d’un navigateur web. *C’est le vrai problème du web, toutes les polices sont utilisables mais il faut qu’elles soient installées sur l’ordinateur de celui qui consulte.*

C’est bien dommage d’être limité à si peu de polices de caractères car biens utilisées, elles constituent un élément fort d’une charte graphique.

De nombreuses techniques existent (dont certaines à base de flash) pour substituer des caractères web par des images générées à la volée de ces mêmes caractères mais dans une police moins répandue. L’inconvénient est qu’il faut bien souvent disposer d’une format un peu particulier de la police et que la mise en forme de ces caractères est difficile : le calcul des marges, des espacements, de la hauteur des lignes etc sera différent entre la police « normal » puis sa police substituée. Par exemple, une taille 11 d’Arial Black n’aura pas visuellement le même rendu qu’une taille 11 de Comic Sans MS.
Ces techniques ont donc été utilisées essentiellement pour le titrage.

Pour éviter de dépendre des polices de l’utilisateur, le W3C a proposé, l’utilisation dans les feuilles de style des pages web, de la propriété *@font-face*. Concrètement, la police est « jointe » au moment du chargement de la page, un peu comme les photos ou les vidéo. La solution parait simple, car même si elle ajoute du temps de chargement, c’est assez minime. Mais chaque navigateur/plateforme a besoin d’un format particulier de la même police (il faut donc 3 formats d’une même police…). Heureusement un format unique est apparu très récemment, le *Web Open Font Format* (WOFF) et IE9, Firefox 3.6+, Opéra 9.8+ et Chrome 5+ le supporte !
Il reste encore un problème : avoir des polices disponibles dans ce format (ou avoir les droits dans un autre format pour la transformer dans ce format).

Voici une liste d’outils :
* pour transformer vos polices pour une utilisation web :
** « fontsquirrel »:http://www.fontsquirrel.com/fontface/generator
** « freefontconverter »:http://www.freefontconverter.com/index.php

* pour trouver et utiliser gratuitement des polices web prêtes à l’utilisation :
** « http://code.google.com/webfonts »:http://code.google.com/webfonts
** « http://www.fontsquirrel.com/fontface »:http://www.fontsquirrel.com/fontface
** « http://typekit.com/ »:http://typekit.com/ (partiellement gratuit)
** « http://kernest.com/ »:http://kernest.com/

* pour trouver et utiliser la police web de vos rêves (ndlr les rêves c’est payant) :
** « http://typekit.com/ »:http://typekit.com/
** « http://www.fontslive.com/ »:http://www.fontslive.com/

Pour vous faire une idée, hésitez pas à aller sur « webtype »:http://www.webtype.com ou à jouer avec « les polices nouvelles générations sur etourisme.info »:http://www.fontslive.com/preview/demo.aspx?url=etourisme.info&hpid=17736&tpid=17755

*Attention*, on a beau être sur le web, des critères essentiels de lisibilité sont à respecter : éviter dans un même paragraphe le gras, l’italique le souligné… ou les changements trop fréquents de polices.

Enfin, mettez à jour vos navigateurs et vous re-decouvrirez peut-être certains sites qui sans vous le dire utilisent de bien belles polices 🙂