modern font stacks

Piles de polices modernes

Système Pile Pile CSS organisée par classification de la police pour chaque système d'exploitation moderne

Les polices les plus rapides disponibles. Pas de téléchargement, pas de changements de mise en page, pas de flashs - juste des rendus instantanés.

---

Système UI · Transitionnel · Ancienne · Humaniste · Humaniste géométrique

Humaniste classique · Néo-Grotesque · Code monospace de la dalle monospace · Monospace

Industriel · Sans arrondi · Slab Serif · Antique · Didone · manuscrit

---

Fonctionnalités supplémentaires / Système d'exploitation Support / Plugins et extensions

UI du système

Les polices d'interface utilisateur système sont celles qui sont originaires de l'interface du système d'exploitation. Ils sont très lisibles et faciles à lire à des petites tailles, contient de nombreux poids de police et sont idéaux pour les éléments d'interface utilisateur.

Pile de polices CSS

 font-family : system-ui , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
San Francisco	●	●	●	●	●	●	●	●	●
Segoe ui	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Cantarell	●		●	●			●	●
Noto sans	●	●	●	●	●	●	●	●	●

Notes

• L'interface utilisateur système est moins une pile de polices et plus d'une valeur CSS, system-ui , représentant la police d'interface utilisateur par défaut. Il est largement pris en charge sur tous les systèmes d'exploitation modernes.
• Les polices indiquées sont les polices par défaut pour l'interface utilisateur dans chaque système d'exploitation moderne.

Retour en haut ↑

De transition

Les polices de caractères de transition sont un mélange entre les polices à l'ancienne et les polices de caractères modernes qui ont été développées pendant les Lumières. L'un des exemples les plus célèbres d'une police de transition est Times New Roman, qui a été développé pour le journal Times of London.

Pile de polices CSS

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Charte				●			●		●
Charte Bitstream				●			●
Texte de sitka				●			●
Cambria				●			●
Noto serif¹				●			●

Notes

• Charter est une police de caractères fantastique et intemporelle conçue par Matthew Carter en 1987 pour les machines de télécopieur à basse résolution 300dpi et les imprimantes laser. Il a une grande hauteur X aide à la lisibilité et résiste magnifiquement sur les écrans d'aujourd'hui.
• Charter for MacOS a un large espace non révolutionnaire (   ). Ce bogue a été signalé à Apple.
• Sitka est une autre belle police conçue par Matthew Carter qui ressemble légèrement à Charter. Sitka a été conçu dans la collaboration des technologies de lecture avancées de Microsoft pour optimiser la lisibilité.
• Android utilise Noto Serif comme police serif par défaut, donc pas besoin de spécifier dans la pile.

Retour en haut ↑

Ancienne style

Les polices de style à l'ancienne sont caractérisées par une contrainte diagonale, un faible contraste entre les traits épais et minces, et des tireliques arrondis, et ont été développés pendant la période de la Renaissance. Garamond est l'un des exemples les plus célèbres d'une police à l'ancienne.

Pile de polices CSS

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Iowan Old Style				●			●		●
Linotype palatino				●			●
Urw palladio l				●			●
P052				●			●
Noto serif¹				●			●

Notes

• Android utilise Noto Serif comme police serif par défaut, donc pas besoin de spécifier dans la pile.

Retour en haut ↑

Humaniste

Les polices humanistes sont caractérisées par leurs formes organiques et calligraphiques et un faible contraste entre les coups épais et minces. Ces polices sont inspirées par l'écriture manuscrite de la période de la Renaissance et sont souvent considérées comme plus lisibles et plus faciles à lire que les autres polices Sans-Serif.

Pile de polices CSS

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Seravek		●	●	●	●		●
Gill sans Nova			●	●			●	●
Ubuntu	●		●	●	●		●
Calibri			●	●			●
Dejavu sans	●			●			●
Source Sans Pro				●		●	●

Notes

• Gill Sans Nova est disponible en tant que police téléchargeable supplémentaire.
• Source Sans Pro utilise le nom Source-Sans-Pro sous Android, donc cette police ne cible que les appareils Android.

Retour en haut ↑

Humaniste géométrique

Les polices géométriques humanistes sont caractérisées par leurs formes géométriques propres et leurs largeurs de course uniformes. Ces polices sont souvent considérées comme modernes et élégantes, et sont souvent utilisées à des fins de titres et à d'autres fins d'affichage. Futura est un exemple célèbre de cette classification.

Pile de polices CSS

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Avenir			●	●	●			●	●
Montserrat	●	●	●	●	●	●	●	●	●
Corbelle			●	●			●
Urw gothique			●			●
Source Sans Pro				●		●	●

Notes

