Recommandations sur `font-family` en CSS

 (chrismorgan.info)
1 points par GN⁺ 12 시간 전 | 1 commentaires | Partager sur WhatsApp
  • Concevoir un design web en se fiant à un nom de police précis peut se casser selon la plateforme, le réseau ou les réglages de sécurité ; il faut donc construire font-family en partant du principe d’un fallback générique
  • Pour le code, l’art ASCII ou les mises en page qui exigent une chasse fixe, il faut impérativement inclure monospace ; pour serif et sans-serif, il est aussi plus sûr de les préciser si l’on veut garantir la famille souhaitée
  • Les piles qui énumèrent longuement des polices probablement présentes en local ont en général peu d’intérêt, et les valeurs génériques par défaut du navigateur peuvent parfois faire un meilleur choix
  • Les web fonts sont plus lentes que leur absence et introduisent des compromis autour des échecs de chargement et de font-display ; pour du contenu, garder la police par défaut de l’utilisateur est donc un choix réaliste
  • system-ui et ui-* ont surtout une logique de texte d’interface court, qui peut mal convenir au contenu long et à la prise en charge des langues ; les utiliser comme substitut de police par défaut pour le contenu est risqué

Ne pas faire confiance aux noms de police

  • Il n’existe pas de web safe fonts réellement communes à toutes les grandes plateformes ; il ne faut donc pas supposer qu’un nom de police donné fonctionnera toujours
  • Les web fonts ne sont pas non plus une solution certaine
    • Les sous-ressources non inline peuvent échouer au chargement pour diverses raisons réseau
    • Le chargement de polices est un domaine sensible côté sécurité, et peut être bloqué dans certains environnements
    • uBlock Origin propose un bouton dédié pour désactiver les polices distantes
    • Le mode économie de données de certains navigateurs peut bloquer le chargement des polices, et dans les cas où il ne le fait pas, certains estiment qu’il devrait le faire
  • Si l’utilisateur n’autorise pas les choix de police propres au site, seules les familles génériques fonctionneront
  • En JavaScript, utiliser document.fonts.load("1em my-web-font") peut produire une Promise rejetée
    • Sur six ans, de 2020 à 2025, environ quatre cas de casse ont été observés à cause de ce problème, dont deux en 2025

Toujours préciser une famille de secours

  • Si du texte à chasse fixe est nécessaire, il faut absolument mettre monospace dans font-family
    • L’absence de monospace passe inaperçue pour beaucoup d’utilisateurs, mais dans certains environnements elle peut ruiner l’intention d’une mise en page ou d’une œuvre
    • Par exemple, ASCII might fly? d’Adel Faure n’incluait pas monospace au moment de l’écriture, ce qui peut l’afficher sans chasse fixe
  • Pour serif et sans-serif, il est également préférable de les inclure si l’on veut un fallback vers la bonne famille
    • Exemple : font-family: Arial, sans-serif;
    • Exemple : font-family: Times New Roman, serif;
    • Sinon, on retombera sur la police par défaut, qui peut être serif, mais aussi quelque chose de complètement différent

Réduire les listes de polices supposées installées

  • La pratique consistant à lister longuement des polices probablement présentes sur le système comme Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans n’aide généralement pas beaucoup
  • En particulier, Arial ne serait jamais un meilleur choix que sans-serif
  • sans-serif peut être interprété comme une police au moins aussi bonne que celles explicitement listées, voire meilleure
  • Un exemple réel de déclaration monospace observée est excessivement long
    • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
    • Cette déclaration est strictement moins bonne que font-family: monospace, monospace, et monospace peut être interprété comme une police qui n’est pas pire que toute cette liste
  • Il n’est pas nécessaire d’interdire totalement les polices non web nommées, mais une seule au maximum semble raisonnable
    • Georgia) et Times New Roman sont toutes deux des polices serif des Core fonts for the Web de Microsoft, mais avec des caractères très différents
    • Georgia est bien plus large que Times New Roman ; si cette propriété est stylistiquement importante, font-family: Georgia, serif reste un choix acceptable
  • modernfontstacks.com et le dépôt donnent des idées de choix de polices selon les plateformes
    • Mais ils prescrivent trop de polices nommées, et beaucoup gagneraient à être supprimées
    • Le traitement de Courier New y est particulièrement erroné, et les images semblent avoir été produites avec Courier sous macOS

Le choix de n’utiliser que des familles génériques

  • Une fois réduite l’énumération des polices locales, on peut aussi réévaluer la nécessité des web fonts
  • Les web fonts sont plus lentes que leur absence et peuvent créer des problèmes de chargement
    • C’est pour cela qu’existe font-display
    • Mais au lieu de gérer les compromis entre périodes de block/swap, redessin et reflow, on peut aussi simplement utiliser les polices dont dispose déjà l’utilisateur
  • On peut aussi faire ce choix avec monospace
    • Autrefois, la valeur par défaut de monospace n’était pas bonne ; en particulier, Courier New#Courier_New) de Microsoft avait été mal numérisée, au point de ressembler en pratique à un poids 200–250 plutôt que 400
    • Apple a ensuite introduit Menlo), et à une époque où la valeur par défaut monospace des navigateurs n’était pas mise à jour, beaucoup ont commencé à ajouter Menlo à leurs piles de polices
    • Aujourd’hui, les valeurs par défaut des navigateurs se sont améliorées ; elles ne sont pas excellentes dans tous les cas, mais elles ne sont plus mauvaises
  • Il est donc possible d’abandonner des listes comme Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New et de ne garder que monospace
  • Ajouter délibérément Courier New dans une pile de polices est jugé très négativement

