Catégories
Astuces et Design

Tirer le meilleur parti des polices variables sur Google Fonts

J'ai passé ces dernières années à travailler (aux côtés d'un groupe de personnes super talentueuses) sur une famille de polices appelée Recursive Sans & Mono, et elle vient d'être lancée officiellement sur Google Fonts!

Tu veux l'essayer super vite? Voici le code d'intégration pour utiliser la famille de polices variable récursive complète de Google Fonts (mais vous obtiendrez beaucoup plus de flexibilité et de performances si vous lisez plus loin!)

Le récursif est conçu pour le code, les sites Web, les applications et plus encore.
Recursive Mono a à la fois des styles linéaires et occasionnels pour différentes «voix» dans le code, ainsi que des italiques cursifs si vous le souhaitez – ainsi qu'une plage de poids plus large pour la typographie d'affichage à espacement fixe.
Recursive Sans est proportionnel, mais contrairement à la plupart des polices proportionnelles, les lettres conservent la même largeur dans les styles pour plus de flexibilité dans les interactions et la mise en page de l'interface utilisateur.

J'ai commencé Recursive en tant que projet de thèse pour un programme de maîtrise en conception de caractères chez KABK TypeMedia, et lorsque j'ai lancé ma fonderie de caractères, Arrow Type, j'ai ensuite été chargé par Google Fonts de terminer et de publier Recursive en tant que police OFL open source.

Vous pouvez voir Recursive et en savoir plus sur ce qu'il peut faire sur recursive.design.

Recursive est conçu pour être une famille de types flexibles pour les sites Web et le code, où son objectif principal est de donner aux développeurs et aux concepteurs un type amusant et utile avec lequel jouer, combinant une esthétique fraîche avec la dernière technologie de police.

Tout d'abord, une définition nécessaire: polices variables sont des fichiers de police qui s'adaptent à une gamme de styles à l'intérieur d'un fichier, généralement d'une manière qui permet à l'utilisateur de la police de sélectionner un style dans une gamme fluide de styles. Ces gammes stylistiques sont appelées axes variables, et peuvent être des paramètres, comme l'épaisseur de la police, la largeur de la police, la taille optique, l'inclinaison de la police ou des choses plus créatives. Dans le cas de la récursive, vous pouvez contrôler la «monospacedness» (à partir de Mono à Sans) et «Casualness» (entre une normale, linéaire un style et un pinceau, décontractée style). Chaque famille de caractères peut avoir un ou plusieurs de ses propres axes et, comme de nombreuses fonctionnalités de type, les axes variables sont une autre considération de conception pour les concepteurs de polices.

Vous avez peut-être vu que Google Fonts a commencé à ajouter des polices variables à sa vaste collection. Vous avez peut-être lu certaines des choses géniales que les polices variables peuvent faire. Mais, vous ne réalisez peut-être pas que de nombreuses polices variables fournies par Google Fonts (y compris récursives) ont beaucoup plus de gamme stylistique que celle que vous pouvez obtenir avec le frontal par défaut de Google Fonts.

Étant donné que Google Fonts compte un large éventail d'utilisateurs – dont beaucoup sont nouveaux dans le développement Web -, il est compréhensible qu'ils gardent les choses simples en n'affichant que l'axe "poids" pour les polices variables. Mais, pour les polices comme Recursive, cette simplification laisse en fait de nombreuses options. Sur la page récursive, Google Fonts montre aux visiteurs huit styles, plus un axe. Cependant, Recursive a en fait 64 styles prédéfinis (également appelés instances nommées), et un total de cinq axes variables que vous pouvez ajuster (qui représentent un grand nombre de styles personnalisés plus potentiels).

Le récursif peut être divisé en ce que je considère comme l'une des quatre «sous-familles». La partie montrée par Google Fonts est la version la plus simple et proportionnelle (sans empattement). Les quatre sous-familles récursives ont chacune une plage de pondérations, plus l'italique, et peuvent être classées comme suit:

  • Sans linéaire: Une police sans empattement proportionnelle, d'aspect «normal». C'est ce qui apparaît sur le site Web de Google Fonts.
  • Sans Casual: Une police proportionnelle «brush casual»
  • Mono linéaire: Une police «normale» monospace
  • Mono Casual: Une police "brush casual" monospace

