L'évolution de la typographie à polices variables: une introduction

Mince, épais et tout le reste: FF Meta Variable de Monotype

Les mots ont du pouvoir et la typographie est leur voix

Pendant des siècles, le type a été la façon dont nous «entendons» ce que nous lisons. Il est également généralement admis que les polices de caractères et la typographie sont un élément central de l'image de marque, de l'expression, de la gamme vocale. Une excellente typographie influe sur la compréhension, l'humeur et le sens de nombreuses façons et est une partie essentielle de la conception. Malheureusement, pendant de nombreuses années après l'avènement du Web, nous n'avons pas été en mesure d'appliquer tout le contenu typographique, sauf le plus élémentaire, au contenu en ligne. Avec la possibilité d'utiliser de vraies polices et des fonctionnalités OpenType - comme des ligatures, des jeux de figures spécifiques, des fractions et un vrai crénage - le paysage typographique s'est considérablement amélioré. Mais la réalité de la visualisation de contenu sur le Web dicte que la vitesse est l'aspect le plus critique de la conception - nous avons donc échangé la «plage vocale» typographique pour la vitesse de la page. Cela signifie moins de poids de police et une fidélité et une voix de marque réduites.

De plusieurs, un (paradigme: décalé)

Une police variable est une police unique qui agit autant
- John Hudson

L'avènement des polices variables change toute cette dynamique. Comme décrit par John Hudson, une police variable est une police unique qui agit comme autant: toutes les variations de largeur et de poids, d'inclinaison et même d'italique peuvent être contenues dans un seul fichier de police très efficace et compressible. De plus: le format (qui fait techniquement partie de la spécification OpenType 1.8) est complètement extensible. Le concepteur de types a un contrôle total sur les axes utilisés, leurs gammes et même la définition de nouveaux axes. Il existe actuellement 5 axes «enregistrés» (largeur, poids, inclinaison, italique et dimensionnement optique), mais le concepteur peut faire varier l’axe de son choix. Certains exemples incluent la hauteur des ascendants et des descendants, la qualité du texte et même la forme de l'empattement. Les possibilités sont presque illimitées. En supprimant la barrière de la performance, nous ouvrons la porte à un design plus intéressant et dynamique et à une capacité beaucoup plus grande à exprimer la vraie voix de la marque. Tout cela tout en conservant la fidélité à la police elle-même: seuls les axes exposés par le typographe peuvent être modifiés. Aucune distorsion artificielle autorisée.

Web design, réinventé

Alors que la technologie est en train de mûrir et que les concepteurs de types s'efforcent de maîtriser cette nouvelle façon de travailler, la promesse de conception sur le Web est révolutionnaire. Le scénario typique consisterait à contraindre une conception donnée à 3 à 5 polices différentes pour représenter tous les aspects du langage de conception et de la voix d'un site, y compris chaque permutation pour le corps du texte et les en-têtes. Dans sa mise en œuvre la plus simple, les polices variables nous donneraient la liberté d'utiliser des poids différents pour chaque niveau de titre, ce qui augmenterait considérablement leur clarté et leur lisibilité.

Esperluettes de 100 à 900 poids

On pourrait également utiliser des largeurs de caractères légèrement plus étroites pour les en-têtes ou sur des affichages d'informations riches en données. En fait, l'ensemble du système typographique pourrait être conçu pour être proportionnel: le poids et la largeur pourraient devenir des multiplicateurs sur les paramètres standard de copie du corps. Cela permettrait à ces aspects d'évoluer facilement avec la copie du corps si ses paramètres changeaient en fonction de la taille de l'écran ou des préférences de l'utilisateur. Tout cela avec une augmentation des performances qui l'accompagne en raison de moins de demandes HTTP (moins de fichiers de polices) et d'une économie globale de données à télécharger (bien que cela varie selon la police et la compression utilisées).

Mais alors que ces libertés nous permettent d'être plus expressifs, certaines des capacités vraiment intéressantes aideront à transformer l'expérience de lecture elle-même. Cette page (enfin, la page de démonstration elle-même) a été définie avec une nouvelle version à police variable de FF Meta, le design classique sans empattement d'Erik Spiekermann sorti en 1991. Même avec un seul axe de variation (poids) des deux variantes romaines et italiques, une merveilleuse gamme de voix peut être obtenue avec des gains de performances massifs: 18 fichiers et plus de 288 Ko remplacés par un seul fichier de seulement 84 Ko.

La lecture réinventée à l'écran

[Meta] doit faire plus que paraître joli: il doit travailler assez dur
—Erik Spiekermann

Certains des plus grands défis pour créer une bonne expérience de lecture sont liés au manque de finesse en proportion et aux détails fins. La combinaison des fonctionnalités et des variations CSS et OpenType modernes présente une combinaison puissante. La possibilité de définir des fonctionnalités telles que les ligatures et la césure en fonction de la langue, d'activer et de désactiver la césure en fonction de la taille de l'écran et même d'adapter la largeur des caractères sur les plus petits écrans afin d'ajuster plus de caractères par ligne sans réduire la taille de la police peut apporter des améliorations spectaculaires dans la douceur et le confort de l'expérience de lecture.

Prêt pour un gros plan

Coupe Garamond du XVIIIe siècle en tailles optiques. La première image est à 6 pt, la seconde à 72. Notez la différence de contraste de trait. Il est beaucoup plus raffiné dans la plus grande taille.

