Des ensembles de polices cohérents pour le web

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Des ensembles de polices cohérents pour le web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



12 commentaires pour “Des ensembles de polices cohérents pour le web”

  1. burningHat dit :

    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 !

  2. Bruno Bichet dit :

    @burningHat: bah, faut surtout remercier Michael et Grégoire, je n’ai fait que relayer l’info ;)

  3. Peu de polices vraiment multi-plateformes me semble-t-il si ?

  4. […] Vous souhaitez utiliser un ensemble de polices cohérentes sur votre site, voici la solution. […]

  5. parfumerie dit :

    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.

  6. 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

  7. Damien dit :

    Merci pour ces polices !

  8. Bubu dit :

    Voilà pile poil l’info que je recherché :) Merci pour ce billet pertinent et utile pour les développeurs en herbe ;)

  9. oziks dit :

    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 :)

  10. alex dit :

    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 !

  11. […] Lire Des ensembles de polices cohérents pour le web et La typothèque idéale par Smashing Magazine […]

  12. […] Lien vers l’article : Des ensembles de polices cohérents pour le web […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site