Il vaut probablement mieux visualiser que décrire avec des mots. Voici deux tableaux (un pour Sans, l'autre pour Mono) montrant les 64 instances nommées:

Mais encore une fois, l'interface principale de Google Fonts ne donne accès qu'à huit de ces styles, plus l'axe des poids:

Récursif a 64 styles prédéfinis – et bien d'autres à utiliser lors de l'utilisation de paramètres d'axe personnalisés – mais Google Fonts n'affiche que huit des styles prédéfinis, et uniquement l'axe de pondération des cinq axes variables disponibles.

Aujourd'hui, peu de polices variables ont plus qu'un axe de pondération, il s'agit donc d'un choix UX compréhensible dans un certain sens. J'espère néanmoins qu'ils ajouteront un peu plus de flexibilité à l'avenir. En tant que concepteur de polices et fan de type, voir l'approche actuelle du poids uniquement ressemble plus à un aplatissement artificiel qu'à une véritable simplification – un peu comme si Google Maps devait «simplifier» les cartes en excluant toutes les routes qui n'étaient pas une autoroute.

Heureusement, vous pouvez toujours accéder à tout le potentiel des polices variables hébergées par Google Fonts: découvrez l'API CSS Google Fonts, version 2. Voyons comment vous pouvez l'utiliser pour tirer le meilleur parti de Récursif.

Mais d'abord, il est utile de connaître quelques informations sur le fonctionnement des polices variables.

Comment fonctionnent les polices variables et pourquoi c'est important

Si vous avez déjà travaillé avec des photos sur le Web, vous savez que vous ne devriez jamais diffuser un fichier JPEG de 9 000 pixels alors qu’une version plus petite fera l'affaire. Habituellement, vous pouvez réduire une photo à l'aide de la compression pour économiser de la bande passante lorsque les utilisateurs la téléchargent.

Il existe des considérations similaires pour les fichiers de polices. Vous pouvez souvent réduire considérablement la taille d'une police en sous-définissant les caractères qu'elle contient (un peu comme recadrer des pixels pour ne laisser que la zone dont vous avez besoin). Vous pouvez compresser davantage le fichier en le convertissant en un fichier WOFF2 (ce qui est un peu comme exécuter un fichier image raster via un outil d'optimisation comme imageOptim). Les fournisseurs qui hébergent des polices, comme Google Fonts, feront souvent ces choses automatiquement pour vous.

Maintenant, pensez à un fichier vidéo. Si vous avez seulement besoin d'afficher les 10 premières secondes d'une vidéo de 60 secondes, vous pouvez couper les 50 dernières secondes pour avoir un fichier vidéo beaucoup plus petit.

Les polices variables sont un peu comme les fichiers vidéo: elles ont une ou plusieurs plages d'informations (axes variables), et celles-ci peuvent souvent être réduites ou «épinglées» à un certain emplacement, ce qui permet de réduire la taille du fichier.

Bien sûr, les polices variables ne ressemblent en rien aux fichiers vidéo. Les polices enregistrent chaque forme de lettre dans des vecteurs (comme les SVG stockent les informations de forme). Les polices variables ont plusieurs «emplacements source» qui sont comme des images clés dans une animation. Pour passer d'un style à l'autre, les points de contrôle qui composent les lettres sont interpolés mathématiquement entre leurs différents emplacements source (également appelés deltas). Une police peut avoir plusieurs ensembles de deltas (au moins un par axe variable, mais parfois plus). Pour découper une police variable, vous devez alors supprimer les deltas inutiles.

À titre d'exemple spécifique, l'axe Occasionnel de Recursive prend les formes de lettres de «Linéaire» à «Occasionnel» en interpolant les points de contrôle vectoriel entre deux extrêmes: en gros, un dessin normal et un dessin au pinceau. L'animation de glyphe esperluette ci-dessous montre la mécanique en action: les points de contrôle dessinent des coins arrondis à un extrême et se déplacent vers des coins carrés à l'autre extrémité.

En règle générale, chaque axe ajouté double le nombre de dessins qui doivent exister pour faire fonctionner une police variable. Parfois, le nombre est plus ou moins – L'axe de pondération de la récursive nécessite 3 emplacements (triplant le nombre de dessins), tandis que son axe cursif ne nécessite aucun emplacement supplémentaire, mais active simplement différents glyphes alternatifs qui existent déjà à chaque emplacement. Mais, le calcul général est le suivant: si vous n'utilisez opt dans moins d'axes d'une police variable, vous obtiendrez généralement un fichier plus petit.

Lorsque vous utilisez l'API Google Fonts, vous êtes en fait optant pour chaque axe. De cette façon, au lieu de commencer avec un gros fichier et de le réduire, vous pouvez choisir les parties que vous voulez.

Balises d'axes variables

Si vous envisagez d'utiliser l'API Google Fonts, vous devez d'abord connaître les abréviations des axes de police afin de pouvoir les utiliser vous-même.

Les axes de police variables ont des abréviations sous la forme de «balises» à quatre lettres. Ils sont en minuscules pour les axes standard et en majuscules pour les axes inventés par des concepteurs de caractères individuels (également appelés axes «personnalisés» ou «privés»).

Il existe actuellement cinq axes standard qu'une police peut inclure:

  • wght – Poids, pour contrôler la légèreté et l'audace
  • wdth – Largeur, pour contrôler la largeur globale des lettres
  • opsz – Taille optique, pour contrôler les ajustements de la conception pour une meilleure lisibilité à différentes tailles
  • ital – Italique, généralement pour basculer entre les conceptions verticales / italiques séparées
  • slnt – Inclinaison, généralement pour contrôler les conceptions verticales à inclinées avec des valeurs intermédiaires disponibles

Les axes personnalisés peuvent être presque n'importe quoi. Récursif en comprend trois – Monospace (MONO), Décontractée (CASL) et Cursive (CRSV) – plus deux axes standard, wght et slnt.

Principes de base de l'API Google Fonts

Lorsque vous configurez une police incorporée à partir de l'interface Google Fonts, cela vous donne un peu de HTML ou CSS qui inclut une URL, et cela appelle finalement un document CSS qui comprend un ou plusieurs @font-face règles. Cela inclut des éléments tels que les noms de polices ainsi que des liens vers des fichiers de polices sur les serveurs Google.

Cette URL est en fait un moyen d'appeler l'API Google Fonts et a beaucoup plus de puissance que vous ne le pensez. Il comporte quelques parties de base:

  1. L'URL principale, spécifiant l'API (https://fonts.googleapis.com/css2)
  2. Détails sur les polices que vous demandez dans un ou plusieurs family paramètres
  3. UNE font-display propriété dans un display paramètre

À titre d'exemple, disons que nous voulons le poids régulier de Récursif (dans le Sans linéaire sous-famille). Voici l'URL que nous utiliserions avec notre CSS @import:

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

Ou nous pouvons le relier dans le de notre HTML:

Une fois que cela est en place, nous pouvons commencer à appliquer la police en CSS:

body {
  font-family: 'Recursive', sans-serif;
}

Il existe une valeur par défaut pour chaque axe:

  • MONO 0 (Sans / proportionnel)
  • CASL 0 (linéaire / normal)
  • wght 400 (régulier)
  • slnt 0 (debout)
  • CRSV 0 (minuscules romaines / non cursives)

Choisissez votre aventure: styles ou axes

L'API Google Fonts vous offre deux façons de demander des parties de polices variables:

  1. Liste des axes et des valeurs spécifiques non par défaut que vous souhaitez en tirer
  2. Liste des axes et des plages que vous souhaitez en tirer

Obtenir des styles de police spécifiques

Les styles de police sont demandés en ajoutant des paramètres à l'URL de Google Fonts. Pour conserver les valeurs par défaut sur tous les axes mais utiliser un style Casual, vous pouvez effectuer la requête Recursive:(email protected) (cela servira Recursive Sans Casual Regular). Pour rendre cette récursive Mono Casual Regular, spécifiez deux axes avant le @ puis leurs valeurs respectives (mais rappelez-vous que les axes personnalisés ont des balises majuscules):

https://fonts.googleapis.com/css2?family=Recursive:CASL,(email protected),1&display=swap

Pour demander à la fois Regular et Bold, il vous suffit de mettre à jour l'appel de la famille à Recursive:(email protected);700, en ajoutant le wght axe et valeurs spécifiques dessus:

https://fonts.googleapis.com/css2?family=Recursive:(email protected);700&display=swap

Une chose très utile à propos de Google Fonts est que vous pouvez demander un tas de styles individuels à l'API, et dans la mesure du possible, il servira en fait des polices variables qui couvrent tous ces styles demandés, plutôt que des fichiers de polices séparés pour chaque style. Cela est vrai même lorsque vous demandez des emplacements spécifiques, plutôt que des plages d'axes variables – s'ils peuvent servir un fichier de police plus petit pour votre demande d'API, ils le feront probablement.

Étant donné que les polices variables peuvent être coupées de manière plus flexible et plus efficace à l'avenir, les fichiers servis pour des demandes d'API données deviendront probablement plus intelligents avec le temps. Ainsi, pour les sites de production, il peut être préférable de demander exactement les styles dont vous avez besoin.

Là où cela devient intéressant, cependant, c'est que vous pouvez demander également des axes variables. Cela vous permet de conserver une grande flexibilité de conception sans modifier vos demandes de police chaque fois que vous souhaitez utiliser un nouveau style.

Obtenir une police variable complète avec l'API Google Fonts

L'API Google Fonts cherche à réduire la taille des polices en permettant aux utilisateurs de choisir uniquement les styles et les axes qu'ils souhaitent. Mais, pour profiter pleinement des avantages des polices variables (plus de flexibilité de conception dans moins de fichiers), vous devez utiliser un ou plusieurs axes. Donc, au lieu de demander des styles uniques avec Recursive:(email protected);700, vous pouvez plutôt demander ce plein gamme avec Recursive:(email protected) (en changeant de ; à .. pour indiquer une plage), ou même s'étendre à la plage de poids récursive complète avec Recursive:(email protected) (ce qui ajoute très peu de taille de fichier, mais beaucoup de design supplémentaire oomph).

Vous pouvez ajouter des axes supplémentaires en les répertoriant par ordre alphabétique (avec les axes standard minuscules en premier, puis les axes personnalisés en majuscules) avant le @, puis en spécifiant leurs valeurs ou plages par la suite dans le même ordre. Par exemple, pour ajouter l'axe MONO et l'axe de poids, vous pouvez utiliser Recursive:wght,(email protected),0..1 comme requête de police.

Ou, pour obtenir la police variable complète, vous pouvez utiliser l'URL suivante:

https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,(email protected),300..1000,0..1,0..1,0..1&display=swap

Bien sûr, vous devez toujours mettre cela dans un lien HTML, comme ceci:

Personnalisez-le davantage pour équilibrer la flexibilité et la taille du fichier

S'il peut être tentant d'utiliser chaque axe d'une police variable, il est bon de se rappeler que chaque axe supplémentaire ajoute à la taille globale des fichiers. Donc, si vous ne vous attendez vraiment pas à utiliser un axe, il est logique de ne pas le faire. Vous pouvez toujours l'ajouter plus tard.

Supposons que vous souhaitiez les styles Mono Casual de Recursive dans une gamme de poids. Vous pouvez utiliser Recursive: wght, CASL, (email protected), 1,1 comme ceci:

Vous pouvez, bien sûr, ajouter plusieurs familles de polices à un appel API avec des family paramètres. Assurez-vous simplement que les polices sont classées par ordre alphabétique du nom de famille.

Utilisation de polices variables

Les axes standard peuvent tous être contrôlés avec les propriétés CSS existantes. Par exemple, si vous avez une police variable avec une plage de poids, vous pouvez spécifier un poids spécifique avec font-weight: 425;. Une inclinaison spécifique peut être demandée avec font-style: oblique 9deg;. Tous les axes peuvent être contrôlés avec font-variation-settings. Donc, si vous voulez un style Mono Casual très lourd de Recursive (en supposant que vous avez appelé la famille complète comme indiqué ci-dessus), vous pouvez utiliser le CSS suivant:

body {
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Quelque chose de bon à savoir: font-variation-settings est beaucoup plus agréable à utiliser avec les propriétés personnalisées CSS.

Une autre chose utile à savoir est que, pendant que vous devrait pouvoir activer oblique avec font-style: italic; ou font-style: oblique Xdeg;, la prise en charge du navigateur pour cela est incohérente (du moins au moment de la rédaction de cet article), il est donc utile d'utiliser font-variation-settings également pour l’axe incliné.

Vous pouvez lire plus de détails sur la conception avec des polices variables sur VariableFonts.io et dans l'excellente collection d'articles CSS-Tricks sur les polices variables.

Notes ringardes sur les performances des polices variables

Si vous deviez utiliser les 64 styles prédéfinis de récursif en tant que fichiers WOFF2 séparés (avec leur jeu de caractères complet et non sous-ensemble), le total serait d'environ 6,4 Mo. En revanche, vous pourriez avoir autant de gamme stylistique (et tout le reste) à seulement 537 Ko. Bien sûr, c'est une comparaison légèrement absurde – vous n'utiliseriez presque jamais en fait 64 styles sur une seule page Web, surtout pas avec leurs jeux de caractères complets (et si vous le faites, vous devriez utiliser des sous-ensembles et une plage unicode).

Une meilleure comparaison est récursive avec une plage d'axe par rapport aux styles dans cette plage d'axes. Lors de mes tests, un fichier WOFF2 récursif qui est un sous-ensemble du jeu de caractères "Google Fonts Latin Basic" (y compris uniquement les caractères pour couvrir les langues anglaises et d'Europe occidentale), y compris la plage de poids 300-1000 complète (et tous les autres axes "épinglés" à leurs valeurs par défaut) est de 60 Ko. Pendant ce temps, un seul style avec le même sous-ensemble fait 25 Ko. Ainsi, si vous n'utilisez que trois poids de récursif, vous pouvez économiser environ 15 Ko en utilisant la police variable au lieu de fichiers individuels.

La police variable complète en tant que sous-ensemble WOFF2 horloges à 281 Ko, ce qui est beaucoup pour une police, mais pas tellement si vous la comparez au poids d'une grande image JPEG. Donc, si vous supposez que les styles individuels font environ 25 Ko, si vous prévoyez d'utiliser plus de 11 styles, vous feriez mieux d'utiliser la police variable.

Ce type de mathématiques est principalement un exercice académique pour deux grandes raisons:

  1. Les polices variables ne se limitent pas à la taille des fichiers. Le plus grand avantage est qu'elles vous permettent de juste concevoir, en choisissant les poids de police exacts (ou d'autres styles) que vous souhaitez. Une police a-t-elle l'air un peu trop claire? Faites monter le font-weight un peu, disons de 400 à 425!
  2. Plus important encore (comme expliqué précédemment), si vous demandez des styles de police ou des axes variables à Google Fonts, ils se chargent du gros du travail pour vous, en envoyant les polices qu'ils jugent les plus performantes et utiles en fonction de votre demande d'API et des navigateurs auxquels les visiteurs accèdent. votre site à partir de.

Ainsi, vous n'avez pas vraiment besoin d'aller télécharger les polices renvoyées par l'API Google Fonts pour comparer leurs tailles de fichiers. Néanmoins, il vaut la peine de comprendre les compromis généraux afin que vous puissiez décider au mieux quand opter pour les axes variables et quand vous limiter à quelques styles.

Et après?

Lancez CodePen et essayez l'API! Pour CodePen, vous voudrez probablement utiliser le CSS @import syntaxe, comme celle-ci dans le panneau CSS:

@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,(email protected),0..1,0..1,-15..0,300..1000&display=swap');

Il est apparemment préférable d'utiliser la syntaxe des liens HTML pour éviter de bloquer les téléchargements parallèles d'autres ressources. Dans CodePen, vous ouvrirez les paramètres du stylet, sélectionnez HTML, puis déposez le dans les paramètres de la tête HTML.

Ou, hé, vous pouvez simplement charger mon CodePen et expérimenter là-bas:

Prendre un raccourci de configuration d'API

Si vous voulez éviter la complexité de la détermination des appels d'API exacts et que vous cherchez à opter pour des axes variables de récursif et à faire des appels d'API semi-avancés, j'ai mis en place un outil de configuration simple sur le minisite récursif (cliquez sur le bouton "Obtenir récursif" bouton). Cela vous permet de sélectionner rapidement les styles épinglés ou les plages de variables que vous souhaitez utiliser, et donne même des estimations de la taille de fichier résultante. Mais cela n'expose que certaines fonctionnalités de l'API et vous pouvez être plus précis si vous le souhaitez. C'est ma tentative d'amener les gens à utiliser la gamme la plus stylistique dans les plus petits fichiers, en tenant compte des limitations actuelles de l'instanciation de polices variables.

Utiliser récursif pour le code

En outre, Recursive est en fait conçu d'abord comme une police à utiliser pour le code. Vous pouvez l'utiliser sur CodePen via les paramètres de votre compte. Mieux encore, vous pouvez télécharger et utiliser la dernière version récursive de GitHub et la configurer dans n'importe quel éditeur de code.

Explorez plus de polices!

Le document de l'API Google Fonts comprend utilement une liste (partielle) de polices variables ainsi que des détails sur leurs plages d'axes disponibles. Certains de mes favoris avec des axes au-delà du poids sont Crimson Pro (ital, wght), Work Sans (ital, wght), Encode Sans (wdth, wght) et Inter (slnt, wght). Vous pouvez également filtrer les polices Google pour n'afficher que les polices variables, bien que la plupart de ces résultats n'aient qu'un axe de pondération (toujours sympa et utile, mais ne nécessite pas de configuration d'URL personnalisée).

Certaines polices variables plus étonnantes arrivent sur Google Fonts. Certains que j'attends particulièrement avec impatience sont:

  • Fraunces: «Un affichage, une police à empattement souple« Old Style »inspirée des manières des polices du début du XXe siècle telles que Windsor, Souvenir et la série Cooper»
  • Roboto Flex: comme Roboto, mais avec des gammes étendues de poids, de largeur et de taille optique
  • Crispy: une police d'affichage variable créative, angulaire et ultra-flexible
  • Science Gothic: un sans carré "basé étroitement sur Bank Gothic, une police du début des années 1930 – mais une minuscule, des axes de conception et une couverture linguistique ont été ajoutés"

Et oui, vous pouvez absolument télécharger et auto-héberger ces polices si vous souhaitez les utiliser sur des projets aujourd'hui. Mais restez à l'écoute de Google Fonts pour des polices plus flexibles à venir!

Bien sûr, le monde du type est beaucoup plus gros que les polices open source. Il existe un tas de fonderies de caractères incroyables qui travaillent sur des polices passionnantes qui repoussent les limites, et beaucoup d'entre elles explorent également de nouveaux territoires passionnants dans les polices variables. Beaucoup ont tendance à adopter d'autres approches en matière de licence, mais pour le bon projet, une bonne police de caractères peut être une très bonne valeur (je suis évidemment biaisé, mais pour un argument simple, regardez à quel point la typographie renforce les marques comme Apple, Stripe, Google, IBM, Figma, Slack et bien d'autres). Si vous voulez vous régaler de plus de possibilités et que vous ne connaissez pas déjà ces noms, jetez un œil à DJR, OHno, Grilli, XYZ, Dinamo, Typotheque, Underware, Bold Monday et les nombreux projets WIP très amusants sur Future Polices. (J'ai laissé de côté un tas d'autres fonderies incroyables, mais chacune d'elles a fait des choses que j'aime particulièrement, et ce n'est pas un répertoire de fonderies de types.)

Enfin, quelques plugs sans vergogne pour moi-même: si vous souhaitez me soutenir et soutenir mon travail au-delà de Recursive, veuillez envisager de consulter mon WIP polyvalent sans-serif Name Sans, de vous inscrire à ma (très) rare newsletter, et de me donner un suivi sur Instagram.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *