Polices pour un monde variable
polices variable pour un monde variable
Phil Garnham Partage des connaissances
Nous vivons désormais dans un monde variable où les structures de conception s'adaptent à leur environnement, où la conception est optimisée et ciblée, et où le texte est dynamique et s'ajuste au contexte. Jamais auparavant les systèmes du langage visuel n'ont été aussi adaptatifs et réactifs. Et si polices pouvait aussi s'adapter ?
Une véritable typographie réactive est à notre portée, polices a maintenant la capacité de s'adapter à la lumière, à la distance, au son, au mouvement... nous pouvons nous concentrer sur une fonctionnalité précise, ou créer des possibilités d'expression inattendues, ou les deux. Et le plus beau, c'est que les capacités de polices sont regroupées dans un seul fichier de petite taille police .
Notre logo responsive pour Amsteldok réagit au mouvement et à l'heure de la journée, lisez tout ici.
Qu'est-ce qu'une variable police?
Aujourd'hui, nous sommes habitués à accorder des licences pour des fichiers police où chaque style est un fichier séparé. Une variable police peut regrouper une famille complète de styles dans un seul petit fichier TrueType ou WOFF2 police optimisé : un seul fichier police qui fonctionne comme une famille police complète, mais qui offre bien plus aux créatifs.
Qu'est-ce qu'un axe ? Qu'est-ce que l'espace de conception ?
Les axes sont les structures linéaires qui confèrent à la variable polices ses super pouvoirs. Considérez-les comme de puissants curseurs qui peuvent remodeler l'apparence et la sensation d'un site police. FS Kitty possède un axe "Shadow" (ombre), FS Pimlico un axe "Glow" (éclat). En déplaçant et en ajustant les curseurs de ces axes, l'effet d'ombre ou de lueur peut augmenter ou diminuer. Dans une famille de texte traditionnelle police , vous pouvez trouver un ensemble d'axes standard ou "enregistrés" tels que le poids (wght), la largeur (wdth), l'italique (ital), la taille optique (opsz) et l'inclinaison (slnt).
Les créateurs de caractères peuvent créer toutes sortes d'axes dans une variable police, les possibilités sont presque illimitées. De plus, toutes les transformations de conception sont soigneusement créées dans un cadre connu sous le nom de "design-space" (espace de conception) de police . Ce "design-space" définit les limites de l'aire de jeu polices , de sorte qu'en tant qu'utilisateur de police , il est impossible de créer des distorsions inattendues. Nous pouvons garantir la même qualité de conception dans toutes les itérations possibles d'un Fontsmith variable police que dans nos fichiers statiques standard police .
Première prestation : Conception
Qu'est-ce que cela signifie pour vous en tant que designer ? Supposons que vous ayez spécifié FS Industrie Bold dans votre identité de marque. Génial ! Cependant, il serait idéal de spécifier un poids légèrement plus léger, quelque part entre le Medium et le Bold polices, un style qui sera un "SemiBold" unique pour la marque. La police variable FS Industrie police vous permet de sélectionner un poids et une largeur précis qui existent n'importe où dans l'espace de conception. Faites glisser les curseurs "weight" et "width" ou attribuez les valeurs en CSS pour trouver les proportions et le niveau d'audace parfaits.
Imaginez maintenant que vous recherchiez un système de caractères à empattement articulé, par exemple un empattement à fort contraste pour les titres accrocheurs et un empattement à faible contraste pour les textes de petite taille. C'est parfait ! FS Kim dispose d'un axe de "taille optique". Vous pouvez augmenter ou diminuer le contraste de chaque lettre pour améliorer la lisibilité de polices à des tailles de pixels spécifiques. (Remarque : vous pouvez également mettre en œuvre l'axe de taille optique en tant que fonction intelligente dans CSS, le navigateur web mettra automatiquement en œuvre la taille optique appropriée du site police).
Avantages : Logistique
Il va sans dire qu'un seul fichier est beaucoup plus facile à gérer. Un fichier police à installer, un fichier police à référencer, un fichier police à charger dans un navigateur. Moins de fichiers à maintenir, à gérer et à suivre. C'est une bonne chose !
Avantages : Accessibilité
Si une police de caractères ne peut pas être lue par tous les utilisateurs, elle n'est pas inclusive. Le site polices peut améliorer l'expérience de lecture et l'accessibilité. Il peut être programmé pour s'adapter au contexte, à l'appareil, aux préférences de l'utilisateur, à la distance de lecture... Par exemple, un axe "Grade" peut modifier subtilement l'obscurité d'un polices , le rendant plus gras sans affecter l'espacement des lettres ou la longueur de la ligne. L'avantage ? Vous pouvez modifier l'obscurité du site policepour les utilisateurs malvoyants tout en préservant l'intégrité de la structure du design. La taille et la forme des lettres peuvent également s'adapter à la densité de pixels de l'appareil ou à son orientation. Ce ne sont là que quelques exemples. La variabilité de polices améliore considérablement les possibilités d'adaptation des caractères au lecteur.
Avantages : Créativité
La technologie Variable police est jeune, elle n'a que trois ans en fait. Attention : le support est limité :( Cependant, cette technologie se développe rapidement. Aujourd'hui, tous les principaux navigateurs offrent un certain niveau de prise en charge, de même que certaines applications desktop . Aujourd'hui est un bon jour pour commencer à jouer et à réfléchir - "Que puis-je créer avec une variable police? Imaginez un nouveau monde de possibilités police ! Amélioration de la conception de sites web réactifs, décoration élaborée par numérotation, ajout de différents degrés de texture, animation de fioritures le long d'un axe avec CSS, création d'expériences de formes de lettres interactives, avons-nous besoin d'un axe "floppy-jelly" ?) Nous pouvons maintenant manipuler les données police dans de nouvelles formes et dimensions.
Avantages : La taille fait toute la différence
Les fichiers variables polices améliorent les performances des sites web. Pour ce faire, ils regroupent tous les styles police possibles dans un seul fichier, un fichier dont la taille est réduite à une fraction de la taille standard du fichier police . Prenons l'exemple des sites d'information riches en caractères qui s'appuient fortement sur une hiérarchie typographique raffinée pour fournir un contenu clair et accessible. Tous les fichiers police doivent être chargés dans la fenêtre de votre navigateur et tous en même temps afin de rendre la page web, ce qui peut souvent représenter une grande quantité de données. Cet impact sur les données peut créer des problèmes de fallback police et de rendu du navigateur, en particulier sur les connexions mobiles. Nos fichiers variables police permettent de réduire la taille des fichiers de 70 à 85 %, tous les styles étant regroupés dans un seul fichier, ce qui réduit le délai entre le chargement et l'affichage de la page polices, améliorant ainsi les performances du site police .
Essai variable polices
Les caractères variables de Fontsmith polices peuvent être essayés gratuitement ! Il suffit de cliquer sur "Télécharger la version d'essai polices" et de suivre la procédure de téléchargement à l'adresse MyFonts.com.
Plein Variable Polices
Nos polices variables sont disponibles sous licence aux formats TrueType desktop et WOFF2 web police et comprennent un jeu de caractères complet*. Il suffit d'acheter la famille complète police de n'importe quelle variable prête police sur notre site web et la version variable police est incluse. * Note : FS Kitty, FS Pimlico Glow et FS Pele ne sont pas disponibles en version avec jeu de caractères complet pour le moment.
Les petits caractères
Les polices variables de Fontsmith polices peuvent être essayées gratuitement. Il suffit de cliquer sur "Download trial polices" et de suivre la procédure de téléchargement à l'adresse MyFonts.com. Ces fichiers d'essai police portent le nom "VFTrial" et ont un jeu de caractères réduit pour les besoins de l'essai police .