Une autre caractéristique courante dans le type de métal mais perdue en traduction pour la photocomposition et le numérique était le dimensionnement optique (enfin, certains concepteurs créent toujours des tailles optiques distinctes pour différentes plages, mais c'est rare et quelque peu limité). Pas aussi souvent sur les dessins sans empattement, mais au cours des décennies passées (en vérité, pendant des siècles), il était assez courant que les tailles physiquement plus petites d'une police soient coupées avec des traits légèrement plus lourds, des bols et des compteurs plus ouverts et certains cas, des ouvertures encore plus larges afin de préserver la lisibilité. Les journaux en particulier ont trouvé cela essentiel pour garantir que les lignes ne se perdraient pas ou que les lettres ne souffraient pas trop du gain d'encre.

Le dimensionnement optique a fait un retour dans les polices variables et peut être appliqué automatiquement là où il est disponible, ou défini explicitement par le concepteur ou le développeur Web. Comme mentionné, ce n'est pas une caractéristique aussi fréquente dans les polices sans empattement comme celle-ci, mais peut être utilisée pour un effet assez dramatique dans les conceptions d'empattement à contraste plus élevé.

Polonais et équilibre

Avec les avantages déjà discutés, le cas des polices variables est assez convaincant. Mais une bonne typographie n'est pas tout ce qu'il y a à voir avec un bon design. La gamme d'axes comme la largeur et le poids nous donne une grande liberté pour adopter plus de design éditorial sur le web sans avoir à charger un nombre exorbitant de fichiers. Et puisque nous avons déjà ces quelques polices variables requises en place, l'opportunité est de les exposer à l'usage des éditeurs de contenu eux-mêmes. Imaginez un rôle pour les concepteurs à l'intérieur du système de gestion de contenu (ou CMS) où le site Web est hébergé. Ce concepteur pourrait utiliser des contrôles simples intégrés au CMS qui leur permettraient de composer des titres spécifiques ou des citations, permettant un tout nouveau niveau de conception, tout comme ce que nous avons imprimé, sans avoir à écrire du code personnalisé à chaque fois.

Nous sommes peut-être encore à l'aube de cette nouvelle ère, mais l'avenir est certainement prometteur

En mai 2018, 3 des 4 principaux navigateurs Web prenaient déjà en charge les polices variables, en plus des deux plates-formes mobiles dominantes (consultez la prise en charge sur caniuse.com). Dans cet esprit, nous sommes prêts à commencer à éclairer le Web dès aujourd'hui.

Voici la page complète sur CodePen. Jetez un œil à l'ensemble et jetez un œil au CSS qui le pilote. Cela comprend un système typographique de mise à l'échelle que j'ai créé sur la base de certaines idées que j'ai apprises de Jen Simmons et Tim Brown, en utilisant des unités de fenêtre, des propriétés CSS personnalisées (alias variables) et de nombreux calculs. Vous pouvez le voir directement sur CodePen ou le vérifier en fait intégré ci-dessous.

Quelques réflexions sur la police et le projet

J'ai toujours été un fan du travail d'Erik Spiekermann, et je pense que la chronologie et l'histoire de Meta, Officina et Fira sont vraiment intéressantes et font partie intégrante du tissu du design numérique pour moi au cours des 25 dernières années. La chance de prendre une police avec ce genre d'histoire et d'impact dans le monde du design et de travailler avec elle dans le contexte d'une toute nouvelle technologie était vraiment excitante. J'ai particulièrement apprécié de pouvoir travailler à la fois avec le poids et l'italique dans le même fichier: il montre très bien la valeur du format de police variable.

J'ai décidé de ne même pas commencer à concevoir la page avant d'avoir écrit l'article lui-même. Je voulais écrire une bonne introduction destinée aux designers et aux propriétaires de marques afin de leur faire découvrir les avantages des polices variables en termes qui répondraient à leurs préoccupations: langage de conception et expression de la marque. Une fois que j'ai senti que j'avais un bon brouillon, j'ai ajouté un peu plus de détails sur la police elle-même et sa place dans notre lexique de conception. Cela m'a donné quelques idées sur la façon de mettre en valeur la police et l'historique.

En pensant à la composition de base, j'ai opté pour l'échelle: je voulais jouer avec les extrêmes de poids et de taille d'une manière que vous ne voyez pas aussi souvent sur le Web car la plupart des designs sont plus limités dans les poids utilisés. Dans ce cas, j'ai utilisé toute une gamme de poids de 100 à 900 en romain et en italique. Une fois que j'ai commencé à obtenir une mise en page que j'aimais, il m'est venu à l'esprit qu'au lieu de faire des graphiques pour illustrer les capacités, il serait plus intéressant de faire des illustrations hors type: tirer des guillemets et un peu de données de police de style «infographique».

La dernière touche de l'esperluette a été inspirée par la page de spécimen sur le site FontFont: il y a un échantillonneur de glyphes qui montre tous les poids d'une esperluette superposée. Au départ, je les avais tous empilés de la même manière, avec une animation en boucle - mais c'était un peu beaucoup pour certains navigateurs qui implémentaient toujours des polices variables et des animations d'images clés. Quand j'ai frappé sur la disposition qui se chevauchait avec une option de lecture / pause, j'ai aimé la façon dont ils avaient l'air répartis (en particulier sur mobile). Je l'ai donc retourné et l'ai fait démarrer statique, puis j'ai joué l'animation une fois et je suis retourné à la disposition étalée / en couches.

Dans l'ensemble, je suis vraiment satisfait à la fois du contenu et du design, et j'aime la façon dont il se déplace et évolue sur différentes tailles d'écran également. J'espère que cela sert aussi d'inspiration et d'instruction pour les autres.

[Monotype m'a récemment engagé pour écrire et concevoir une page de démonstration pour présenter une nouvelle version de police variable du design classique d'Erik Spiekermann FF Meta. Ceci est le texte de cette page et certains des visuels. La page en direct complète est hébergée sur CodePen et intégrée ci-dessus. Il est ouvert à tous, alors n'hésitez pas à en faire une copie et à jouer avec vous-même. Vous pouvez également voir leur introduction à la technologie.]

Contenu original publié sur mon blog