Migrer vers les polices variables

1. Présentation

Dernière mise à jour : 04/04/2022

Adoptez la variabilité dynamique de votre interface utilisateur avec des polices variables, qui permettront une plus grande réactivité dans les mises en page, les thèmes et l'accessibilité, tout en rendant vos applications plus rapides !

Ce que vous allez apprendre

En quoi consistent les polices variables ?
Comment personnaliser le type grâce aux polices variables ?
Comment appliquer des polices variables à vos créations ?
Comment implémenter les polices variables avec l'API Google Fonts et dans les CSS ?

Prérequis

Pour cet atelier, nous nous appuierons sur certains principes de conception de base.

Connaissances des échelles des types
Connaissances de Figma
Connaissances de base en HTML et en CSS

Prérequis

Compte Figma
Fichier Figma de Designlab
Éditeur de code de votre choix pour le Web

2. Premiers pas

Prérequis

Pour commencer, vous devez accéder au fichier Figma de Designlab. Celui-ci contient tout ce dont vous avez besoin pour cet atelier. Vous pouvez télécharger et importer le fichier ou le dupliquer à partir de la communauté Figma.

Tout d'abord, connectez-vous à Figma ou créez un compte.

Dupliquer à partir de la communauté Figma

Accédez au fichier Migrer vers les polices variables ou recherchez une migration vers des polices variables dans la communauté Figma Cliquez sur Dupliquer dans l'angle supérieur droit pour copier le fichier dans vos dossiers.

Disposition des fichiers

Vous remarquerez à l'ouverture qu'il s'agit d'un fichier autonome qui commence par une introduction. Chaque section se situe sur une ligne de plans de travail reliés entre eux, et contient des concepts fondamentaux suivis d'exercices. Les sections et les exercices s'appuient les uns sur les autres et doivent être suivis dans l'ordre.

Cet atelier de programmation vous présente en détail ces concepts et exercices. Lisez la suite de cet atelier pour en savoir davantage sur les nouvelles fonctionnalités Material You.

À partir du plan de travail Intro, des boutons permettent de relier les plans dans l'ordre. Pour accéder au lien, cliquez sur le bouton.

Vérifier la présence de police variable

Avant de commencer, assurez-vous d'avoir une police variable. Ce fichier utilise Roboto Flex, déjà disponible dans Figma. Vous pouvez aussi télécharger la police sur fonts.google.com.

3. En quoi consistent les polices variables ?

Les polices variables sont un nouveau format de police innovant qui permet aux utilisateurs de contrôler leur type et leurs icônes. Roboto Serif et Roboto Flex sont de nouvelles polices de caractères repensées pour la technologie de police variable, et comportent de nombreux axes.

Expression esthétique et axes

Les graphistes ne sont plus limités aux anciens styles stricts, comme les styles standard, gras, italique, etc. Les variables disponibles dans les polices variables sont contrôlées par des axes ou des instances. Si le graphiste du type le souhaite, toute variable de la conception du type peut être affectée à un axe contrôlable par l'utilisateur. Les axes courants sont les suivants : italique, taille optique, inclinaison, épaisseur et largeur. Ces cinq axes sont des axes enregistrés dans CSS.

Avantages

Les polices variables vous permettent d'importer plusieurs styles dans un seul fichier de polices. Les sites Web sont ainsi plus petits, plus durables et plus rapides, et le graphiste bénéficie d'un plus grand contrôle expressif.

4. Utilisation de polices variables dans la conception

Modification des axes

Passons en revue tous les paramètres (ou axes) disponibles, ainsi que leur effet. Sélectionnez le type sur la droite, puis ouvrez la fenêtre modale "Détails du type" (icône Plus) pour ouvrir les curseurs des axes et parcourir chaque paramètre.

L'épaisseur définit l'épaisseur d'une lettre. Vous obtenez une plage complète et continue d'épaisseurs de trait.

La largeur correspond à l'espace horizontal occupé par les caractères d'une police.

Ajustez le style de "vertical" à "incliné", également connu des typographes sous le nom de style "oblique". Bien que rare, l'inclinaison peut fonctionner dans l'autre sens. On appelle ça un style "incliné vers l'arrière" (backslanted) ou "oblique inversé" (reverse oblique).

Le niveau est un modificateur secondaire de l'épaisseur optique d'une police de caractères, et est indépendant de l'axe "épaisseur". L'épaisseur et le niveau ont une incidence sur l'épaisseur d'une lettre, mais les ajustements avec le niveau sont bien plus précis.