monospace, monospace et le comportement des navigateurs

  • Lorsque font-family: monospace; est utilisé explicitement ou implicitement, la valeur par défaut de font-size peut être non pas 100 %, mais probablement 81,25 %
    • L’utilisateur peut modifier la police des familles génériques, la taille de police par défaut et la taille de police monospace par défaut
  • Ce comportement ne se produit pas s’il y a une deuxième famille dans la liste
    • font-family: my-web-font, monospace; convient
    • font-family: monospace, monospace; convient aussi
    • On peut également définir font-size directement
  • Lightning CSS a un problème qui casse monospace, monospace
  • Ce problème n’affecte que monospace
  • L’idée défendue est de convaincre les navigateurs d’abandonner ce comportement de taille pour monospace, en relevant probablement une valeur d’environ 13px vers environ 16px
    • Le CSSWG pourrait être le lieu pour proposer cela

Ne pas utiliser system-ui et ui-* pour le contenu

  • Les polices d’interface ne sont pas faites pour du contenu long, mais pour de courts textes d’UI
  • Les polices d’interface peuvent mal prendre en charge la langue du contenu
  • Certains utilisateurs choisissent volontairement une police système d’interface ridicule, ce qui serait assez courant dans certaines communautés Android
    • Utiliser system-ui pourrait donc donner aussi cet aspect au contenu
  • w3c/csswg-drafts issue #3658 discute de plusieurs problèmes liés à system-ui et conclut que system-ui a été largement détourné de son usage
  • mdn/content issue #41244 ajoute sur MDN une note mettant en garde contre son usage excessif
  • system-ui et ui-* ont souvent servi de proxy pour obtenir une meilleure police par défaut, mais cet usage est jugé inapproprié
  • Le point de vue exprimé est que system-ui était une erreur
    • Il aurait mieux valu ne garder que -apple-system et faire converger BlinkMacSystemFont vers celui-ci
    • Au moment de la standardisation, les autres plateformes n’avaient pas d’équivalent utile, même si certaines en ont maintenant
    • Son usage a surtout servi à contourner le fait que les navigateurs n’avaient pas modernisé les anciennes valeurs par défaut des familles génériques
  • ui-serif, ui-sans-serif, ui-monospace et surtout ui-rounded sont présentés comme des erreurs manifestes qui devraient être supprimées
    • En dehors des environnements Apple, on ne devrait pas s’attendre à ce qu’ils soient mappés vers une police particulière
    • Le concept lui-même n’existe que sur les plateformes Apple, et n’aurait donc pas dû entrer dans le standard
    • Si Apple l’avait fourni, cela aurait dû prendre une forme préfixée -apple, comme -apple-system
  • system-ui a des cas d’usage légitimes pour les web apps, mais l’impression est qu’il a été presque entièrement détourné, et qu’une intervention de suppression ne serait peut-être pas une mauvaise chose

À lire aussi

