Catégories
Astuces et Design

Polices variables: introduction à 101 (+ polices variables gratuites à essayer)

Polices variables: introduction à 101 (+ polices variables gratuites à essayer)

Les polices variables sont un nouveau mot à la mode que nous entendons de nos jours. Est-ce vraiment un mot à la mode ou quelque chose de révolutionnaire? Dans l'article d'aujourd'hui, notre objectif est de vous donner une réponse solide tout en couvrant les bases des polices variables (avec quelques exemples d'excellentes polices variables gratuites à essayer).

Les polices variables sont considérées comme la plus grande innovation depuis l'introduction des polices Web dans la conception Web. En temps voulu, les polices variables auront un impact énorme sur le Web et la façon dont vous utilisez la typographie dans la conception Web. Inutile de dire qu'en tant que concepteur, il est important de comprendre cette nouvelle approche des polices.

Si vous vous demandez encore ce que sont réellement ces polices variables, nous vous aiderons à en comprendre les bases. Et aussi vous montrer quelques exemples de polices de variables que vous pouvez utiliser gratuitement dans vos propres conceptions. Continue de lire.

Que sont les polices variables?

fontsmit-variable-fonts "width =" 1100 "height =" 536 "data-srcset =" https://designshack.net/wp-content/uploads/fontsmit-variable-fonts.jpg 1100w, https: // designshack. net / wp-content / uploads / fontsmit-variable-fonts-368x179.jpg 368w, https://designshack.net/wp-content/uploads/fontsmit-variable-fonts-1024x499.jpg 1024w, https: // designshack. net / wp-content / uploads / fontsmit-variable-fonts-768x374.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>(Le site Web interactif de Fontsmith montre comment fonctionnent les polices variables)</p>
<p>Avez-vous déjà visité un site Web ou un blog et vu la police du site Web passer d'un design laid à un plus joli? Cela se produit en fait en raison du retard dans le chargement des polices du site Web. Et c'est un phénomène assez courant sur les sites Web à chargement lent.</p>
<p>Les polices variables utilisent des attributs CSS pour le poids de police, le style de police et d'autres fonctionnalités de style de police sans limitations</p>
<p>Lors de la conception de sites Web, vous utilisez plusieurs polices sur la conception. Y compris différents poids de la police tels que gras et mince. Ainsi que différents styles tels que l'italique. Vous devez incorporer chaque police sur votre page Web pour qu'elles fonctionnent. Et lorsqu'un visiteur charge la page, il télécharge et affiche d'abord les polices une par une avant qu'elles ne soient visibles sur l'appareil de l'utilisateur.</p>
<p>Cela ajoute plus de temps au chargement du site Web, coûte plus de ressources serveur et de bande passante et, plus important encore, il interfère avec l'expérience globale de l'utilisateur.</p>
<p>Les polices variables sont un nouveau type de polices qui utilisent la puissance de CSS pour convertir différentes variations d'axe à l'aide de valeurs numériques. Ou, en termes simples, les polices variables utilisent des attributs CSS pour le poids de police, le style de police et d'autres fonctionnalités de style de police sans limitations.</p>
<p>Ainsi, au lieu d'avoir à incorporer plusieurs polices pour afficher différents poids et styles, vous n'avez qu'à incorporer une police et modifier les styles à l'aide de CSS. De plus, vous n'avez plus à vous limiter à respecter une plage entre les polices que vous avez incorporées. Comme définir le poids de la police, par exemple. Cela vous donne des possibilités illimitées de faire preuve de créativité avec les conceptions de polices sans affecter les performances du site Web.</p>
<h2>Fonctionnement des polices variables</h2>
<p>Le côté technique des polices variables est difficile à mettre en mots sans couvrir toute une liste de définitions de termes et de conception typographique. Nous allons donc essayer d'expliquer le fonctionnement des polices variables en termes simples.</p>
<p>Lorsque vous utilisez une police variable, vous pouvez contrôler la largeur de la police à l'aide d'attributs CSS et de valeurs numériques sans affecter la conception de la police.</p>
<p>Un excellent moyen de voir la flexibilité des polices variables est de savoir comment fonctionne la largeur de police. Normalement, lorsque vous utilisez une police standard sur un site Web, vous avez peu ou pas de contrôle sur la largeur de la police. Ou du moins le contrôler sans affecter la qualité et le design de la police. Vous êtes limité à utiliser des polices à largeur fixe comme les polices condensées et étroites.</p>
<p>Lorsque vous utilisez une police variable, vous pouvez contrôler la largeur de la police à l'aide d'attributs CSS et de valeurs numériques sans affecter la conception de la police.</p>
<p>Par exemple, vous pouvez utiliser un simple attribut CSS comme <em>h2 {font-stretch: 60%; }</em> pour étirer la police pour contrôler la largeur de la police pour créer un look différent pour vos en-têtes H2.</p>
<p>Il en va de même pour l'italique, les obliques, la taille de la police, etc. La puissance des polices variables réside dans CSS. Et c'est ce qui les rend plus réactifs et efficaces que les anciennes polices gourmandes en ressources.</p>
<p>Il y a des expériences étonnantes faites avec des polices variables dans CodePen. Jetez un œil si vous voulez avoir une idée de la façon dont les polices variables peuvent être utilisées dans les conceptions créatives.</p>
<h2>Pourquoi utiliser des polices variables?</h2>
<p>Vous devriez maintenant avoir une compréhension de base de la façon dont les polices variables peuvent être bénéfiques dans la conception et le développement Web. En plus de rendre le Web meilleur.</p>
<p>Pour résumer, voici quelques raisons pour lesquelles les polices variables valent la peine d'être utilisées dans vos conceptions:</p>
<ul>
<li><strong>Sites Web plus rapides:</strong> Sans avoir à incorporer et à charger plusieurs polices, les sites Web se chargeront beaucoup plus rapidement et coûteront moins de ressources serveur</li>
<li><strong>Liberté créative:</strong> En tant que concepteurs, vous pouvez faire preuve de créativité avec les conceptions Web sans avoir à vous limiter à un ensemble de polices ou de poids de police</li>
<li><strong>Designs flexibles:</strong> Avec plus de flexibilité, vous pouvez définir des largeurs, des poids, etc. sans aucune limitation</li>
<li><strong>Améliorez l'expérience utilisateur:</strong> Il y aura des retards minimaux dans le chargement des polices et, espérons-le, une meilleure compatibilité des polices variables dans les systèmes d'exploitation pour offrir une meilleure expérience utilisateur</li>
</ul>
<h2>Meilleures polices variables gratuites</h2>
<p>Les polices variables prennent déjà de l'ampleur et de nouvelles polices sont introduites chaque jour. Voici quelques-unes des polices variables gratuites que vous pouvez essayer dès maintenant.</p>
<h3>1. Comfortaa</h3>
<div class=comfortaa-variable-font "width =" 1100 "height =" 466 "data-srcset =" https://designshack.net/wp-content/uploads/comfortaa-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / comfortaa-variable-font-368x156.jpg 368w, https://designshack.net/wp-content/uploads/comfortaa-variable-font-1024x434.jpg 1024w, https: // designshack. net / wp-content / uploads / comfortaa-variable-font-768x325.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Comfortaa est une belle police variable géométrique arrondie que vous pouvez utiliser gratuitement dans votre conception. Cette police est conçue pour être utilisée comme police de titre et de titres. Et semble meilleur dans des tailles de police plus grandes.</p>
<h3>2. Dose</h3>
<div class=dosis-variable-font "width =" 1100 "height =" 453 "data-srcset =" https://designshack.net/wp-content/uploads/dosis-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / dosis-variable-font-368x152.jpg 368w, https://designshack.net/wp-content/uploads/dosis-variable-font-1024x422.jpg 1024w, https: // designshack. net / wp-content / uploads / dosis-variable-font-768x316.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Dosis est une autre police variable arrondie créative qui a fière allure dans tous les poids et largeurs. Cette police est également fournie avec de nombreux autres caractères et glyphes.</p>
<h3>3. Script de danse</h3>
<div class=dancing-script-variable-font "width =" 1100 "height =" 446 "data-srcset =" https://designshack.net/wp-content/uploads/dancing-script-variable-font.jpg 1100w, https: //designshack.net/wp-content/uploads/dancing-script-variable-font-368x149.jpg 368w, https://designshack.net/wp-content/uploads/dancing-script-variable-font-1024x415.jpg 1024w, https://designshack.net/wp-content/uploads/dancing-script-variable-font-768x311.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Dancing Script est une police variable avec une conception de script. Cette police trouve son inspiration dans les polices des années 50. Imaginez les superbes designs que vous pourrez réaliser avec cette police en utilisant la puissance des polices variables.</p>
<h3>4. Inter</h3>
<div class=inter-variable-font "width =" 1100 "height =" 460 "data-srcset =" https://designshack.net/wp-content/uploads/inter-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / inter-variable-font-368x154.jpg 368w, https://designshack.net/wp-content/uploads/inter-variable-font-1024x428.jpg 1024w, https: // designshack. net / wp-content / uploads / inter-variable-font-768x321.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Inter est une police variable gratuite qui vous permet d'utiliser gratuitement la police même dans des projets commerciaux. Cette police présente un design très audacieux et étroit. Bien sûr, vous pouvez utiliser des axes de police variables pour modifier assez facilement la conception du lettrage.</p>
<h3>5. Code Fira</h3>
<div class=fira code-variable-font