• Avenir a été choisi au-dessus d'Avenir ensuite pour MacOS, car le poids 300 est beaucoup plus lisible sur le Web sur le poids des 200 qu'Avenir a ensuite. Si vous cherchez un ultra-léger ou un noir, n'hésitez pas à échanger Avenir contre Avenir.
• Source Sans Pro utilise le nom Source-Sans-Pro sous Android, donc cette police ne cible que les appareils Android.

Retour en haut ↑

Humaniste classique

Les polices humanistes classiques sont caractérisées par la façon dont les traits s'élargissent subtilement lorsqu'ils atteignent les terminaux de l'AVC sans se terminer par un Serif. Ces polices sont inspirées par les capitales romaines classiques et la sculpture en pierre sur les pierres tombales de la Renaissance.

Pile de polices CSS

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Optima				●			●		●
Candara			●	●			●
Noto sans	●	●	●	●	●	●	●	●	●
Source Sans Pro				●		●	●

Notes

• Source Sans Pro utilise le nom Source-Sans-Pro sous Android, donc cette police ne cible que les appareils Android.

Retour en haut ↑

Néo-grotesque

Les polices néo-grotesques sont un style de Sans-Serif qui a été développé à la fin du XIXe et au début du 20e siècle et se caractérise par ses formes géométriques propres et ses largeurs de course uniformes. Helvetica est l'un des exemples les plus célèbres d'une police néo-grotesque.

Pile de polices CSS

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Entre	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Helvetica Neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Nimbus sans				●		●	●
Arial				●		●	●

Notes

• Arial Nova est disponible en tant que police téléchargeable supplémentaire.
• Roboto est utilisé pour les installations Linux (MX Linux, ElementaryOS, etc.) et manuelles. Il ne rendra pas Roboto sur Android, mais le SANS-Serif générique d'Android le fera.

Retour en haut ↑

Monospace Slal Serif

Les polices de caractères de la dalle monospace sont caractérisées par leurs lettres de largeur fixe, qui ont la même largeur quelle que soit leur forme, et ses formes géométriques simples. Utilisé pour imiter la sortie de la machine à écrire pour les rapports, le travail tabulaire et la documentation technique.

Pile de polices CSS

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Nimbus mono ps				●			●
Courrier nouveau				●			●
Mono cutif				●

Notes

• Nimbus Mono PS est spécifié en premier car de nombreuses distros Linux créent un alias de nom pour Courier New et ne représentent pas toujours une dalle Serif
• Cutive Mono n'a pas besoin d'être représentée dans la pile car Android crée un alias de nom pour Courier New.
• Cutive Mono n'a malheureusement qu'un seul poids

Retour en haut ↑

Code monospace

Les polices de type de code monospace sont spécialement conçues pour une utilisation dans la programmation et d'autres applications techniques. Ces polices sont caractérisées par leur conception monospacée, ce qui signifie que toutes les lettres et caractères ont la même largeur et leurs formes claires et lisibles.

Pile de polices CSS

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
SF Mono			●	●	●	●	●	●
Code Cascadia	●	●	●	●		●	●
Code source pro		●	●	●	●	●	●	●
Menlo				●			●
Consolas				●			●
Dejavu sans mono				●			●
Droid sans mono				●

Notes

• SF Mono n'est disponible que via ui-monospace sur macOS 10.15+ et iOS 13.3+ lors de l'utilisation de Safari
• Droid Sans Mono pour Android n'a pas besoin d'être spécifié dans la pile car monospace est un alias de nom

Retour en haut ↑

Industriel

Les polices de caractères industrielles sont originaires de la fin du XIXe siècle et ont été fortement influencées par les progrès de la technologie et de l'industrie pendant cette période. Les polices de caractères industrielles sont caractérisées par leurs formes de lettres audacieuses et sans-serif, leur apparence simple et simple, et l'utilisation de lignes droites et de formes géométriques.

Pile de polices CSS

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
Alternative							●
Medium gothique de Franklin					●
Nimbus sans étroite				●			●
Roboto condensé	●	●	●	●	●	●	●	●	●

Notes

• Étant donné que cette pile est limitée sur les poids à travers les systèmes d'exploitation, il est préférable d'utiliser comme police d'affichage moyen / gras
• Bahnschrift est l'une des premières polices variables ajoutées à Windows.
• Roboto Condensé utilise le nom sans serif-condensé sous Android, donc cette police ne cible que les appareils Android.

Retour en haut ↑

Sans arrondi

Les polices arrondies sont caractérisées par les formes de lettres courbes arrondies et donnent une apparence plus douce et plus conviviale. Les bords arrondis donnent à la police une sensation plus organique et ludique, ce qui le rend adapté à une utilisation dans des conceptions informelles ou adaptées aux enfants. Le style Sans-Serif arrondi est populaire depuis les années 1950, et il continue d'être largement utilisé dans la publicité, l'image de marque et d'autres formes de conception graphique.

