Si vos déclarations CSS font-family contiennent désespérément 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 typographique grâce à 8 ensembles de polices « intelligents » :
En théorie
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 }
Times New Roman et serif
body { font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; }
Georgia
body { font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; }
Garamond
body { 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
body { 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
body { font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif; }
Trebuchet
body { font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif; }
Impact
body { font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif; }
Monospace
body { 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 ensembles plus classiques
body { font-family: Arial, Helvetica, sans-serif; }
body { font-family: 'Arial Black', Gadget, sans-serif; }
body { font-family: 'Bookman Old Style', serif; }
body { font-family: 'Comic Sans MS', cursive; }
body { font-family: Courier, monospace; }
body { font-family: 'Courier New', Courier, monospace; }
body { font-family: Garamond, serif; }
body { font-family: Georgia, serif; }
body { font-family: Impact, Charcoal, sans-serif; }
body { font-family: 'Lucida Console', Monaco, monospace; }
body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
body { font-family: 'MS Sans Serif', Geneva, sans-serif; }
body { font-family: 'MS Serif', 'New York', sans-serif; }
body { font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
body { font-family: Symbol, sans-serif; }
body { font-family: Tahoma, Geneva, sans-serif; }
body { font-family: 'Times New Roman', Times, serif; }
body { font-family: 'Trebuchet MS', Helvetica, sans-serif; }
body { font-family: Verdana, Geneva, sans-serif; }
body { font-family: Webdings, sans-serif; }
body { font-family: Wingdings, 'Zapf Dingbats', sans-serif; }
Lire aussi Revised Font Stack car le choix d’une famille de caractère est un élément fondamental dans le design de votre site web.
Jolie collection de font-family… Droit le genre de truc qui me sert en ce moment en plus donc bien pratique ce petit billet 😉 Thx !
@burningHat: bah, faut surtout remercier Michael et Grégoire, je n’ai fait que relayer l’info 😉
Peu de polices vraiment multi-plateformes me semble-t-il si ?
Je ne savais pas que ce style de police cohérente existait, je cherchais des polices alternatives à Arial, je vais donc tester. Merci pour l’info.
Merci beaucoup, je m’en vais tester ca tout de suite ! Existe-t-il un outil (ext firefox) permettant de simuler la degradation d’une mise en page ? il suffit peutetre d’enlever la reference a la police exacte dans la declaration css…
olivier
Merci pour ces polices !
Voilà pile poil l’info que je recherché 🙂
Merci pour ce billet pertinent et utile pour les développeurs en herbe 😉
Ressources très utile,
c’est vrai qu’il est parfois dur de rassembler des polices cohérentes au seins d’une même page !
Merci 🙂
J’ai opté pour la Famille Frutiger sur mon site Muzikoo et je ne regrette vraiment pas, sobre, simple et très classe.
Un grand merci à css4design !