Expérimentez la puissance des fonts variables et son impact typographique

Les polices de fonts variables sont une avancée révolutionnaire dans le domaine de la conception typographique. Elles permettent une personnalisation et une adaptation dynamique des fonts, tout en simplifiant leur utilisation et en optimisant les performances sur le web. Elle offre aux concepteurs et aux développeurs un contrôle sans précédent sur la manière dont le texte est affiché, tout en améliorant l’expérience de l’utilisateur.

L’utilisation de la typographie variable décryptée

La typographie variable, également appelée polices de caractères variables ou font variable, est un concept de conception typographique moderne qui permet aux designers de regrouper une gamme de styles et de variations au sein d’une seule et même font. 

Au lieu d’avoir une police de caractère distincte pour chaque variation (comme le gras, l’italique, différentes largeurs, etc.), une typo variable offre un large éventail d’ajustements en un seul fichier, permettant aux concepteurs de contrôler et d’animer ces variations de manière fluide et dynamique.

L’histoire de la typographie variable est relativement récente. Elle a été initiée par le consortium W3C (World Wide Web Consortium) dans le but de repousser les limites de la typographie sur le web. Le concept a été officiellement présenté en 2016, mais son développement avait commencé bien avant cette date.

La typographie variable a été conçue pour répondre aux besoins de l’environnement numérique, où la flexibilité et l’efficacité sont essentielles. Avec l’évolution des technologies et des appareils, la typographie variable permet de s’adapter aux diverses tailles d’écran, résolutions, et préférences des utilisateurs.

Nouvelles perspectives et tendances des polices de caractères variables 

Outre ses avantages sur le plan technique, la typographie variable permet de penser des identités de marque évolutives et davantage en mouvement. Sa capacité à pouvoir stocker différents états d’une même font et de pouvoir basculer dynamiquement entre ces états voir même de les combiner offre un nouveau rapport à la typographie, très éloigné des origines qu’elle partage avec l’imprimerie. Le texte n’est plus figé par le support papier, il peut s’exprimer et s’animer avec le support numérique.

Source : Lubeznik Center For The Arts

Pour une image de marque qui prend vie

En la couplant avec de l’interaction, cette technologie devient ludique et permet une implication de l’utilisateur dans la forme qu’elle prend offrant ainsi plus de proximité entre la marque et le public. Ainsi, de plus en plus de marques l’emploient pour rendre leur image plus vivante.

Sa flexibilité permet d’ancrer une identité de marque dans des cas d’usages très spécifiques. Comme très récemment avec le rebranding de Patreon où une même police de caractère peut grâce à ses propriétés variables ajuster l’intensité de son identité pour la rendre lisible en toute situation. 

Source : Patreon

Les fonts variables donnent un rapport moins contraignant au support et favorisent des partis pris plus expérimentaux et osés. Le résultat : des brandings plus forts et distinctifs.

Après une longue période où la tendance était à la simplification et au minimalisme, les brandings cultivent à nouveau des identités plus marquées et incarnées.

Source : Agence Simon

La typographie variable apparaît comme un nouvel outil de design pour distinguer une marque de toutes les autres. Puisqu’elle peut associer n’importe quel type de variations à une font, les polices de caractères vont de plus en plus au-delà des paramètres de graisses ou d’italique. On voit ainsi des altérations franches dans le style de la font comme dans le branding de Cohere par Pentagram où la typographie peut à la volée couper les caractères et variées le placement de ces coupures.

Source : Cohere par Pentagram

Maîtriser les fonts variables : focus sur leur utilisation

Afin de bien intégrer ce type de police de caractères dans vos projets de création de site internet, il est essentiel de bien comprendre leur fonctionnement. Notre équipe dev vous donne les clefs pour expérimenter cette technique de design typographique ! En amont de votre lecture, n’hésitez pas à consulter notre glossaire du développeur web. 

Bien intégrer sa font variable dans les fichiers web

Contrairement aux fonts standards ou statiques, qui exigeaient au moins quatre fichiers distincts pour gérer les différents styles (voire plus en cas de nombreuses variations de graisse), les polices de caractères variables rassemblent toutes les combinaisons possibles de style et de graisse au sein d’un unique fichier.

Pour intégrer une typo variable dans un projet, deux options sont toujours disponibles, similaires aux polices de caractères standardes :

• Lorsqu’il s’agit d’une web font (par exemple, trouvée sur Google Fonts), on peut utiliser la balise HTML <link>, comme illustré ci-dessous :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nom-de-votre-Font">

• Si la font est hébergée localement, on peut l’intégrer en utilisant la règle @font-face directement dans le fichier CSS, comme suit :

