Polices sur le web

13 janvier 2009 CSS ,Typographie 13 commentaires

Sur le web, contrairement au papier, nous avons à disposition un nombre de polices ~~limité~~ illimité mais… non contrôlable [1]. Les pages html n’embarquent pas les polices contrairement à ce qui se passe pour d’autres éléments externes type images ou vidéos. Il faut donc se contenter de ce qu’il y a à disposition sur le poste de l’internaute qui viendra parcourir votre page. Et comme on en peut pas savoir ce que l’internaute a sur son poste, on se contente donc des polices les plus communément intégrées aux différents OS (window mac et linux). Malgré cette restriction, avec un peu de technique et de bons conseils, on peut quand même faire preuve de créativité en typo web.

Définir un ensemble de polices

Plutôt que de définir une seule police pour une page html, et courir ainsi le risque que l’internaute ne l’ai pas sur son poste, on définit un ensemble de polices : la première police est la police de référence, la deuxième est une alternative approchante, la troisième une autre alternative … ainsi de suite jusqu’à la dernière déclaration qui n’est en fait pas une police mais une famille génériqeu de police (serif, sans-serif, cursive, monospace…)

En css, ça donne ça

body {font-family : police exacte, alternative la plus proche, alternative la plus répandue pour chaque plateforme, alternative universelle (cross-platform), famille générique}

Ainsi, on est sûr que si l’internaute n’a pas la première police d’installée sur son poste, il ya de forte chances qu’il ai au moins une des alternatives déclarées dans votre ensemble de police. Au pire, s’il n’a aucunne de ce spolices, son navigateur utilisera une police de la famillie générique que vous avez déclaré à la fin.

8 paquets de polices

Pour nous simplifier le travail, plutôt que de nous laisser trouver une police et son équivalent pour chaque plate-forme, Michael Tuck dans son article, 8 definitive font stacks, nous livre 8 ensembles de polices :

(les exemples sont en comme ça)

Times New Roman et serif

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus, enim et aliquam gravida, pede turpis tempor orci, sed bibendum erat erat in sapien. Maecenas condimentum molestie tellus. Praesent rutrum, risus id accumsan volutpat, lacus est tempor neque, at ullamcorper arcu mi quis quam. Phasellus nec tortor. Donec dui leo, sagittis non, dignissim et, auctor vel, tortor.

Georgia

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

Garamond

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

Helvetica/Arial

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

Verdana

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

Trebuchet

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

Impact

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

Monospace

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

21 autres ensemble de polices

Fonttester met également à notre disposition une liste de 21 polices « web safe »avec pour chacune son équivalent famille générique :

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

En espérant que ces listes de polices vont égayer vos pages web. Moi je me servirais de ce billet comme un aide mémoire pour mes listes de polices.

Si vous souhaitez creuser le sujet des typo sur le web, je vous renvoie à mon delicious aux tags fonts et typography.

C’est pour faire plaisir à Romy

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

Askalab

Si je puis me permettre (d’ailleurs, je le fais 😉 ) : ce serait top-de-la-mort-qui-tue si en plus du nom tu mets un exemple… même si ledit exemple serait biaisé en fonction des polices de caractères qu’on a chacun 😉
Benoit

Je plussoie… le dit exemple ne serait pas biaisé si tu mettais un screenshot de chaque exemple 🙂
tetue

Je chipote : « nous avons à disposition un nombre limité de polices »… Il est inexact de dire « limité » puisque que nous disposons au contraire d’un nombre illimité de polices, puisque ce sont toutes celles disponibles sur les postes utilisateurs… il serait plus exact de dire « illimité mais… non contrôlable » 😉

Super article, sinon. Merci.
Grégoire

Puisque vous avez été 2 à plussoyer, j’ai rajouté un exemple en dessous de chaque grand ensemble de polices.

Je n’ai pas mis de screenshot car le screenshot aurait été le rendu de telle ou telle police sur ma machine. Les exmeples sont du simple html. Comme ça vous pourrez tester le rendu sur différente plate-formes.

@tetue : je t’en prie, chipote, chipote 😉 J’ai corrigé d’ailleurs.
Ced

Tu n’aurais pas des problèmes de flux RSS ? 😉
Grégoire

@Ced j’ai fait des modifications récemment (redirection feedburner), mais je n’ai pas constaté de problème pour l’instant. C’est quoi le souci ? Tu as les entrées en double ?
bruno bichet

Ca fait un bail que j’ai la flemme de faire un billet comme ça pour avoir des listes de fontes sous la main… Merci 1000 fois 😉
Robert

Question bête : y a-t-il un moyen simple de connaitre la police réellement utilisée par le navigateur lors de l’affichage ?
Des ensembles de polices cohérents pour le web

[…] la même liste de police de caractères Helvetica, Arial, sans-serif, etc., le billet de Grégoire Polices sur le web et celui de Michael Tuck 8 Definitive Web Font Stacks devraient élargir votre horizon […]
Mais que font les polices ? | Le blog du marketing interactif

[…] original sur le blog de Grégoire […]
Eric

Cela me rassure sur la police Garamond que je comptais utiliser sur mon nouveau site. Merci pour ce billet ajouté directement à mon Yoolink !
patateman

donnez moi une idée de police merci
Des ensembles de polices cohérents pour le web » Net@Web – Graphisme-Web-Print

[…] la même liste de police de caractères Helvetica, Arial, sans-serif, etc., le billet de Grégoire Polices sur le web et celui de Michael Tuck 8 Definitive Web Font Stacks devraient élargir votre horizon […]