CINXE.COM

<!doctype html><html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Utiliser des polices système - Nicolas Friedli</title> <meta name="description" content="Les polices dites «web safe» n’existent plus vraiment aujourd’hui, mais des directives CSS comme system-ui et des listes de polices adaptées permettent de conserver un web écologique et rapide."> <style>:root{--sans:ui-sans-serif, Roboto, Inter, Arial, system-ui, sans-serif;--mono:ui-monospace, "Roboto Mono", "JetBrains Mono", Hack, Menlo, Consolas, monospace}html{font-family:var(--sans);font-variant-ligatures:none;font-variant-numeric:oldstyle-nums proportional-nums}code,pre{font-family:var(--mono)}code,pre,table{font-variant-numeric:lining-nums tabular-nums}a,h1,h2,h3,h4{font-variant-numeric:lining-nums proportional-nums}</style> <style media="screen">:root{color-scheme:light dark;--background:#F8F8F8;--text:#222;--contrast:orange}::marker{font-weight:700}::selection{background:var(--contrast);color:var(--text)}@media(prefers-color-scheme:dark){:root{--background:#000;--text:#DDD}::selection{color:var(--background)}}html{background:var(--background);color:var(--text);font-size:clamp(1rem,.8828rem + .3125vw,1.125rem);line-height:1.5;margin:0;padding:1rem;text-wrap:pretty}body{margin-block:0;margin-inline:auto;max-width:66ch}main{margin-block:4rem}footer,header,time{font-size:.8rem}nav{display:flex;flex-wrap:wrap;gap:1rem}h1,h2,h3,h4{line-height:1.1;margin-block:2rem 1rem;text-wrap:balance}h1{font-size:1.95em}h2{font-size:1.56rem}h3{font-size:1.25rem}h4{font-size:1rem;text-transform:uppercase}blockquote{font-style:italic;margin-left:0;padding-left:1rem;border-left:.2rem solid}blockquote em{font-style:normal}:not(pre)>code{border:1px dotted;font-size:.85rem;padding:.1em}pre{font-size:.9rem;margin-block:1rem 2rem;margin-inline:-1rem;overflow:auto;padding:.5rem 1rem}li pre{margin-inline:0}::marker,.articles a,dt{font-weight:700}dd+dt{margin-top:1rem}li{margin-top:.5rem}li li{font-size:95%}a{color:inherit;text-decoration-thickness:.2ex;text-underline-offset:.2ex}a:active,pre{background:var(--text);color:var(--background)}hr{border:.2ex solid;margin-inline-end:75%}</style> <style media="print">@page{margin:2cm}*{background-color:unset;color:#000}header,footer{display:none}pre{white-space:pre-wrap}a::after{content:" [" attr(href)"] "}</style> <link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="alternate" type="application/rss+xml" href="/index.xml" title="Nicolas Friedli"> <link rel="canonical" href="https://nicolasfriedli.ch/blog/polices-systeme/"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Utiliser des polices système","image":["/images/opengraph.jpg","/images/nicolas-friedli.jpg"],"wordCount":"1424","datePublished":"2024-04-22","dateModified":"2024-10-25","author":[{"@type":"Person","name":"Nicolas Friedli","url":"https://nicolasfriedli.ch/"}],"isAccessibleForFree":true}</script> <script defer data-domain="nicolasfriedli.ch" src="https://plausible.io/js/script.outbound-links.js"></script> <link rel="webmention" href="https://webmention.io/nicolasfriedli.ch/webmention"> <link rel="pingback" href="https://webmention.io/nicolasfriedli.ch/xmlrpc"> <meta property="og:url" content="https://nicolasfriedli.ch/blog/polices-systeme/"> <meta property="og:site_name" content="Nicolas Friedli"> <meta property="og:title" content="Utiliser des polices système"> <meta property="og:description" content="Les polices dites «web safe» n’existent plus vraiment aujourd’hui, mais des directives CSS comme system-ui et des listes de polices adaptées permettent de conserver un web écologique et rapide."> <meta property="og:locale" content="fr"> <meta property="og:type" content="article"> <meta property="article:section" content="blog"> <meta property="article:published_time" content="2024-04-22T00:00:00+00:00"> <meta property="article:modified_time" content="2024-10-25T00:00:00+00:00"> <meta property="og:image" content="https://nicolasfriedli.ch/images/opengraph.jpg"> </head> <body> <header> <nav> <a href="/">Nicolas Friedli</a> <a href="/blog/">Blog</a> <a href="/blogroll/">Liens</a> <a href="/contact/">Contact</a> </nav> </header> <main> <h1>Utiliser des polices système</h1> <time datetime="2024-04-22" class="entry-date dateline">22 avril 2024</time> <time datetime="2024-10-25" class="entry-date dateline">/ dernière modification: 25 octobre 2024</time> <p>L’utilisation de polices du système d’exploitation (<em>system font stack</em>) permet une cohérence graphique sans téléchargements. Mais la diversité des plateformes rend le travail relativement complexe.</p> <h2 id="problematique">Problématique</h2> <p>Dans son billet <a href="https://pimpmytype.com/web-safe-fonts/">Are Web-Safe Fonts still relevant in 2024?</a>, Oliver Schöndorfer se demande si l’utilisation de polices système universelles est toujours pertinente aujourd’hui. Sa question est bonne, parce que les systèmes d’exploitation sont nombreux. Toutefois, sa réponse est imparfaite.</p> <p>Il part du fait qu’il n’existe plus de polices présentes sur tous les périphériques. Arial et Times New Roman avaient une disponibilité de virtuellement 100%, ce n’est plus vrai pour le système Android.</p> <p>Les questions suivantes devraient toujours être posées:</p> <ul> <li>Est-ce qu’<em>une police précise</em> est nécessaire pour ce site web?</li> <li>Est-ce qu’un <em>choix de polices proches</em> est suffisant?</li> <li>Faut-il laisser le <em>choix de la police au système d’exploitation</em>?</li> <li>Faut-il laisser le <em>choix de la police aux internautes</em>?</li> <li>Est-ce que les enjeux d’<em>écologie</em> et de <em>performance</em> permettent de télécharger plusieurs fichiers?</li> </ul> <h2 id="necessite-dune-police-precise-corporate-identity">Nécessité d’une police précise (<em>corporate identity</em>)</h2> <p>Quand une police doit être utilisée, il n’y a pas d’autre choix que de demander au navigateur de la télécharger. En pratique, ce sont plusieurs fichiers qui vont être envoyés, en général:</p> <ul> <li>une police «normale»</li> <li>une police grasse</li> <li>une police italique</li> <li>une police grasse italique</li> </ul> <p>Les fichiers seront mis à disposition par une directive CSS <code>@font-face</code> et ceux qui sont nécessaires seront téléchargés. Lorsque ce cas se présente, il fait veilleur à une optimisation des fichiers et des chargements:</p> <ul> <li>bon format de fichier (<code>woff2</code>)</li> <li>blocage ou non de l’affichage (<code>font-display</code>)</li> <li>préchargement (<code>preload</code>)</li> <li>suppression des jeux de caractères inutiles</li> <li>une gestion du cache pertinente (<code>immutable</code>)</li> <li>utilisation de polices variables si disponibles</li> </ul> <p>En général, il devrait être possible de s’en tirer autour de 100kB pour un jeu de police complet. Pour en savoir plus sur cette thématique complexe, le billet <a href="https://www.zachleat.com/web/comprehensive-webfonts/">A Comprehensive Guide to Font Loading Strategies</a> de Zach Leatherman est un point de départ précieux.</p> <p>Quand ce chargement permet de répondre à une contrainte précise, c’est très bien. Mais je reste surpris par le nombre de sites qui téléchargent de tas de fichiers qui sont sans rapport avec la charte graphique de l’entreprise ou l’institution. Dans ces cas là, il y aurait peut-être mieux à faire.</p> <h2 id="choix-de-polices-system-font-stack">Choix de polices (<em>system font stack</em>)</h2> <p>Une <em>font stack</em> est une liste de polices possibles. Autrement dit, le site <em>suggère</em> des polices au navigateur; il choisit la première de la liste disponible localement et l’affiche.</p> <p>Le site <a href="https://modernfontstacks.com/">Modern Font Stacks</a> propose des «piles de polices» toutes faites qui fonctionnent bien partout. Par exemple:</p> <pre tabindex="0"><code>font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif; </code></pre><p>Ce qui se passe:</p> <ul> <li>Inter s’affiche si elle a été installée par l’internaute.</li> <li><del>Sinon Roboto s’affiche sur Android (où elle est toujours disponible). Ou ailleurs si elle a été installée.</del> En fait, Roboto s’affiche sur Android par <code>sans-serif</code> (dernier point ci-dessous).</li> <li>Sinon Helvetica Neue s’affiche sur Apple (où elle est toujours disponible). Ou ailleurs si elle a été installée.</li> <li>&mldr;</li> <li>Sinon Arial s’affiche sur Windows (où elle est toujours disponible). Ou presque partout ailleurs.</li> <li>Finalement, si aucune n’est disponible, c’est la police de substitution, choisie par le navigateur ou l’internaute qui apparaît.</li> </ul> <p>Franchement, il me parait acceptable d’afficher une des polices sans empattement présentes, que les internautes connaissent. Dans tel cas, il n’y a aucune bande passante utilisée et aucune latence. Pour tous les textes courants, c’est un excellent choix.</p> <h2 id="polices-universelles-web-safe-fonts">Polices universelles (<em>web safe fonts</em>)</h2> <p>Comme Oliver Schöndorfer le signale, Arial et Times New Roman ne sont plus disponibles partout. Mais il est facile de contourner le problème. Si l’idée est d’obtenir simplement une police banale sans empattement, la directive CSS suivante suffit:</p> <pre tabindex="0"><code>font-family: sans-serif; </code></pre><p>Et avec empattement:</p> <pre tabindex="0"><code>font-family: serif; </code></pre><p>Cela va peut-être manquer un peu d’originalité, mais c’est léger. Si les internautes n’ont pas configuré leur navigateur n’importe comment, ce sera très lisible. J’estime que c’est toujours une bonne solution.</p> <p>Les <em>polices universelles</em> aujourd’hui ne sont plus identifiables par un nom précis; ce sont simplement les écritures par défaut du système d’exploitation.</p> <h2 id="la-police-dinterface-system-ui">La police d’interface (<em>system-ui</em>)</h2> <p>Depuis quelque temps, il est possible d’utiliser une police spéciale. C’est celle du système d’exploitation. Elle ne peut pas être modifiée dans le navigateur par les internautes, contrairement aux précédentes. C’est tout simple:</p> <pre tabindex="0"><code>font-family: system-ui, sans-serif; </code></pre><p>La directive <code>sans-serif</code> reste à disposition si le navigateur – cas très rare – ne comprenait pas la directive <code>system-ui</code>. Avec une police système, c’est une écriture parfaitement en phase avec le système utilisé qui sera choisie. C’est celle de l’interface, d’où UI (<em>user interface</em>).</p> <p>Au final, l’apparence laisse encore moins d’originalité que <code>sans-serif</code>, mais ce sont souvent des polices de grande qualité qui sont utilisées. Le résultat est excellent.</p> <h2 id="peripheriques-apple">Périphériques Apple</h2> <p>Les périphériques Apple ont la particularité d’utiliser des directives spéciales comme la police UI. Sur les systèmes récents, c’est l’excellente police San Francisco qui sera choisie. Elle est élégante et dispose d’une large gamme de graisses et des tailles optiques. Franchement, il n’y a pas à hésiter à utiliser:</p> <pre tabindex="0"><code>font-family: ui-sans-serif, sans-serif; </code></pre><p>La même logique existe pour les autres types de polices. Donc, pour des périphériques Apple:</p> <pre tabindex="0"><code>html { font-family: ui-sans-serif, sans-serif; } blockquote, h1, h2, h3 { font-family: ui-serif, serif; } code, pre { font-family: ui-monospace, monospace; } </code></pre><p>Tout le texte est sans empattement, sauf les citations et les titres avec empattement et le code en chasse fixe.</p> <h2 id="peripheriques-android-et-linux">Périphériques Android et Linux</h2> <p>Pour Android, Roboto est toujours disponible.</p> <p>Elle s’affiche par les directives <code>system-ui</code> ou <code>sans-serif</code>, mais pas par <code>Roboto</code>! Pour Linux, Roboto est presque toujours disponible et Noto Sans aussi.</p> <p>Donc, pour le corps du texte:</p> <pre tabindex="0"><code>html { font-family: system-ui, sans-serif; } Et pour les citations et intertitres: blockquote, h1, h2, h3 { font-family: "Noto Serif", serif; } Et pour le code: code, pre { font-family: "Noto Sans Mono", "Roboto Mono", monospace; } </code></pre><p>Attention, avec Linux, il est possible de modifier <code>system-ui</code>, ce qui ne donne aucune certitude quant à la police choisie. Mais on peut supposer que les internautes utilisent des fontes lisibles sur leur système.</p> <h2 id="peripheriques-windows">Périphériques Windows</h2> <p>Pour Windows, c’est un peu plus complexe, car différentes versions, avec des polices différentes, cohabitent. Mais il serait possible d’utiliser des polices «universelles», par exemple:</p> <pre tabindex="0"><code>html { font-family: Arial, sans-serif; } blockquote, h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; } code, pre { font-family: Consolas, monospace; } </code></pre><p>Mon souci avec Windows, c’est que je n’aime pas Segoe UI pour les titres. Et c’est la police <code>system-ui</code> pour certaines versions du système. Mais Segoe UI est meilleure qu’Arial pour le texte. J’essaie de tirer cela au clair dans ma proposition.</p> <h2 id="proposition">Proposition</h2> <p>Évidemment, il faut que la feuille de style CSS fonctionne pour tous les systèmes. En haut de la pile, il est possible d’ajouter des polices que je souhaiteras voir afficher. Je pourrais utiliser, pour un site comme le mien, quelque chose comme:</p> <pre tabindex="0"><code>html { font-family: "Fira Sans", "Public Sans", ui-sans-serif, Inter, Roboto, system-ui, sans-serif; } code, pre { font-family: "JetBrains Mono", "Hack", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace; } </code></pre><p>La logique est:</p> <ul> <li>les premières lignes suggèrent des polices</li> <li>puis une directive règle le cas pour tous les périphériques Apple</li> <li>puis des propositions pour la majorité des Linux</li> <li>puis on laisse le système se débrouiller</li> </ul> <p>En adoptant une telle démarche, on prend une posture de <em>suggestion de présentation</em>. J’en parle dans <a href="/blog/lire-classiques-web/#sur-le-design-web">Lire et relire les classiques du web </a></p> <h2 id="en-conclusion">En conclusion</h2> <p>Il existe aujourd’hui d’autres manières de concilier écologie, esthétique et performance qu’en utilisant des polices dites «web safe» comme Arial et Times New Roman. Entre les polices système (<code>sans-serif</code>, etc.), les nouvelles directives (comme <code>system-ui</code>), je pense qu’il n’est vraiment pas nécessaire d’envoyer systématiquement des fichiers à chaque internaute.</p> <p>Sur ce site, j’utilise désormais:</p> <pre tabindex="0"><code>html { font-family: ui-sans-serif, Roboto, system-ui, sans-serif; } code, pre { font-family: ui-monospace, "Roboto Mono", "JetBrains Mono", Hack, Menlo, Consolas, monospace; } </code></pre><p>Les déclarations exactes de ma feuille de style sont toujours disponibles chez GitHub dans le fichier <a href="https://github.com/nfriedli/nicolasfriedli.ch/blob/main/assets/css/fonts.css"><code>fonts.css</code></a>.</p> <hr> <p>J’attends avec impatience l’arrivée de la directive <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data"><code>prefers-reduced-data</code></a> qui permettra(it) de gérer les choses beaucoup plus simplement.</p> <hr> <p>À ma connaissance, la police la plus légère actuellement disponible est <a href="https://vercel.com/font">Geist</a>. Un seul fichier permet de remplacer les 4 variations dont je parlais ci-dessus. Une fois passée par <a href="https://github.com/zachleat/glyphhanger">Glyphhanger</a>, elle pèse environ 20 kB. Toutefois, la version elle ne dispose pas d’un vrai italique, mais d’une version oblique.</p> <hr> <p><strong>Ajout du 30 avril 2024.</strong> Les polices système (San Franciso, Segoe UI et Roboto) sont excellentes pour les personnes dyslexiques. Elles sont bien meilleures que plusieurs polices prétendument optimisées. Je vous conseille vivement la lecture et le visionnage de <a href="https://pimpmytype.com/dyslexia-fonts/">Dyslexia friendly fonts: Are they any good?</a>.</p> <hr> <aside> <p>Dans la même thématique:</p> <ul> <li><a href="/blog/tester-site/">Tester un site web</a></li> <li><a href="/blog/optimisation-raisonnable/">Philosophie d’optimisation raisonnable</a></li> <li><a href="/blog/falc-plain-ia/">Notes sur les textes faciles à lire et à comprendre & le langage clair</a></li> <li><a href="/blog/police-optimisee-titres/">Police optimisée pour les titres</a></li> <li><a href="/blog/creation-affichage-page-web/">Création & affichage d’une page web</a></li> </ul> </aside> </main> <footer> <p>Abonnement par <a href="/index.xml">flux RSS</a>. Contenus sous licence libre <em>Creative Commons BY-SA</em>.</p> </footer> </body> </html>