Taille optique. Adaptez le style à des tailles de texte spécifiques, spécifiées en points. Pour les tailles plus petites, les lettres sont généralement optimisées pour les rendre plus lisibles, avec un espacement/crénage plus large et des traits plus épais avec moins de détails. Pour les tailles plus grandes, les lettres sont généralement optimisées pour les titres avec des traits plus fins et des formes plus détaillées, ainsi qu'avec des épaisseurs et des largeurs plus extrêmes.

Consultez la démonstration des polices variables pour jouer avec les axes de polices variables en dehors de Figma.

5. Amélioration du style

Si vous travaillez avec un guide de style de marque, vous pouvez avoir une échelle de caractères établie pour informer les contraintes typographiques. L'utilisation de polices variables ne signifie pas qu'il faille mettre de côté cette cohérence. Cela permet d'affiner davantage votre flexibilité d'échelle des types (par exemple, pour augmenter l'épaisseur des niveaux sur un fond sombre) dans un seul fichier.

Bien qu'une échelle de type puisse se composer de plusieurs familles de polices, nous n'en utiliserons ici qu'une seule pour personnaliser une version condensée de l'échelle de type par défaut Material.

Commençons par personnaliser l'échelle de type avec le corps du texte. Cela nous permet de définir d'abord la taille du type de base du site et d'effectuer un ajustement optique à partir de celle-ci. La valeur par défaut de Body Large est de 18 pt, sélectionnée et définie sur Roboto Flex. Pour améliorer la lisibilité, il fallait mettre à jour la taille et l'épaisseur de la police, ce qui impliquait un autre fichier de police, mais nous pouvons désormais affiner certains axes. Ajustez la taille optique, le niveau et l'épaisseur.
Continuez avec le libellé. Les libellés sont plus utiles et utilisés dans des contextes plus courts, comme les boutons. Effectuez un ajustement optique du niveau pour que le libellé s'affiche correctement sur les conteneurs de boutons et les chips.
Continuez l'affinage à l'aide des options Titre, Titre principal et Affichage. Les trois sont utilisées pour des textes plus courts, d'accentuation moyenne à forte, comme les titres de pages et les sections. Les champs Titre principal et Affichage peuvent être plus expressifs en raison de leur taille et de leur grande accentuation. N'hésitez pas à jouer avec tous les axes.
Une fois le type sélectionné, cliquez sur les quatre points, puis sur Ajouter (+) pour définir un style de texte. Ainsi, les paramètres de type réutilisables sont cohérents.

Vous pouvez générer l'échelle de type Material par défaut en tant que style Figma avec Material Theme Builder ou dupliquer le kit de conception M3.

6. Appliqué à l'interface utilisateur

Une fois l'échelle d'un type configuré, nous allons l'appliquer aux éléments d'interface utilisateur dans le code. Réfléchissez à la façon dont vous pouvez améliorer la lisibilité et la clarté grâce aux polices variables. Si vous avez configuré des styles Figma au cours de l'exercice précédent, vous pouvez les appliquer, puis mettre à jour les axes du style.

Examinez les éléments de l'interface utilisateur à gauche. La première fiche contient un type végétal, une description et des balises de catégorie, tandis que les autres fiches décrivent des instructions pour l'entretien des plantes. Le style végétal ayant un rôle à forte accentuation, utilisez notre style "titre principal". Définissez-le comme titre principal. Les fiches d'instructions ont également un titre, mais ils n'ont pas la même importance. Définissez-les donc comme titre.
Le détail du style végétal et le contenu de la fiche d'instructions peuvent se voir affecter le style "body large", tandis que les libellés de catégorie reçoivent le style "label large".
Testez différents rôles et ajustez les éléments de l'interface utilisateur, ainsi que votre échelle de types pour trouver le juste équilibre.

7. Implémentation dans le code

L'implémentation de polices variables dans du code avec CSS est une méthode similaire à celle utilisée pour toute police Web, qui utilise un service de livraison de polices pour charger la police et la personnaliser à l'aide de propriétés CSS.

Nous utiliserons le code HTML et les CSS pour l'implémentation, et non MWC ou un framework.

Polices variables sur Google Fonts

Google Fonts est un service de diffusion de polices qui vous permet d'implémenter facilement une multitude de polices, y compris des polices variables, sur votre site Web.

Explorez les polices variables disponibles en accédant à fonts.google.com. Sous "Rechercher", sélectionnez Afficher uniquement les polices variables pour filtrer. Les polices variables incluent un playground au bas de la page, où vous pouvez définir des curseurs pour chacun des axes disponibles dans la famille.

Style avec CSS

Toutes les polices ne disposent pas du même nombre d'axes à personnaliser. Actuellement, les options "Épaisseur", "Largeur", "Inclinaison", "Italique" et "Taille optique" sont les plus courantes.

Ces paramètres peuvent être définis avec des propriétés de police CSS de base qui existaient avant les polices variables. Bien que tout ne soit pas encore en disponibilité générale (en mai 2022), tous les axes pourront être définis de manière fiable à l'aide de la nouvelle propriété font-variation-settings.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*Les styles "incliné" (slnt) et "italique" (ital) ne sont pas fiables.

8. Importation avec l'API Google Fonts

Nous n'utilisons que Roboto, mais toutes les polices disponibles sont accessibles sur fonts.google.com.

Nous continuerons à utiliser Roboto pour le reste de l'atelier de programmation et nous allons personnaliser le type dans les fiches suivantes, conformément à l'exercice précédent.

Copiez ce code contenant l'exemple d'interface utilisateur de la fiche dans l'IDE Web de votre choix.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */

/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

Notez les spécifications de style définies lors du dernier exercice pour le titre principal, le titre, le corps et le libellé. En gardant cela à l'esprit, accédez à la page Roboto Flex. Définissez les curseurs pour qu'ils correspondent aux spécifications définies dans Figma, puis cliquez sur Sélectionner ce style pour ajouter des curseurs dans le panneau latéral.
Dans le panneau, sous "Styles sélectionnés", recherchez "Utiliser sur le Web". Pour ajouter la police à votre code, vous pouvez procéder de deux manières différentes : <link> ou @import. Vous n'avez besoin que d'une manière. Sélectionnons @import.
Copiez @import au point-virgule et collez-le dans les tags de style après le commentaire importé.
Comme Roboto Flex est la seule police utilisée, configurez le corps pour appeler la famille de polices en ajoutant les "règles CSS pour spécifier les familles" incluses dans le code d'importation.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

La police et les styles sélectionnés sont importés, mais l'utilisation des plages d'axes vous permet d'utiliser la plage de styles continue plutôt que les styles individuels. Pour créer une plage, associez deux valeurs avec .. (par exemple, 100..900). Veillez à n'ajouter que des plages qui existent dans les curseurs de la police, sans quoi elle ne se chargera pas correctement.

Cette approche est particulièrement adaptée pour des transitions fluides et des tests dans le navigateur, car elle charge toute la plage et accroît la demande de téléchargement.

9. Propriétés des polices variables CSS

Une fois la police importée, revenez à Figma pour extraire des propriétés CSS et les examiner à l'aide de la propriété CSS font-variation-settings.

En commençant par le h1 des titres principaux sélectionné dans le panneau de droite, sélectionnez l'onglet Inspecter en haut. Vous basculez ainsi le panneau sur le mode d'inspection du code pour le transfert en développement. Le code correspond à la dernière section.
Si ce n'est pas déjà fait, sélectionnez CSS dans le menu déroulant du format. Les attributs standards, s'ils sont utilisés, sont répertoriés (font-weight, font-stretch, font-style, font-optical-sizing), suivis du font-variation-settings de bas niveau qui contient des axes personnalisés non enregistrés. Utilisez d'abord les attributs standards avant de passer à font-variation-settings.

Figma utilise des paramètres de variation de police pour la largeur (wdth) au lieu de la valeur "font-stretch".

Copiez ce code CSS associé au type pour appliquer un style à notre sélecteur h1.

h1 {
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

Le style du titre de la fiche d'instructions peut être copié dans h2. Procédez de la même manière pour le corps du texte, en copiant dans p. Les styles de libellé peuvent être copiés dans .label.

10. Félicitations

Félicitations ! Vous avez adopté les polices variables, appris à les utiliser dans vos créations et à les implémenter sur le Web.

Si vous avez des questions, n'hésitez pas à nous contacter à tout moment sur la page @MaterialDesign sur Twitter.

D'autres tutoriels et contenus sur la conception seront bientôt disponibles sur youtube.com/MaterialDesign.