Share
Les polices de caractères variables ont été développées conjointement par les quatre plus grandes entreprises de technologie impliquées dans la conception de caractères: Apple, Google, Microsoft et Adobe. Comme leur nom l’indique, les polices de caractères variables permettent aux concepteurs de dériver un nombre illimité de variantes de polices à partir du même fichier de polices. De cette façon, il devient possible d’ajuster la police de caractères à différents appareils, fenêtres d’affichage, orientations et autres contraintes de conception..
Les polices variables réduisent considérablement les limitations des formats de police actuels. Les polices Web d'aujourd'hui sont inflexibles et ne s'adaptent pas très bien. ils ne nous fournissent que des styles fixes portant des noms tels que «Light», «Bold» ou «Extra Bold». Il y a même des polices de caractères qui n'ont qu'une variante de poids ou d'inclinaison. Avec des polices variables, cependant, nous avons accès à une flexibilité infinie de poids, d'inclinaison, de hauteur x, de dalles, d'arrondi et d'autres attributs typographiques..
Mieux encore, les polices variables améliorent les performances. Les polices Web telles que nous les connaissons ont besoin que chaque variante de police soit stockée dans un fichier séparé. Par exemple, voici à quoi ressemble le dossier de la police Web Roboto:
Contenu du dossier de polices Web RobotoLes polices variables utilisent un seul fichier de polices que le navigateur ne doit charger qu'une seule fois. Lors de son chargement, il peut servir toutes les variantes à partir de ce seul binaire.
Donc, voici une brève comparaison:
Comme vous pouvez déjà l'imaginer, nos options typographiques s'agrandissent incroyablement avec des polices variables.
Alors, quel format de fichier les polices variables utilisent-elles? Selon les documents officiels:
«Les polices OpenType peuvent avoir l'extension .OTF ou .TTF, en fonction du type de structure de la police et du désir du créateur en matière de compatibilité sur des systèmes sans support OpenType natif.»
Pour être tout à fait précis, les polices de caractères variables ont été introduites dans la version 1.8 de la spécification du fichier de polices OpenType. OpenType est une extension du format de police TrueType. Par conséquent, les polices variables sont disponibles au format .otf ou .ttf des dossiers.
La nouvelle spécification de fichier de police OpenType est fournie avec une nouvelle technologie appelée Variations de police OpenType qui nous permet d’interpoler la police le long de nombreux axes de conception (jusqu’à 64 000 selon le blog Adobe Typekit)..
La spécification OpenType 1.8 définit cinq balises d'axe enregistrées:
Accentsconagua
De plus, les concepteurs de caractères peuvent également définir des axes personnalisés ainsi que leurs propres balises à quatre caractères dans la table «nom» du fichier de police..
Ci-dessous, vous pouvez voir un excellent exemple du fonctionnement des axes de conception (extrait de l'article de John Hudson sur Medium.com, que Typekit appelle l'annonce non officielle de polices variables). Il présente une police de caractères variable à trois axes avec des axes de poids, de largeur et de taille optique:
John HudsonLe glyphe rouge au milieu représente l'ensemble des contours stockés dans la police, les glyphes verts représentent les extrêmes des trois axes et les glyphes orange représentent les positions des coins..
Le cube entier représente l'espace de conception auquel nous avons accès si nous utilisons cette police de variable à trois axes. C'est un cube uniquement parce que la police a trois dimensions (poids, largeur, taille optique). Avec moins d'axes, nous descendions vers un rectangle (2 axes) ou une ligne (1 axe) et avec plus d'axes, nous nous dirigions vers le haut dans un hyperespace multidimensionnel..
Et bien sûr, une police de caractères variable à 3 axes de la vie réelle ne serait pas nécessairement un cube, mais plutôt un cuboïde rectangulaire, car les différents axes n'ont généralement pas la même longueur..
Les polices variables permettent toujours aux concepteurs de types de définir des variantes de police spécifiques à des instances nommées parmi un nombre illimité d'options. Par exemple, le prototype de police à polices variables d’Adobe contient deux axes (poids et contraste) et huit instances nommées (Extra léger, Léger, Régulier, Semi-gras, Gras, Noir, Noir Contraste moyen, Contraste élevé Noir)..
Les instances nommées sont plus importantes si vous souhaitez utiliser une police de variable avec des programmes de conception tels que Adobe Illustrator. Sur le Web, nous pouvons facilement générer n’importe quelle instance (nommée ou non) avec CSS (par exemple, dans la police Adobe Variable Font, l’instance nommée Extra Light prend la valeur minimale des axes poids et contraste)..
Nous pouvons ajouter des polices variables à un site Web à l'aide de la règle @ font-face en haut du fichier CSS..
Par exemple, nous pouvons ajouter la police de variable Avenir Next avec la règle CSS suivante:
@ font-face font-family: "Avenir Next Variable"; src: url ("AvenirNext_Variable.ttf") format ("TrueType"); Vous pouvez trouver plus de polices de caractères variables sur le site Web Axis Praxis (ce dernier dispose également d'un terrain de jeu pour les polices de caractères variables), sur les pages GitHub de différentes sociétés de création de types (par exemple MonoType, Type Network) et Typekit a également commencé à publier les versions de polices variables. de leurs familles les plus populaires Adobe Originals.
Remarque: toutes les polices OpenType que vous trouverez sur le Web ne sont pas des polices variables (elles ont été introduites uniquement avec la version 1.8).
Pour définir les variations de police, nous pouvons utiliser le font-variation-settings Propriété CSS introduite avec le module de polices CSS de niveau 4. Il s'agit d'une propriété de bas niveau qui nous permet de contrôler les polices de variables en spécifiant une valeur pour chaque axe..
La police de variable Avenir Next contient deux axes de conception: poids et largeur, les deux étant des axes enregistrés. Avenir Next dispose également de huit instances nommées (régulière, moyenne, gras, lourd, condensé, moyen condensé, gras condensé, lourd condensé)..
Avenir Next Bold CondensedLe code CSS complet (appartenant à une variante de police aléatoire sans nom) se présente comme suit:
body font-family: "Avenir Next Variable"; couleur: rgb (0, 0, 0); taille de police: 148px; font-variation-settings: 'wght' 631.164, 'wdth' 88.6799;
Nous pouvons utiliser n'importe quelle valeur (même des nombres flottants) pour les axes compris entre les valeurs minimale et maximale. Dans le cas d'Avenir Next, nous pouvons utiliser la plage [400, 900] pour le poids et la plage [75, 100] pour l'axe de la largeur..
Où trouver les gammes? Les fichiers de police contiennent les tables de variations de police (fvar) contenant les données nécessaires. Cependant, pour accéder à ces informations, nous devons afficher le contenu du fichier de police avec un outil tel que FontView. Parfois, la documentation de la police contient les plages, mais malheureusement, ce n'est pas toujours le cas. La bonne nouvelle est que le site Web Axis Praxis contient les valeurs min-max pour toutes les polices de variables qu'il propose..
Decovar est l’une des polices de variables les plus polyvalentes au monde. Vous pouvez le trouver sur Axis Praxis, sur GitHub, et une page de démonstration sur le site Web de TypeNetwork. Decovar contient un axe (poids) et quatorze axes personnalisés, ainsi que dix-sept instances nommées..
Parmi les documents GitHub de Decovar, voici quelques variantes que nous pouvons obtenir avec cette police de variables à 15 axes:
Le CSS que nous devons utiliser est similaire à l'exemple précédent. Ici, nous devons définir l’ensemble des quinze axes (en ligne, cisaillé, dalle arrondie, rayures, terminaison du ver, squelette en ligne, terminaison en ligne ouverte, terminaison en ligne, ver, poids, évasé, arrondi, squelette du ver, dalle, bifurquée).
div font-family: Decovar; Couleur blanche; couleur de fond: rgb (0, 162, 215); taille de police: 157.12px; text-align: left; rembourrage en haut: 20px; font-variation-settings: "INLN" 285.094, "TSHR" 346.594, "TRSB" 786.377, "SSTR" 84.268, "TWRM" 200, "SINL" 84.268, "TOIL" 0, "TINL" 91.983, "WORM" 0 , 'wght' 400, 'TFLR' 0, 'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
Remarque: nous devons spécifier une valeur pour tous les axes de la font-variation-settings propriété, même ceux que nous ne voulons pas utiliser.
En cas de Decovar, nous pouvons utiliser 0 comme valeur pour les axes qui ne nous intéressent pas; ceux-ci seront rendus avec la valeur par défaut. Ce n'est toutefois pas toujours le cas, car cela dépend des plages utilisées par la police pour les différents axes. Decovar est facile, car il utilise une plage de 0-1000 pour tous les axes et 0 est la valeur par défaut pour tous les axes..
Vous pouvez générer similaire font-variation-settings déclarations avec Axis Praxis, vous n’avez pas à calculer vous-même les valeurs. Le CSS ci-dessus génère la variante de police suivante:
Variante de police personnalisée Decovarle font-variation-settings property est une propriété de bas niveau et, selon les recommandations du W3C, elle ne doit être utilisée que si d'autres méthodes ne sont pas disponibles. Qu'est-ce que cela signifie exactement?
Selon les spécifications CSS 4, nous pourrons contrôler à l'avenir les axes enregistrés avec des propriétés CSS de niveau supérieur, à savoir:
poids de la police (contrôlera le wght axe)étirement de la police (contrôlera le avec axe)le style de police (contrôlera le slnt et ital axes)dimensionnement optique des polices (contrôlera le opsz axe)Les trois premières propriétés existent depuis CSS2, mais les spécifications CSS4 étendent leur utilisation. Nous pourrons les utiliser non seulement avec des mots-clés prédéfinis (par exemple,. Ordinaire ou audacieux pour poids de la police) ou des nombres arrondis (par exemple. 400, 600, 800, etc.), mais aussi avec tous les nombres sur une échelle prédéfinie (par exemple, poids de la police sera compris entre 1 et 1000 et étirement de la police varie entre 50% et 200%).
Ces fonctionnalités en sont encore à la phase expérimentale. Donc, pour le moment, le plus raisonnable est de continuer à utiliser font-variation-settings, comme actuellement c'est la propriété la plus stable pour accéder aux axes des polices de variables.
Comme les polices variables sont encore très récentes, la prise en charge du navigateur n’est pas encore parfaite. Les dernières versions de Chrome et Safari les prennent déjà en charge, mais Edge et Firefox restent à la traîne (cependant, des polices variables sont déjà disponibles dans Firefox Nightly et Firefox Developer Edition). Depuis la version d'octobre 2017, Photoshop et Illustrator prennent également en charge les polices de caractères variables..
Nous pouvons nous attendre à ce que les polices de caractères variables apportent des changements incroyables dans le monde de la typographie Web. Comme il reçoit de plus en plus de soutien, il est temps de plonger dans l'apprentissage et l'expérimentation. Découvrez les ressources suivantes:
