Introduction de la variable Polices

Introduction de la variable Polices

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é desktop pour la première fois. Et selon le Wolfgang Digital KPI Report de cette année, 63 % de l'ensemble du trafic internet provient désormais des mobiles et des tablettes. Avec le déploiement de la 5G, ce chiffre devrait augmenter de manière exponentielle.

Trois secondes

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 qu'il ne s'agit que de 3 secondes.

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. Maintenant que les gens accèdent à l'internet principalement par l'intermédiaire de leur téléphone, il est encore plus important d'avoir un site rapide. Une page web qui se charge lentement peut vous faire perdre des clients.

La taille compte

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 être un défi, en particulier lorsque le site utilise une large gamme de poids ou de styles police . En effet, pour chaque variante de police utilisée sur une page, votre site web doit charger un fichier 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 de secours avant que le fichier préféré police ne se charge.

OpenType Police Variations

La technologie OpenType Police 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 "variable polices", cette nouvelle technologie permet aux créateurs de caractères de définir les limites d'un caractère et de le laisser évoluer entre ces limites. Une variable police est une police dans laquelle l'équivalent de plusieurs polices individuels est intégré dans un seul fichier.

Lorsque Fontsmith nous a fait part de son projet de microsite Variable Polices , nous avons été très enthousiastes. Variable polices est encore très récent, nous étions donc 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 police séparément, nous pouvons maintenant charger un seul fichier qui contient toutes les variantes. Ainsi, alors que nous aurions pu avoir besoin de quatre fichiers auparavant - disons normal, italique, gras et gras italique - nous disposons désormais d'un fichier police qui nous donne accès à l'ensemble des graisses, largeurs et styles disponibles. Sympa, non ?

Comment fonctionne le site Polices

Les variantes de chaque site police sont contrôlées à l'aide de 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 variables de Fontsmith polices ont des axes personnalisés, ce qui signifie que nous pouvons décider exactement de la quantité d'ombre et de contour de FS Kittyet de l'éclat de FS Pimlico.

"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".

 - John Hudson, Présentation de la variable OpenType Polices

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 consulter le site police dans Photoshop, Illustrator, Sketch ou les outils de développement de Firefox, où vous pouvez voir et manipuler les axes disponibles.

Contrôle des axes

Les axes sont contrôlés par CSS, à l'aide de la propriété police-variation-settings*. Par exemple, nous fixons ici la taille optique (opsz) de FS Kim à 120, et le poids (wght) à 180.

fs-kim { font-family: “FS Kim”; font-size: 40px; font-variation-settings: ‘opsz’ 120, ‘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-kitty { font-family: “FS Kitty Outline”; font-size: 40px; font-variation-settings: ‘OUTL’ 300, ‘SHDW’ 400; }

*La spécification CSS4 implique que nous pourrons bientôt utiliser police-weight, police-stretch, police-style et police-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 police-variation-settings pour l'instant.

Nous pouvons également animer les paramètres de variation de police à l'aide d'animations CSS ou de transitions. C'est ainsi que nous avons réalisé la page d'accueil du microsite Fontsmith Variable Polices . Voici un exemple basique de la façon dont vous pourriez animer FS Pele d'un bout à l'autre de ses axes.

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

 

L'avenir des variables polices

La version variable de polices n'est pas encore prise en charge par tous les navigateurs, et il existe encore quelques problèmes de rendu. Par exemple, nous avons constaté que Chrome rendra FS Pele et FS Kitty de manière incorrecte lors de l'animation, à moins que (un peu bizarrement) nous appliquions text-shadow : 0 0 ; dans le 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.

Voyez ce que nous avons construit ensemble, sur www.variable-polices.com.

Article rédigé par Bekah McDonald, développeuse frontale chez Taylor/Thomas.