1 commentaires

 
GN⁺ 12 시간 전
Avis sur Lobste.rs

  • https://lindenii.org a choisi de ne pas définir du tout font-family, afin de respecter la police par défaut choisie par l’utilisateur dans son navigateur
    Personnellement, je préfère les sans serif, mais si l’utilisateur a mis une police serif par défaut, je ne vois pas vraiment de raison de l’écraser
    En revanche, lorsqu’il faut utiliser des caractères absents de la plupart des polices, comme sur https://runxiyu.org/soc/ta/, il a bien fallu intégrer une police web, avec pour conséquence que le reste du texte aussi se retrouve forcé en sans serif au lieu d’utiliser le choix par défaut de l’utilisateur
    À moins d’entourer chaque caractère inhabituel avec quelque chose comme <unusual-character>, je ne vois pas de meilleure méthode, et ce serait bien aussi s’il existait un moyen de spécifier une « police préférée de l’utilisateur pour le code »
    L’astuce monospace, monospace était appréciée, et cette différence de taille était assez déroutante

    • Pour le deuxième problème, mettre un remplacement par image à côté des caractères spéciaux peut aussi être un repli acceptable
      Les sites listant les caractères Unicode gèrent ça de cette façon
    • Je fais quelque chose de similaire sur mon blog https://hauleth.dev, mais avec monospace
      On m’a même déjà complimenté sur le design du site, alors qu’en réalité je me suis surtout contenté de reprendre un thème Zola en réduisant le CSS et les éléments personnalisés ; du coup, surtout pour les pages personnelles, je partage assez l’idée générale du billet
    • Pour l’approche consistant à ne pas définir font-family du tout, il serait peut-être préférable pour l’utilisateur que la police par défaut par défaut du navigateur passe de serif à sans serif
      La plupart des utilisateurs ne choisissent pas eux-mêmes leur police, donc il n’y a aucun moyen de distinguer « la police choisie par l’utilisateur » de « la police par défaut du navigateur »
      J’aime bien les serif, mais aujourd’hui il est probable que la majorité préfère les sans serif
      Dans mon environnement, j’ai bloqué les pages pour qu’elles ne puissent pas définir de police, et je n’ai même pas installé de vraie police CJK
      Je considérais que voir une case du type « 4E2D » à la place d’un hanzi ne m’apportait de toute façon pas moins de sens que l’idéogramme lui-même
      Cette gestion des polices de repli était bien pensée, mais malheureusement il n’existe pas de moyen de cibler directement le nom de la police par défaut
      En revanche, dans un document vide, JavaScript permet de faire getComputedStyle(document.documentElement).fontFamily, ce qui renvoie "serif" ou "sans-serif" selon mes paramètres avancés de police
      Je ne sais pas exactement ce que veut dire « police préférée pour le code », et j’ai l’impression qu’il s’agit de quelque chose d’autre que monospace

  • Cet article est encore un brouillon, donc il reste assez inachevé, avec deux ou trois formes différentes de fragments mélangés, ce qui le rend un peu désordonné
    Au final, ce sera probablement plus d’une page, sous une forme sensiblement différente de l’actuelle, et certaines parties pourraient même être manuscrites, dessinées à la main ou mises en page manuellement
    En ce moment, je me concentre plutôt sur l’implémentation d’un langage de balisage léger ; c’est presque utilisable, avec cette impression habituelle que les 90 % finaux ne finissent jamais vraiment
    Ensuite je reviendrai à l’écriture du texte pour le publier

  • Le fait qu’avec font-family: monospace;, la valeur par défaut de font-size puisse devenir 81,25 % au lieu de 100 %, alors que cela ne se produit pas si une deuxième police figure dans la liste, est vraiment intéressant
    Autrement dit, font-family: my-web-font, monospace; ou font-family: monospace, monospace; fonctionneraient correctement, mais cela ne semble pas documenté actuellement sur MDN
    Je me demande si quelqu’un peut expliquer pourquoi cela arrive et pourquoi ce n’est pas documenté

    • Si je me souviens bien, Firefox n’applique pas en pratique cet ajustement de taille de police, alors que Chrome le fait
      Cela peut donc aussi être une source d’incohérence entre navigateurs
    • L’intention était peut-être de faire en sorte que le texte à chasse fixe paraisse visuellement de la même taille que le texte courant

  • Même si c’est un brouillon, il y a une répétition étrange où une section semble avoir été copiée-collée telle quelle une deuxième fois dans le texte
    Ça m’a d’autant plus frappé que cela donnait l’impression que la police à chasse fixe que j’aime bien n’était pas terrible

    • Je suis encore en train de retravailler la structure, donc ce genre de choses subsiste
      En lisant de près, il y a aussi de légères contradictions, parce que je suis en train de distinguer ce qui relèvera de recommandations fermes et ce qui demandera une position plus nuancée
      Je suis curieux de savoir quelle est la police à chasse fixe que tu préfères

  • Une raison de ne pas se limiter à serif et sans-serif, c’est que la police serif par défaut est souvent Times, que beaucoup trouvent médiocre
    C’est d’ailleurs pour cela que je suis en train de faire passer ma police de texte de serif à sans serif

  • À propos du conseil disant de « ne pas lister des polices probablement installées sur le système » et de « se limiter si possible à des familles génériques même pour le monospace », j’ai configuré mon site web ainsi
    J’utilise --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; et --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace;
    L’idée est que, si Adwaita Sans est installée sous GNOME, la police système soit utilisée sans télécharger de police web ; sinon, la police web Adwaita Sans Bundled est utilisée, avec Inter puis sans-serif comme repli pendant le chargement grâce à des métriques proches
    Pour la chasse fixe, c’est pareil : si Iosevka est installée sur le système, elle est utilisée ; sinon, la police web Iosevka Web prend le relais, avec Cascadia Code puis monospace comme repli pendant le chargement
    J’ai aussi tenu compte du fait que monospace correspond à Consolas sous Windows, ce que je trouve peu satisfaisant, et que les versions récentes de Windows incluent Cascadia Code
    Je sais que ce n’est pas idéal parce que Cascadia Code a des métriques assez différentes de celles d’Iosevka, mais je me demande ce que vous pensez de cette approche

    • Je n’ai presque aucune connaissance en programmation web, donc il est possible qu’il existe une meilleure façon d’indiquer « télécharger la police uniquement si elle n’est pas déjà installée sur le système » que je ne connais pas

  • Le texte est clair, et je ne connaissais pas du tout l’astuce monospace, monospace
    Petit souci de mise en forme : dans mon navigateur, le texte des paragraphes .unimportant apparaît devant le fond jaune mais derrière le texte de la barre .status fixe, ce qui rend le défilement de la section .unimportant étrange à regarder
    J’ai l’impression qu’il se passe quelque chose de similaire avec le filigrane DRAFT en diagonale