Doté d'un design de lettre inspiré par la programmation de polices, Fira Code est une autre grande police variable que vous pouvez utiliser dans des projets liés à la technologie et au démarrage. Il est également livré avec de nombreux glyphes.

6. Crimson Pro

crimsonpro-variable-font "width =" 1100 "height =" 494 "data-srcset =" https://designshack.net/wp-content/uploads/crimsonpro-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / crimsonpro-variable-font-368x165.jpg 368w, https://designshack.net/wp-content/uploads/crimsonpro-variable-font-1024x460.jpg 1024w, https: // designshack. net / wp-content / uploads / crimsonpro-variable-font-768x345.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Crimson Pro est une police serif de haute qualité que vous pouvez utiliser gratuitement dans vos projets professionnels et d'entreprise. Cette police est également livrée avec une version en italique de la police variable.</p>
<h3>7. Hepta Slab</h3>
<div class=hepta-slab-variable-font "width =" 1100 "height =" 478 "data-srcset =" https://designshack.net/wp-content/uploads/hepta-slab-variable-font.jpg 1100w, https: //designshack.net/wp-content/uploads/hepta-slab-variable-font-368x160.jpg 368w, https://designshack.net/wp-content/uploads/hepta-slab-variable-font-1024x445.jpg 1024w, https://designshack.net/wp-content/uploads/hepta-slab-variable-font-768x334.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Si vous êtes un fan des polices de dalles, cette police variable vous sera utile. Hepta Slab est entièrement gratuit à utiliser dans vos projets personnels et commerciaux.</p>
<h3>8. Orbitron</h3>
<div class=orbitron-variable-font "width =" 1100 "height =" 458 "data-srcset =" https://designshack.net/wp-content/uploads/orbitron-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / orbitron-variable-font-368x153.jpg 368w, https://designshack.net/wp-content/uploads/orbitron-variable-font-1024x426.jpg 1024w, https: // designshack. net / wp-content / uploads / orbitron-variable-font-768x320.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Comme son nom l'indique, Orbitron est une police variable gratuite avec un aspect et une sensation futuristes. Cette police est la plus appropriée pour créer des en-têtes et des titres dans les conceptions de sites Web.</p>
<h3>9. Faustina</h3>
<div class=faustina-variable-font "width =" 1100 "height =" 505 "data-srcset =" https://designshack.net/wp-content/uploads/faustina-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / faustina-variable-font-368x169.jpg 368w, https://designshack.net/wp-content/uploads/faustina-variable-font-1024x470.jpg 1024w, https: // designshack. net / wp-content / uploads / faustina-variable-font-768x353.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Faustina est une police variable au design très professionnel. La police serif est idéale pour les sites Web d'actualités et de presse. La police comprend également de nombreux glyphes.</p>
<h3>10. Podkova</h3>
<div class=podkova-variable-font "width =" 1100 "height =" 414 "data-srcset =" https://designshack.net/wp-content/uploads/podkova-variable-font.jpg 1100w, https: // designshack. net / wp-content / uploads / podkova-variable-font-368x139.jpg 368w, https://designshack.net/wp-content/uploads/podkova-variable-font-1024x385.jpg 1024w, https: // designshack. net / wp-content / uploads / podkova-variable-font-768x289.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Une police de dalle monoline avec un design très inhabituel. Cette police variable vous permettra d'être plus créatif avec vos conceptions de typographie. Il semble être un excellent candidat pour jouer avec l'axe de largeur.</p>
<h2>Comment commencer à utiliser des polices variables</h2>
<p>L'implémentation de polices variables dans vos propres conceptions est assez simple. Le moyen le plus simple consiste à utiliser les polices Google et à les intégrer directement dans le code de votre site Web.</p>
<p>L'API Google Font V2 inclut déjà la prise en charge d'un certain nombre de polices variables. Choisissez-en un et récupérez le code d'intégration.</p>
<p>Vous pouvez également héberger vous-même des polices variables et les intégrer via CSS à l'aide de <em>«@ Font-face»</em>. Les attributs pour définir les styles de police, ou axes, sont généralement les mêmes pour toutes les polices variables. Mais elles peuvent différer pour certaines polices. Il est donc préférable de consulter la documentation de chaque police pour comprendre comment elle fonctionne.</p>
<p>Suivez ce guide de Mozilla pour une explication plus technique de l'implémentation des polices variables.</p>
<h2>En conclusion</h2>
<p>Les polices variables représentent l'avenir des polices Web et de la conception Web. Dans quelques années, les polices variables seront le choix standard pour les sites Web et les applications Web. Si vous souhaitez pérenniser vos conceptions, il vaut mieux commencer à vous familiariser avec les polices variables.</p>
<p>C'est vraiment un grand signe de voir une innovation comme celle-ci se produire dans la conception Web. Il montre la pertinence et l'efficacité du développement Web. Et montrez que la route à suivre mène à un avenir meilleur avec plus de liberté pour la créativité et, bien sûr, à un endroit où les sites Web se chargent plus rapidement.</p>
<aside class=

Collections de polices

Ceci est notre série de belles collections inspirantes de polices et de polices de caractères. Ces articles présentent des polices d'affiche audacieuses, des scripts décoratifs et tout le reste! Trouvez la police parfaite pour votre prochain projet de design avec l'une de ces collections.

Lire la fonctionnalité →

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *