@charset "UTF-8"; /* ===================================================================== Les polices du site, hébergées ici DM Serif Display pour les titres, DM Sans pour le texte. Deux membres de la même famille, dessinés pour aller ensemble : l'accord est acquis sans avoir à l'ajuster. Elles remplacent Josefin Slab, qui portait seule tout le site depuis sa création — titres et texte courant, en semi-gras. C'était deux erreurs plutôt qu'une : un slab géométrique daté, et du 600 sur des paragraphes entiers, ce qui fatigue autant que ça vieillit. Pourquoi les fichiers sont ici et pas chez Google ------------------------------------------------- Le site les chargeait depuis fonts.googleapis.com. Chaque visiteur transmettait donc son adresse IP à Google aux États-Unis, avant même d'avoir cliqué sur quoi que ce soit — ce que la CNIL et la jurisprudence allemande considèrent comme un traitement qui ne va pas de soi. Les servir depuis notre propre domaine règle la question, et va plus vite au passage : une résolution DNS et une connexion de moins sur le chemin critique de l'affichage. Les deux familles sont sous licence SIL Open Font, qui autorise explicitement cet hébergement. Les noms de fichiers sont volontairement sans numéro de version ---------------------------------------------------------------- Les fichiers téléchargés s'appellent `dm-sans-v16-latin-regular.woff2` ou approchant : `v16` est la révision de la police chez Google, et elle change. Un nom qui la porte oblige à modifier ce fichier à chaque mise à jour, et casse l'affichage si l'on oublie. Les fichiers sont donc renommés à la réception, sous les noms courts employés ici. `font-display: swap` -------------------- Le texte s'affiche immédiatement dans la police de secours, puis bascule. L'alternative — attendre la police — laisse une page blanche pendant le chargement, ce qui est pire sur une connexion de campagne. La police de secours est choisie proche : Georgia a des proportions voisines de DM Serif Display, et les sans-serif système ont la même hauteur d'x que DM Sans. Le basculement se voit donc à peine. ===================================================================== */ /* --- DM Serif Display : les titres, une seule épaisseur --------------- Cette famille n'existe qu'en une épaisseur, la normale. C'est le cas habituel d'un caractère de titrage, et cela a une conséquence : ne jamais lui demander de gras. Le navigateur en fabriquerait un en épaississant les contours, ce qui empâte les déliés et détruit précisément ce qui fait sa qualité. */ @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- DM Sans : le texte --------------------------------------------- Quatre épaisseurs, et pas davantage. 400 le texte courant 500 ce qui doit se détacher à peine 600 les intertitres, les libellés, les noms — le semi-gras du gabarit d'origine, retrouvé 700 les boutons et les rares mots à marteler Le 600 a failli ne pas être là. Le gabarit le demandait à une dizaine d'endroits, hérité de Josefin Slab qui le possédait ; DM Sans, chargée en trois épaisseurs, ne l'avait pas, et le navigateur arrondissait donc au 700. Ces libellés étaient en gras franc depuis la bascule, sans que personne l'ait décidé. Le rabattre sur 500 réglait le symptôme et perdait l'intention. Le fichier pèse quatorze kilo-octets, et surtout : un `@font-face` que personne n'emploie ne se télécharge jamais. Déclarer une épaisseur ne coûte donc rien tant qu'aucune règle ne la réclame — ce qui vaut aussi pour celles restées de côté. Car le lot téléchargé contenait 300, 800, 900 et toutes les italiques. Elles ne sont pas ici, et c'est délibéré : un fichier posé sur le serveur finit toujours par trouver quelqu'un pour s'en servir, et c'est ainsi qu'un site se met à parler six épaisseurs sans qu'aucune ne veuille dire quelque chose. Elles restent dans `outils/font/`, à portée du jour où l'une d'elles aura une raison d'être. */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/dm-sans-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Les deux piles, nommées une fois -------------------------------- Le reste du site n'écrit plus de nom de police : il emploie ces deux variables. Changer de caractère un jour ne demandera donc que de toucher ce fichier, au lieu de traquer des `font-family` dans cinq mille lignes. */ :root { --police-titre: "DM Serif Display", Georgia, "Times New Roman", serif; --police-texte: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }