15 ANS, toujours vivant !
Notre manifeste

Jouez avec les polices pour vos sites web

Publié le 3 février 2011
3 min

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 🙂

Je partage l'article
Voir les commentaires
19
92 articles
Né en 1978 à Epinal, Benjamin Bastien vit en Aquitaine depuis 1995. Il a développé une connaissance approfondie des systèmes de gestion de bases de données tournés vers la diffusion sur terminaux mobiles. Titulaire d’un DESS en Aménagement et gestion des stations touristiques il a très vite intégré à ses problématiques de recherche l’impact des nouvelles technologies de communication sur le secteur. Il a également une bonne pratique les politiques [...]
Voir les 19 commentaires

19 réponses à “Jouez avec les polices pour vos sites web”

  1. generic cialis without prescription

    Jouez avec les polices pour vos sites web | Etourisme.info

  2. ventolin inhaler without an rx

    Jouez avec les polices pour vos sites web | Etourisme.info

  3. lowest price on viagra

    Jouez avec les polices pour vos sites web | Etourisme.info

  4. ciprofloxacin over the counter usa

    Jouez avec les polices pour vos sites web | Etourisme.info

  5. buy naltrexone online usa

    Jouez avec les polices pour vos sites web | Etourisme.info

  6. generic viagra 100mg

    Jouez avec les polices pour vos sites web | Etourisme.info

  7. acetaminophen walmart

    Jouez avec les polices pour vos sites web | Etourisme.info

  8. viagra 100mg side effects

    Jouez avec les polices pour vos sites web | Etourisme.info

  9. buy chloroquine

    Jouez avec les polices pour vos sites web | Etourisme.info

  10. hydroxychloroquine antiviral

    Jouez avec les polices pour vos sites web | Etourisme.info

  11. order viagra online usa

    Jouez avec les polices pour vos sites web | Etourisme.info

  12. cialis for sale

    Jouez avec les polices pour vos sites web | Etourisme.info

  13. canada pharmacy discounted viagra 100

    Jouez avec les polices pour vos sites web | Etourisme.info

  14. bimatoprost for eyelash growth

    Jouez avec les polices pour vos sites web | Etourisme.info

  15. tadalafil without a doctor’s prescription

    Jouez avec les polices pour vos sites web | Etourisme.info

  16. buy pfizer viagra in canada

    Jouez avec les polices pour vos sites web | Etourisme.info

  17. best time to take viagra 50mg

    Jouez avec les polices pour vos sites web | Etourisme.info

  18. buy hydroxychloroquine online

    Jouez avec les polices pour vos sites web | Etourisme.info

  19. buy cialis dit :

    buy cialis

    Jouez avec les polices pour vos sites web | Etourisme.info

Également sur etourisme.info