Dans cet article, nous allons présenter les polices web courantes, y compris le chinois et l'anglais :

Anglais

Sans-serif

  • Helvetica:Considérée comme la police préférée des designers, style réaliste, lignes épurées et modernes, très prisée. Elle est considérée comme la meilleure police web sur Mac, mais s'affiche horriblement sur Windows à cause du hinting.
  • Arial:Un « clone » d'Helvetica, très similaire à Helvetica, avec de petites différences dans les détails comme R et G. Si la taille de police est trop petite et qu'il y a trop de texte, la lecture peut être un peu fatigante. S'affiche normalement sur Windows et Mac.
  • Famille Lucida:Lucida Grande est la police standard de l'interface de Mac OS, appartenant au style humaniste, légèrement plus vivante. Elle s'affiche mieux sur Mac que sur Windows.
  • Verdana:Une police conçue spécialement pour l'affichage à l'écran, de style humaniste, encore clairement lisible en petites tailles, mais dont les détails typographiques font gravement défaut ; mieux vaut ne pas l'utiliser pour les titres.
  • Tahoma:Également de style humaniste, assez similaire à Verdana, mais légèrement plus étroite avec des contre-formes un peu plus petites. Elle a autrefois été la police standard de Windows et est installée par défaut sur Mac depuis 10.5.
  • Trebuchet MS:Une police de style humaniste conçue pour Microsoft. Personnellement, je trouve sa personnalité trop marquée, et elle peut ne pas convenir si elle est mal utilisée.

Serif

  • Georgia:Fondamentalement, la police à empattements adaptée au texte courant à l'écran n'est autre que Georgia. Traits épais, empattements nets, contours plus larges, affichage net même en petites tailles, et les détails restent acceptables.
  • Times:Times a été conçue pour les journaux, caractérisée par le fait de faire tenir plus de texte dans un espace limité. Ses traits sont plus faibles, et le texte courant en petite taille à l'écran paraît fatigant. Lorsqu'Engadget a été remanié et a utilisé Times pour le texte courant, cela a été vivement critiqué, puis il est passé à Georgia.

Chinois

  • SimSun (Zhongyi Songti):La police la plus courante sous Windows. Les petites polices utilisent des bitmaps, les grandes polices utilisent TrueType, mais les grandes polices ne rendent pas bien, donc mieux vaut ne pas l'utiliser pour les titres.
  • Microsoft YaHei:Une police introduite récemment après Vista. Elle s'affiche bien avec ClearType activé, mais paraît floue sans ClearType.
  • STXihei (Huawen Xihei):La police chinoise par défaut sur Mac.
  • Droid Sans et sa dérivée WenQuanYi Micro Hei:La police chinoise d'Android, également la police chinoise par défaut dans la plupart des distributions Linux. Bien sûr, certains utilisent WenQuanYi Zen Hei, mais c'est moins courant maintenant.

Remarque :CSS3 a commencé à prendre en charge les polices embarquées, donc les choix de polices anglaises ont soudainement beaucoup augmenté, mais les polices chinoises, en raison de leur taille de fichier importante, n'ont toujours que ces quelques options.

Effets de police Web

Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
Police chinoise Microsoft YaHei 24pxPolice chinoise en gras © Yifangtian
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
Police chinoise Microsoft YaHei 20pxPolice chinoise en gras © Yifangtian
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimSun
26px SimSun Police chinoisePolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px SimSun Police chinoisePolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimHei* Utiliser le gras avec prudence
26px SimHei Police chinoisePolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px SimHei Police chinoisePolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789

Polices anglaises non monospace

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Comic Sans MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
abcdefghijklmnopqrstuvwxyz 0123456789
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Time News Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789

Polices monospace anglaises

Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Hei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Monaco
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
simhei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789

Polices chinoises

SimSun
Police chinoise SimSun 14pxPolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
Police chinoise SimSun 12pxPolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
Police chinoise Microsoft YaHei 14pxPolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
Police chinoise Microsoft YaHei 12pxPolice chinoise en gras
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Police chinoise MingLiU 11px
Police chinoise nette 11pxPolice chinoise en gras (11px)
Police chinoise PMingLiU 11px
Police chinoise nette 11pxPolice chinoise en gras (11px)
Exemples d'utilisation courants à 11px : Tahoma, Verdana, Arial, PMingLiU, MingLiU
Police chinoise nette 11pxPolice chinoise en gras (11px)
Police chinoise MS UI Gothic 10px
On dit que cette police affiche un peu mieux le chinois traditionnel, mais elle n'est toujours pas très claire.(10px)