@font-face {
    font-family: Roboto Extremo;
    src: 
      url('..chemin/vers/les/polices/roboto_extremo.woff2') 
      format(‘woff2 supports variations’),
      url('..chemin/vers/les/polices/roboto_extremo.woff2') 
      format('woff2-variations');
    font-stretch: 25% 150%;
    font-style: oblique 0deg 10deg;
    font-weight: 100 900;
    font-display: swap;
}

Comparativement aux polices de caractères standardes, il est à noter que la déclaration dans la règle @font-face permet de préciser diverses valeurs CSS valides pour la font, comme le font-stretch et font-style. De plus, il est essentiel de spécifier un format particulier dans la déclaration de la source (src) pour indiquer aux navigateurs qu’il s’agit d’une police de caractères variable. 

Les axes de variations pour une liberté créative infinie

Le principe central des typos variables réside dans la notion d’axes de variation, qui définissent l’intervalle autorisé pour ajuster un aspect spécifique d’une font. Deux catégories d’axes existent :

• D’abord, les axes enregistrés, qui sont les plus courants et ont été normalisés pour une utilisation généralisée. Ces axes incluent des caractéristiques telles que la taille du corps, la largeur, l’inclinaison, l’italique et la taille optique, chacun d’entre eux étant associé à un attribut CSS correspondant.

• Ensuite, les axes spécifiques, qui peuvent représenter n’importe quelle caractéristique définie par le créateur de la font. Ils offrent une flexibilité totale pour personnaliser davantage la typographie en fonction des besoins spécifiques d’un projet.

Une fois que la typo et les diverses valeurs associées ont été déclarées, il devient possible d’explorer et de manipuler ces attributs. Cela peut se faire directement en utilisant des règles CSS pour ajuster les axes, ou bien en employant des bibliothèques comme GSAP pour créer des animations sophistiquées, poussant ainsi les possibilités de design typographique encore plus loin.

Ne pas omettre l’expérience utilisateur

Lors de l’utilisation de polices de caractères variables, il est recommandé de spécifier la propriété font-weight de manière explicite, car celle-ci peut varier en fonction des navigateurs. Vous pouvez définir cette propriété dans votre feuille de style CSS comme suit :

html {
  font-family: 'SourceSans', sans-serif;
   font-weight: 400;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
    font-variation-settings: "wght" 400;
  }
}

En outre, il est recommandé de déclarer une font standard en cas d’incompatibilité avec la font variable, voire même de placer en priorité la font standard. Cela garantit une expérience utilisateur optimale, en assurant que la font variable est correctement rendue, tout en définissant une alternative si nécessaire.

Les fonts variables ne sont pas seulement des typos stylées !

La typographie variable ouvre de nouvelles perspectives pour la créativité en design web. Elle offre une infinité de possibilités pour des projets de conception ou de refonte de site, encourageant l’innovation et l’originalité dans la création graphique. Mais ce n’est pas tout ! Elles représentent également une avancée technique considérable pour des designs toujours plus optimisés.

Une font qui s’adapte aux contraintes de vos supports de communications

La flexibilité offerte aux designers est considérablement accrue grâce à la possibilité de créer de nouvelles polices de caractères tout en ajustant aisément leurs attributs. Cela signifie que le poids, la largeur et la hauteur des caractères peuvent être modifiés pour s’adapter parfaitement aux exigences de chaque typologie de projet. 

Cette diversité dans la typographie garantit une réponse optimale aux besoins créatifs d’une entreprise. Les typos variables présentent la particularité de modifier leur apparence en fonction des valeurs de leurs axes. Cette caractéristique unique offre des possibilités d’animation captivantes, qui peuvent être exploitées pour renforcer l’impact visuel de la communication.

En outre, cette variabilité typographique présente des avantages majeurs en termes de cohérence. Cette cohérence contribue à rehausser la qualité visuelle de la communication, en assurant que la typographie demeure uniforme, peu importe où elle est affichée.

Des avantages techniques pour une rapidité d’affichage sur les pages web

Un autre avantage considérable réside dans la réduction de la taille des fichiers de police de caractères. Au lieu de devoir télécharger plusieurs fichiers de font pour différentes variations, une seule font variable peut être employée, ce qui réduit considérablement la taille du fichier. 

Les polices de caractères variables sont regroupées dans un unique fichier de font, facilitant ainsi leur chargement sur le web. Cette consolidation optimise la vitesse de chargement des polices de caractères, garantissant une meilleure accessibilité et une expérience utilisateur plus fluide.
Par ailleurs, les typographies variables s’intègrent parfaitement dans les sites web, permettant au texte de s’adapter en toute fluidité aux changements de taille d’écran. Cette adaptabilité est essentielle pour une expérience utilisateur optimale, quel que soit l’appareil utilisé.

Article rédigé par

L'équipe Digital Cover

Digital Stategist