Introduction des polices variables

Bekah McDonald Partage des connaissances

Quelque part entre la mort de David Bowie et l'élection de Donald Trump, nous avons tous commencé à utiliser nos téléphones portables bien plus que nos ordinateurs de bureau pour accéder à l'internet.

En 2016, une année que beaucoup ont saluée comme l'une des "pires années de l'histoire" en raison des bouleversements politiques, des attaques terroristes, des catastrophes naturelles et des décès prématurés de célébrités, l'utilisation de l'internet mobile a dépassé celle de l'ordinateur de bureau pour la première fois. Et selon l'étude de cette année, l'utilisation de l'internet mobile a dépassé celle de l'ordinateur de bureau pour la première fois.

Selon le rapport de la Commission européenne, 63 % de l'ensemble du trafic internet provient aujourd'hui des mobiles et des tablettes. Avec le déploiement de la 5G, cette proportion devrait augmenter de manière exponentielle.Trois secondesRapport KPI de Wolfgang Digital

Les sites web doivent se charger rapidement. Nous le savons tous, mais Google a mené des recherches approfondies sur le sujet. Il a voulu savoir combien de temps en moyenne une personne est prête à attendre le chargement d'une page avant d'abandonner et d'aller voir ailleurs.

Il s'avère que c'est juste

.Les sites web se chargent encore plus lentement sur votre téléphone, en raison des vitesses de traitement, des limites de la mémoire et parfois de la vitesse de connexion à l'internet. Ainsi, maintenant que les gens accèdent à l'internet3 secondes

sur leur téléphone, il est d'autant plus important d'avoir un site rapide. Une page web qui se charge lentement peut vous faire perdre des clients.La taille compteprincipalement

Chez Taylor/Thomas, nous nous efforçons toujours de réduire au maximum le temps de chargement des pages, en utilisant tous les outils à notre disposition. Maintenir le temps de chargement en dessous des 3 secondes recommandées par Google peut parfois s'avérer difficile, en particulier lorsque le site utilise un large éventail de poids ou de styles de polices. En effet, pour chaque variante d'une police utilisée sur une page, votre site web doit charger un fichier de police distinct.

Si vous utilisez plusieurs graisses différentes, plus les versions italiques de chacune d'entre elles, votre page web va devoir charger un grand nombre de fichiers. Et cela va prendre du temps. De plus, s'ils ne se chargent pas assez rapidement, vos utilisateurs risquent d'apercevoir une police de caractères système de secours avant que le fichier de police préféré ne se charge.

Variations des polices OpenType

La technologie OpenType Font Variations est le fruit d'une collaboration sans précédent entre Microsoft, Google, Apple et Adobe, ainsi que de nombreux créateurs de caractères et fonderies.

Connue sous le nom de "polices variables", cette nouvelle technologie permet aux créateurs de caractères de définir les limites d'une police de caractères et de la laisser s'adapter à ces limites. Une police variable est une police dans laquelle l'équivalent de plusieurs polices individuelles est intégré dans un seul fichier.

Lorsque Fontsmith nous a fait part de son projet de microsite sur les polices de caractères variables, nous avons été très enthousiastes. Les polices variables étant encore très récentes, nous étions impatients de mettre la main sur cette technologie, mais nous voulions aussi voir dans quelle mesure elle améliorerait les temps de chargement de notre site web.

Plutôt que de charger chaque fichier de police séparément, nous pouvons maintenant charger un seul fichier qui contient

des variantes. Ainsi, alors que nous avions besoin de quatre fichiers auparavant - disons normal, italique, gras et gras italique - nous disposons désormais d'un seul fichier de police qui nous donne accès à toute la gamme de graisses, de largeurs et de styles disponibles. Sympa, non ?Fonctionnement des polices variablestous

Les variantes de chaque police sont contrôlées par ce que l'on appelle des axes. Chaque axe a une "étiquette", qui est une abréviation de quatre lettres par laquelle il est connu. Il existe cinq noms et étiquettes d'axes standardisés : poids (wght), largeur (wdth), inclinaison (slnt), taille optique (opsz) et italique (ital). Les concepteurs de caractères peuvent inclure n'importe lequel de ces éléments et créer leurs propres axes et balises.