Pile de polices CSS

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
SF Pro arrondie	●	●	●	●	●	●	●	●	●
Hiragino Maru Gothic				●
Sables mouvants			●	●			●
Confortaa			●	●			●
Manjari	●			●			●
Arial arrondi MT							●
Arial arrondi MT Bold							●
Calibri			●	●			●
Source Sans Pro				●		●	●

Notes

• SF Pro Roundd est disponible uniquement via ui-rounded sur MacOS 10.15+ et iOS 13.3+ lors de l'utilisation de Safari
• Hiragino Maru Gothic est techniquement une police japonaise mais prend en charge tous les caractères latins. La police Mac n'inclut pas un gras, donc un faux gras s'affiche à l'écran.
• Arial arrondi MT est nécessaire pour les fenêtres, tandis que Arial Arronded MT Bold est nécessaire pour les installations de Windows iOS, Mac et plus anciennes
• Source Sans Pro utilise le nom Source-Sans-Pro sous Android, donc cette police ne cible que les appareils Android. Ce n'est pas une police arrondie, mais c'est mieux que Roboto ici.

Retour en haut ↑

Slab serif

Les polices de sérif sur la dalle sont caractérisées par la présence de sérifs épais et de type bloc aux extrémités de chaque forme de lettre. Ces serifs sont généralement sans fracture, ce qui signifie qu'ils n'ont pas de transitions incurvées ou effilées vers le trait principal de la lettre.

Pile de polices CSS

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Rockwell				●			●
Rockwell Nova			●	●			●	●
Dalle de roboto	●		●	●			●
Dejavu serif				●			●
Sitka petit				●			●
Noto serif				●			●

Notes

• Rockwell est inclus avec Windows Office
• Rockwell Nova est disponible en tant que police téléchargeable supplémentaire.
• Android utilise Noto Serif comme police serif par défaut, donc pas besoin de spécifier dans la pile.

Retour en haut ↑

Antique

Les polices de caractères antiques, également appelées Égyptiens, sont un sous-ensemble de polices de caractères Serif qui étaient populaires au 19e siècle. Ils sont caractérisés par leurs serifs de type bloc et leur poids épais de trait uniforme.

Pile de polices CSS

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
Bookman Old Style				●			●
Urw Bookman			●			●
Géorgie Pro			●	●		●	●		●
Géorgie				●			●
Noto serif¹				●			●

Notes

• Georgia Pro est disponible en tant que police téléchargeable supplémentaire.
• Android utilise Noto Serif comme alias pour Georgia , donc pas besoin de spécifier dans la pile.

Retour en haut ↑

Faire

Les polices de caractères, également connues sous le nom de polices de caractères modernes, sont caractérisées par le contraste élevé entre les traits épais et minces, la contrainte verticale et les tirails capillaires sans crochet. Le style didone est apparu à la fin du XVIIIe siècle et a gagné en popularité au cours du 19e siècle.

Pile de polices CSS

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni MT				●			●		●
Affichage noto serif	●	●	●	●	●	●	●	●	●
Urw palladio l				●			●
P052				●			●
Sylfaen				●
Noto serif¹				●			●

Notes

• Android utilise Noto Serif comme police serif par défaut, donc pas besoin de spécifier dans la pile.
• Sylfaen n'inclut pas un gras, donc un faux gras sera affiché à l'écran.

Retour en haut ↑

Manuscrit

Les polices manuscrites sont conçues pour imiter l'apparence et la sensation de l'écriture. Malgré la vaste gamme de styles d'écriture, cette pile de polices a tendance à adopter un style d'écriture plus informel et de quotidien.

Pile de polices CSS

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

Voir dans votre navigateur (View / caractères de l'article)

? Aperçu du rendu entre les systèmes d'exploitation

✅ Poids et notes de police

Poids de police	100	200	300	400	500	600	700	800	900
Impression de Segoe				●			●
Bradley Hand							●
Chilanka				●
Tscu_comic				●
À venir				●

Notes

• À venir utilise bientôt le nom décontracté sous Android, donc cette police ne cible que les appareils Android.

Retour en haut ↑

Fonctionnalités supplémentaires

Support des emoji

Vous cherchez à ajouter des emojis natifs à votre page? Ajoutez ces polices à la fin de votre pile de polices:

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' 

Anti-aliasing

Rendez votre texte avec l'anti-aliasing en utilisant ces propriétés CSS:

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

Prise en charge du système d'exploitation

• Windows 7 ou plus récent
• Android 10 ou plus nouveau (très limité avec 8 polices)
• iOS 9.3 ou plus récent
• macOS 10.9 (Mavericks) ou plus récent
• Linux (échantillon de 12 distros populaires)

Retour en haut ↑

Plugins et extensions

• Piles de polices modernes pour le vent arrière CSS par Borisanthony
• Piles de polices modernes pour wordpress par Littlebigthing
• Les piles de polices modernes sont prises en charge nativement par webstudio

Retour en haut ↑