L'italique peut être activé ou désactivé, mais la plupart des axes correspondent à une échelle décidée par le créateur de caractères. Par exemple, l'échelle de poids peut aller de 100 à 900. L'inclinaison peut aller de 0 à 10.

Nous avons donc non seulement des caractères légers, semi-gras et lourds, mais aussi tout ce qui se trouve entre les deux. Nous ne sommes plus limités par des poids prédéfinis, de sorte que si le gras est trop gras et que le moyen ne l'est pas assez, vous pouvez trouver le poids parfait entre les deux.

Certaines des polices variables de Fontsmith ont des axes personnalisés, ce qui signifie que nous pouvons décider exactement de la quantité de

L'ombre et le contour duFS PimlicoL'éclat de la lumière."Le potentiel de sélection dynamique d'instances personnalisées dans l'espace de conception des variations - ou espace de conception des variations, pour utiliser son nom technique - ouvre des perspectives passionnantes pour le réglage fin de la palette typographique et pour de nouveaux types de typographie réactive qui peuvent s'adapter pour présenter au mieux un contenu dynamique en fonction de l'appareil du lecteur, de l'orientation de l'écran ou même de la distance de lecture".FS Kitty

- John Hudson, Présentation des polices variables OpenType

Pour connaître les axes et les échelles disponibles pour chaque police de caractères, vous devez vous référer à la feuille de spécimen de cette police. Vous pouvez également examiner la police dans Photoshop, Illustrator, Sketch ou dans les outils de développement de Firefox, où vous pourrez voir et manipuler les axes disponibles.

Contrôle des axes

Les axes sont contrôlés par CSS, à l'aide de la propriété font-variation-settings*. Par exemple, nous définissons ici la taille optique (opsz) pour

à 120, et le poids (wght) à 180.Si le caractère a des axes personnalisés, nous utilisons simplement les balises correspondantes définies par le créateur de caractères. Par exemple, FS Kitty Outline possède un axe 'Outline' (OUTL) et un axe 'shadow' (SHDW). La spécification OpenType stipule que les balises d'axes personnalisés doivent être en majuscules, comme ci-dessous.FS Kim

fs-kim { font-family : "FS Kim" ; font-size : 40px ; font-variation-settings : 'opsz' 120, 'wght' 180 ; }

*La spécification CSS4 implique que nous pourrons bientôt utiliser font-weight, font-stretch, font-style et font-optical-sizing pour contrôler les axes. Bien que certains navigateurs commencent déjà à offrir cette possibilité, il s'agit encore d'une phase expérimentale et nous recommandons d'utiliser font-variation-settings pour l'instant.

.fs-kitty { font-family : "FS Kitty Outline" ; font-size : 40px ; font-variation-settings : 'OUTL' 300, 'SHDW' 400 ; }

Nous pouvons également animer les paramètres de variation de la police, en utilisant des animations ou des transitions CSS. C'est ainsi que nous avons réalisé la page d'accueil du site web

Voici un exemple de base d'animationFS Peled'un bout à l'autre de ses axes.L'avenir des polices de caractères variablesMicrosite de Fontsmith Variable Fonts.

@keyframes pele { 0% { font-variation-settings : 'slnt' 0, 'wght' 100' ; } 100% { font-variation-settings : 'slnt' 10, 'wght' 900 ; } }

 

Les polices variables ne sont pas encore supportées par tous les navigateurs, et il y a encore quelques problèmes de rendu. For example, we found that Chrome will render FS Pele and FS Kitty incorrectly when animating, unless (somewhat bizarrely) we apply text-shadow: 0 0; in the CSS!

Nous prévoyons que ces problèmes de rendu seront corrigés dans les prochaines versions de Chrome et que le nombre de navigateurs compatibles augmentera rapidement, même si les navigateurs hérités tels qu'IE11 nécessiteront toujours une solution de repli.

Nous sommes toujours ravis de travailler sur un projet avec Fontsmith, mais celui-ci a été particulièrement amusant parce que la technologie est tellement nouvelle et excitante.

Voir ce que nous avons construit ensemble, à l'adresse

.Article rédigé par Bekah McDonald, développeuse frontale chezwww.variable-fonts.com

.Taylor/ThomasTaylor/Thomas