Trouvez-vous fastidieux de garder une trace de plusieurs fichiers de polices pour différents poids et styles ? Créer des fichiers distincts pour les polices ordinaires, grasses, italiques et autres variantes de polices peut être un défi pour les concepteurs Web. Cela complique le processus de création et obstrue leur flux de travail. Que diriez-vous de combiner toutes ces variantes en un seul fichier ?
C'est là que les polices variables entrent en jeu. Les polices variables constituent une avancée révolutionnaire dans la technologie de police OpenType qui permet à un fichier de police de contenir plusieurs variantes, telles que régulière, grasse et italique. Cela implique que les concepteurs doivent simplement travailler avec un seul fichier pour accéder à tous les poids, styles et largeurs dont ils ont besoin. Cette invention permet de modifier facilement et constamment des caractéristiques telles que le poids, la largeur et l'inclinaison, ce qui rationalise le processus de conception et favorise la liberté de création.
En utilisant la police Kyiv Sans comme exemple, cet article examinera la pertinence des différentes polices en CSS et démontrera l'importance de qualités telles que le poids et même de variations de polices non standard comme MIDL. À l'aide de ces outils, nous apprendrons à produire une typographie dynamique et esthétiquement époustouflante en CSS.
L'architecture technologique des polices variables permet aux concepteurs et aux développeurs de contrôler instantanément ces caractéristiques typographiques à l'aide de CSS, permettant ainsi des modifications exactes pour s'adapter aux exigences particulières d'un projet. Cela améliore les performances Web en réduisant considérablement les temps de chargement et en remplaçant de nombreux fichiers de polices statiques par un seul fichier de police variable.
Avec leur degré de flexibilité et de précision auparavant inconnu avec les fichiers de polices statiques classiques, les polices variables constituent un développement majeur dans la technologie typographique. Contrairement aux polices traditionnelles, qui nécessitent des fichiers séparés pour chaque style et chaque épaisseur, les polices variables capturent plusieurs styles dans un seul fichier évolutif. Ceci est accompli grâce au style de police OpenType, qui permet une variation constante le long d'un ou plusieurs axes, tels que le poids, la largeur et la taille optique.
Nous vous expliquerons comment créer une typographie CSS dynamique et esthétique à l'aide de ces outils. Examinons quelques exemples :
Efficacité : En combinant plusieurs styles de police dans un seul fichier, les polices variables minimisent les requêtes HTTP, accélérant ainsi le chargement des pages et l'efficacité globale.
Flexibilité : Les concepteurs peuvent modifier avec précision la typographie pour l'adapter à différents contextes de conception et préférences de l'utilisateur en raison de leur contrôle précis sur les propriétés telles que le poids et les propriétés personnalisées telles que MIDL et CONT.
Transitions fluides : Les polices variables permettent des modifications dynamiques des styles de police, évitant ainsi les changements brusques entre des fichiers de polices discrets. En conséquence, les transitions entre les styles de police sont douces et fluides.
Typographie réactive : Les polices variables permettent une typographie réactive en permettant des ajustements en fonction de la taille de la fenêtre d'affichage ou d'autres paramètres définis par l'utilisateur, garantissant une lisibilité et un attrait esthétique optimaux sur tous les appareils.
Typographie dynamique : Les polices variables fournissent des changements en temps réel en fonction de l'interaction de l'utilisateur ou des conditions environnementales, favorisant ainsi la dynamique, améliorant l'implication de l'utilisateur et générant des expériences immersives.
Accessibilité : Une gamme plus large d'options typographiques permet la personnalisation et la modification du texte pour garantir la lisibilité et la lisibilité sur divers appareils et préférences de l'utilisateur.
Esthétique : Sur le Web, les polices variables inspirent des idées de conception créatives et défient les limites typographiques, ouvrant de nouvelles opportunités d'expression et d'expérimentation typographiques.
Évolutivité : Les polices variables sont parfaites pour un design réactif et garantissent que le texte est clair et lisible quelle que soit la taille ou la résolution, car elles sont évolutives sans perte de qualité.
La conception Web moderne permet aux concepteurs de créer des expériences typographiques plus flexibles et captivantes en utilisant une typographie réactive et dynamique avec des polices changeantes, disséquons les idées :
Variables dans les polices : les polices variables sont un fichier de police unique avec plusieurs variantes d'une police, y compris le poids et les propriétés spéciales MIDL et CONT. Les polices variables offrent plus de liberté et d'efficacité dans la conception typographique que les polices conventionnelles, qui nécessitent des fichiers distincts pour chaque style et permettent des transitions fluides entre ces variantes.
Typographie réactive : Concevoir du texte pour qu'il s'adapte facilement à de nombreuses tailles d'écran, résolutions et environnements de visualisation est connu sous le nom de typographie réactive. Des gros ordinateurs de bureau aux téléphones portables et tout le reste, cela garantit la meilleure lisibilité et esthétique sur de nombreux appareils. La taille de police dynamique, l'espacement des lignes et d'autres modifications typographiques aident la typographie réactive à améliorer l'expérience utilisateur et l'accessibilité.
Typographie dynamique : La typographie dynamique améliore la typographie réactive en incorporant l'interaction et l'animation dans la conception typographique. JavaScript et CSS (Cascading Style Sheets) aident les concepteurs à développer des polices de caractères adaptées aux modifications de contenu, aux interactions des utilisateurs ou au comportement de défilement. La typographie dynamique utilise des composants tels que wght, MIDL et CONT pour générer une attractivité visuelle et une interactivité, guidant l'attention des utilisateurs et les attirant.
Les concepteurs créent des expériences typographiques en ligne riches, polyvalentes et immersives en combinant des méthodes de typographie dynamiques et flexibles avec différentes polices. Qu'il s'agisse de changer dynamiquement la police en réponse à l'activité de l'utilisateur, d'animer des éléments de texte pour mettre en évidence des informations importantes ou d'ajuster l'épaisseur et la taille de la police en fonction des dimensions de l'écran, cette approche offre de nombreuses possibilités de créativité et d'invention dans la conception numérique.
Les différentes propriétés de police de Kyiv Sans permettent aux concepteurs de créer des transitions typographiques intrigantes et impeccables. Cela améliore l'interaction et la convivialité des documents Web en augmentant leur attrait esthétique et leur utilité.
Diverses polices offrent une gamme de nouvelles caractéristiques absentes des polices statiques traditionnelles. Connaître ces caractéristiques est nécessaire pour utiliser tout le potentiel des polices modifiables. En voici quelques-uns de base :
Poids (wght) : En faisant varier leur poids le long d'un axe continu, les polices variables permettent des transitions fluides entre plusieurs niveaux d'épaisseur. Les concepteurs peuvent indiquer une gamme de graisses dans un seul fichier de police, de légère à ultra-gras et tous les points intermédiaires.
Effet de calque intermédiaire (MIDL) : Cet axe personnalisé permet aux concepteurs de modifier un effet de calque intermédiaire dans la police. Cela peut donner au texte un style visuel distinctif, ainsi qu'un degré supplémentaire de liberté de conception et d'inventivité.
Contraste (CONT) : Un autre axe personnalisé est CONT, qui permet de modifier le contraste de la police. En modifiant dynamiquement le contraste en fonction des exigences de conception, cela peut contribuer à maximiser la lisibilité et l'attractivité visuelle du texte.
Comprendre et appliquer ces qualités aidera les concepteurs à produire des polices visuellement frappantes. Avec ses caractéristiques de police variées, Kyiv Sans présente des choix de personnalisation spéciaux qui améliorent la convivialité et l'apparence de la typographie Web.
Au-delà des modifications conventionnelles de poids, de largeur et de taille optique, les polices variables offrent un large éventail de choix de personnalisation. Ci-dessous un récapitulatif des axes et variantes qui pourraient être disponibles :
Plusieurs axes enregistrés que les concepteurs de polices variables peuvent utiliser sont définis par la spécification OpenType :
Largeur (wdth) : Cet axe contrôle l'expansion ou la condensation horizontale de la police, permettant aux concepteurs de modifier la largeur des caractères. En ajustant cet axe, les concepteurs peuvent créer des polices qui semblent plus étroites ou plus larges sans modifier la hauteur globale, ce qui permet une gamme flexible de styles condensés à étendus.
Slant (slnt) : Cet axe permet aux concepteurs d'appliquer une inclinaison de type italique aux caractères sans altérer la structure des lettres. L'axe incliné imite généralement l'effet de l'italique traditionnel mais conserve les formes de lettres verticales, ce qui le rend utile pour créer des variations stylistiques.
Italique (italique) : L'axe italique bascule entre les versions verticales et italiques d'une police de caractères. Contrairement à l'axe incliné, qui incline uniquement les caractères, l'axe italique implique une refonte complète des caractères pour refléter la nature cursive de l'italique véritable, offrant ainsi un style italique plus authentique.
Taille optique (opsz) : cet axe ajuste la conception de la police pour optimiser la lisibilité à différentes tailles. Par exemple, les formats plus petits peuvent comporter des traits plus épais et des compteurs plus ouverts pour une meilleure lisibilité, tandis que les formats plus grands peuvent être plus raffinés et délicats. Cet axe est particulièrement utile pour la typographie responsive sur divers supports.
Grade (GRAD) : L’axe de qualité permet des ajustements subtils de l’épaisseur du trait de la police sans affecter l’espacement global. Il est utile pour améliorer la lisibilité dans différents environnements d'impression ou d'écran, où une légère augmentation ou diminution du poids peut améliorer le contraste et la clarté.
Contraste (CNTR) : Cet axe modifie le contraste entre les traits épais et fins au sein d'une police. En ajustant le contraste, les concepteurs peuvent créer des polices avec différents niveaux d'accent et d'impact visuel, allant de styles humanistes à faible contraste à des designs modernes à contraste élevé.
Hauteur X (xhgt) : Cet axe ajuste la hauteur des lettres minuscules par rapport aux lettres majuscules de la police. Augmenter la hauteur x peut améliorer la lisibilité dans les petites tailles ou créer une apparence plus moderne, tandis que la diminuer peut évoquer une sensation plus traditionnelle ou formelle.
Outre les axes enregistrés, les créateurs de polices variables peuvent spécifier leurs propres axes personnalisés. Concernant Kyiv Sans : ceux-ci comprennent :
Effet de couche intermédiaire (MIDL) : cet axe personnalisé offre aux concepteurs une plus grande polyvalence de conception et leur permet de modifier un effet de couche intermédiaire spécifique à l'intérieur de la police, ajoutant ainsi des aspects de style originaux.
Contraste (CONT) : cet axe personnalisé permet de contrôler le contraste entre les traits épais et fins dans les formes de lettres. Les concepteurs peuvent modifier dynamiquement cette caractéristique pour obtenir divers degrés d'expressivité typographique, allant de contrastes atténués à des variations plus évidentes.
Outre les axes enregistrés, la possibilité de construire de nouveaux axes permet aux concepteurs de polices d'atteindre un haut degré de personnalisation et un contrôle sophistiqué sur l'apparence et les caractéristiques d'une police. Les axes personnalisés comme MIDL et CONT, par exemple, permettent aux concepteurs d'adapter les qualités particulières de la police, ce qui donne lieu à une typographie flexible et expressive. Ces personnalisations, combinées à l'enregistrement de polices variables, offrent de nombreuses façons de créer divers effets typographiques. Par exemple, l’axe MIDL (Middle Layer Effect) permet aux concepteurs de modifier une couche intermédiaire unique au sein de la police, en ajoutant des qualités visuelles distinctives qui améliorent la liberté artistique. L'axe Contraste (CONT), quant à lui, contrôle la variation entre les traits épais et fins, permettant des ajustements dynamiques allant de contrastes subtils à prononcés. En interagissant avec des axes tels que l'épaisseur et l'effet de couche intermédiaire, les concepteurs peuvent créer du texte avec différentes épaisseurs et des styles uniques, obtenant ainsi un contrôle précis sur l'apparence de la police. De même, la combinaison des variations d'épaisseur et de contraste permet de créer un texte avec différents degrés de gras et de contraste des traits, équilibrant ainsi l'impact visuel et la lisibilité. Ces exemples démontrent la liberté inégalée qu'offrent les axes enregistrés et personnalisés, permettant aux concepteurs d'aligner les polices de caractères avec leurs préférences esthétiques spécifiques et leurs objectifs de conception.
Maintenant que vous êtes fasciné par les possibilités des polices modifiables, voyons comment les appliquer dans des projets Web basés sur CSS. CSS offre les moyens d'utiliser correctement les capacités de ces polices adaptables. Définissez d'abord la police avec @font-face, qui vous permet de fournir les différents fichiers de police et leurs caractéristiques. Une fois la police définie, vous pouvez modifier dynamiquement les axes de la police à l'aide de différents attributs CSS, maximisant ainsi les possibilités offertes par différentes polices.
Tout d'abord, nous devons télécharger la police variable que nous voulons pour notre projet.
Quelques sites Web sur Internet nous permettent d'accéder à différents fichiers de polices. Certains des sites Web de polices les plus fréquemment utilisés sont les suivants :
Pour cet exemple, nous irons sur Vfonts.com pour télécharger notre police variable Kyiv Sans. Le format de fichier ttf ou woff2 fonctionne bien, mais nous utiliserons un ttf dans cette démonstration. Si vous devez convertir votre fichier de police de ttf en woff2, rendez-vous sur everythingfonts.com :
La capture d'écran ci-dessus montre ce que vous verrez lorsque vous arriverez à Vfont.
Nous divisons le projet selon les étapes suivantes :
Accédez à vfont : visitez le site Web sur lequel des ressources de polices variables sont disponibles.
Sélectionnez Kyiv* Type : choisissez la police Kyiv* Type, qui vous redirigera vers Behance.net où la police est hébergée.
Accédez au lien de téléchargement : sur la page Behance, faites défiler vers le bas pour trouver un lien pour télécharger la police.
Télécharger depuis Google Drive : cliquez sur le lien de téléchargement, qui vous mènera à un dossier Google Drive. Téléchargez le fichier de police à partir de là.
Décompressez le fichier : après le téléchargement, décompressez le fichier pour accéder à son contenu.
Vérifier les options de police : le dossier décompressé contient plusieurs options parmi lesquelles choisir.
Sélectionnez la police variable : concentrez-vous sur les fichiers qui incluent la police variable.
Utiliser la police Sans : configurez et utilisez la version Sans de la police. Notez que le fichier de poids de police Sans fait 360 Ko, ce qui équivaut à l'utilisation de huit fichiers de polices non variables.
Évaluez le compromis : déterminez si l'utilisation de polices variables en vaut la peine pour votre projet. Si vous n’avez besoin que de styles réguliers, gras et italiques, il n’est peut-être pas nécessaire d’utiliser des polices variables. Cependant, si vous avez besoin d'un contrôle avancé sur les variations, les polices variables peuvent être très utiles.
Remarque : ces fichiers ci-dessus sont au format TTF.
Nous allons maintenant nous diriger vers VSCode, où nous utiliserons un projet vanilla vite.
Pour commencer à travailler sur le projet, vous devez installer les packages nécessaires. Vous devez suivre les étapes ci-dessous :
Ouvrez un nouveau terminal.
Exécutez la commande
npm create vite@latest
Nommez votre projet.
Nommez votre colis.
Sélectionnez un framework Vanilla.
Sélectionnez la variante JavaScript.
Exécuter npm install vous aidera à négocier le projet et à installer les modules nécessaires.
Après avoir configuré les dépendances, utilisez la commande suivante pour lancer l'application :
npm run dev
Visitez http://localhost:your-port-number pour accéder au programme en cours d'exécution sur votre navigateur.
Une fois notre projet terminé, nous disposerons d'une multitude de codes fictifs que nous pourrons modifier pour créer l'application prévue. La police variable téléchargée doit être déposée dans un dossier de polices, qui sera lui-même déposé dans le dossier public. Nous remplacerons tout le code fictif inutile dans style.css, main.js et index.html.
Le code index.html devrait ressembler à ceci :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Variable font</title>
</head>
<body>
<div>
<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>
<p>The main.js code should look something like this:<br>
</p>
<pre class="brush:php;toolbar:false">import "./style.css";
document.querySelector("#app").innerHTML = `
<div>
<h1>
<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>
<p>And the style.css code should look something like this:<br>
</p>
<pre class="brush:php;toolbar:false">body {
font-family: 'Kyiv Sans';
}
@font-face {
font-family: 'Kyiv Sans';
src: url('/font/KyivTypeSans-VarGX.ttf');
font-weight: 0 1000;
font-display: swap;
}
h1 {
color: #bd0c0c;
height: 100vh;
display: grid;
place-content: center;
margin: 0;
text-align: center;
}
.variable-font {
font-family: 'Kyiv Sans';
font-size: 5rem;
line-height: 1.1;
font-weight: 100;
font-variation-settings:
'wght' 100, 'CONT' 250, 'MIDL' 0;
transition: font-variation-settings 500ms;
}
.variable-font:hover {
font-weight: 1000;
font-variation-settings:
'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}
Maintenant, expliquons ce qui se passe dans le code ci-dessus :
Définition de la police par défaut pour le corps :
npm create vite@latest
Définition de la police personnalisée :
npm run dev
Styliser le Style de la classe .variable-font : Ajout d'un effet de survol pour .variable-font : À la fin, notre résultat ressemblera un peu à ceci ; En permettant aux concepteurs de réaliser une adaptation parfaite sur de nombreux appareils et tailles d'écran, la typographie réactive avec des polices variées transforme la conception en ligne. Une polyvalence inégalée vient des polices variables, qui permettent des changements constants dans les attributs de police, notamment le poids, la largeur et le contraste, au sein d'un seul fichier de police. Les concepteurs peuvent modifier dynamiquement ces attributs de police pour améliorer la lisibilité et l'esthétique à l'aide de CSS et de requêtes multimédias, garantissant ainsi que le texte s'affichera le mieux sur n'importe quel appareil, des écrans de bureau aux téléphones portables. Étant donné qu’une seule police variable peut remplacer plusieurs fichiers de polices stationnaires, elle réduit le besoin de chargement de polices volumineux et améliore les performances du site Web. Cette flexibilité améliore non seulement l'expérience utilisateur, mais rationalise également le processus de conception. Sans typographie réactive, qui devient plus attrayante, efficace et accessible avec différentes polices, la conception Web moderne ne peut pas exister. Les requêtes multimédias sont la pierre angulaire de la conception Web réactive, agissant comme les maîtres de l'adaptation de la taille de l'écran. Basés sur les fonctionnalités de l'appareil de l'utilisateur, telles que la largeur, la hauteur, la résolution et l'orientation de l'écran, ils permettent aux concepteurs d'appliquer des styles CSS particuliers. Les recherches multimédias aident les concepteurs à s'assurer qu'un site Web s'affiche et fonctionne au mieux sur une variété d'appareils, des ordinateurs portables et moniteurs de bureau aux smartphones et tablettes. La puissance des requêtes multimédias réside dans leur capacité à produire des mises en page flexibles et fluides qui s'adaptent à différentes tailles d'écran. Les requêtes multimédias permettent à un concepteur de modifier la taille des polices, de modifier la disposition des grilles et même de masquer ou d'afficher certains éléments en fonction des mesures de la fenêtre d'affichage. Cela garantit que le matériau conserve son attrait esthétique et son accessibilité, quel que soit l'appareil utilisé. Les requêtes multimédias définissent des points d'arrêt, des endroits spécifiques auxquels la mise en page s'ajuste pour s'adapter à différentes tailles d'écran. Ciblant différents appareils, ces points d'arrêt sont définis en utilisant la largeur minimale, la largeur maximale et d'autres caractéristiques CSS. Par exemple, une requête multimédia peut spécifier l'utilisation d'une mise en page adaptée aux mobiles pour les largeurs d'écran de 768 pixels ou moins et une mise en page différente pour les écrans plus grands. L'intégration des recherches multimédias dans la conception Web améliore l'accessibilité et l'expérience utilisateur. Sur toutes les plateformes, les requêtes multimédias contribuent à développer des expériences numériques inclusives en garantissant que le texte est lisible, la navigation est intuitive et le matériel est bien organisé. Tout concepteur de sites Web souhaitant créer des sites Web réactifs, adaptables et conviviaux doit d'abord apprendre les requêtes multimédias à l'ère de l'utilisation variée des appareils. Voici un exemple : Dans cet exemple, nous avons utilisé des requêtes multimédias pour ajuster les paramètres de variation de police et le poids de notre police en fonction de la taille de l'écran. Pour les appareils d'une largeur maximale de 600 px, la taille de la police est réduite à 3rem. Le poids et les autres variations sont ajustés en conséquence pour les effets :hover. Pour les appareils d'une largeur comprise entre 601 px et 1 200 px, la taille de la police est définie sur 4rem, avec un poids et des variations ajustés. Pour les appareils d'une largeur de 1201px et plus, la taille de la police est de 5rem, en conservant les paramètres d'origine. L'image ci-dessus montre l'affichage pour les petits écrans L'image ci-dessus montre l'affichage pour les écrans moyens L'image ci-dessus montre l'affichage pour les grands écrans Les unités Viewport sont un outil puissant dans la conception Web moderne, permettant la création de mises en page fluides et réactives qui s'adaptent parfaitement aux différentes tailles d'écran. Les unités de fenêtre incluent vw (largeur de la fenêtre) et vh (hauteur de la fenêtre), qui sont relatives aux dimensions de la fenêtre du navigateur. Un vw équivaut à 1 % de la largeur de la fenêtre et un vh équivaut à 1 % de la hauteur de la fenêtre. Ces unités aident les concepteurs à garantir que les éléments évoluent en fonction de la taille de l'écran de l'utilisateur, produisant ainsi un design plus dynamique et adaptable. La définition de la taille de la police, du remplissage ou des marges dans les unités de fenêtre, par exemple, permet au texte et aux objets de se redimensionner automatiquement, préservant ainsi une apparence cohérente sur plusieurs appareils. Cette adaptabilité améliore l'expérience utilisateur en garantissant que le contenu reste lisible et esthétique, quel que soit l'affichage du site sur un grand écran de bureau ou un petit écran mobile. Les unités Viewport permettent aux concepteurs de créer des mises en page adaptables qui se déplacent facilement pour s'adapter au terrain en constante évolution des gadgets numériques. Voici un exemple d'utilisation de vw pour ajuster la taille de la police en fonction de la largeur de la fenêtre : Dans cet exemple, à partir du code ci-dessus, la propriété font-size de .variable-font est définie en utilisant les unités vw de largeur de fenêtre, ce qui rend la taille du texte sensible à la largeur de la fenêtre. Nous pouvons combiner des recherches multimédias et des unités de fenêtre avec différentes caractéristiques de police pour créer une typographie véritablement réactive qui s'adapte avec élégance à chaque appareil ou taille d'écran. Cela nous permet d'offrir une expérience utilisateur exceptionnelle, quelle que soit la méthode d'accès choisie par quelqu'un pour notre site Web. Les polices variables permettent aux concepteurs de créer des styles de texte hautement personnalisés et dynamiques en ouvrant un nouveau champ d'effets typographiques complexes. Les concepteurs peuvent désormais créer des transitions fluides et des effets visuels inhabituels, auparavant difficiles à réaliser avec les polices fixes, en ajustant continuellement les caractéristiques telles que l'épaisseur, la largeur et les axes personnalisés. L'épaisseur, le contraste et la ligne médiane peuvent être modifiés dynamiquement en ajustant la police, offrant ainsi un contrôle complexe sur l'apparence du texte. Cette adaptabilité est très forte dans le design réactif, dans lequel les polices peuvent facilement s'adapter à différentes tailles et orientations d'écran. De plus, les animations interactives permettent au texte de répondre aux actions de l'utilisateur telles que le survol ou le clic, produisant ainsi des rencontres intrigantes et immersives. Les unités de fenêtre, combinées à diverses caractéristiques de police, garantissent que la typographie reste fluide et évolutive, améliorant ainsi la lisibilité et l'apparence sur tous types d'appareils. Grâce à ces fonctionnalités sophistiquées, les concepteurs peuvent créer du matériel numérique visuellement saisissant en étendant les possibilités de la typographie conventionnelle. Explorons quelques méthodes fascinantes pour repousser les limites de la typographie en ligne : La typographie fluide est une méthode de conception dans laquelle le texte s'adapte dynamiquement à la taille de la fenêtre d'affichage, offrant ainsi une expérience de lecture fluide et réactive sur de nombreux appareils. Les unités de fenêtre, les recherches multimédias et les polices modifiables permettent à une typographie fluide de garantir que le texte reste intelligible et visuellement équilibré, quelle que soit la taille de l'écran. Cette méthode élimine le besoin de tailles de police fixes et permet des modifications transparentes, améliorant ainsi la lisibilité et l'apparence d'une manière qui s'adapte à des conditions d'affichage très différentes. Voici un exemple : Comment ça marche : Fonction calc() : Cette fonction génère un effet de mise à l'échelle fluide en combinant des unités relatives vw, avec des valeurs fixes rem. font-size, par exemple, calc(2rem 2vw) réagit à la largeur de la fenêtre d'affichage et assure une taille de base. Typographie fluide pour divers éléments : De nombreux éléments tels que h1, h2 et p garantissent un texte adapté à l'échelle des appareils utilisant la typographie fluide. La fonction calc() fournit une taille de base avec un facteur de mise à l'échelle qui change avec la largeur de la fenêtre. Polices variables : En combinant une typographie fluide avec des polices modifiables, vous pouvez obtenir des changements dynamiques dans les attributs du texte en fonction de la taille de la fenêtre d'affichage. En animant le texte, la typographie cinétique lui donne vie et génère des effets visuels intéressants et dynamiques qui captivent les spectateurs. Cette méthode ajoute du mouvement et de l'interaction en modifiant les attributs du texte à l'aide d'animations JavaScript et CSS. En utilisant un effet :hover pour animer l'épaisseur de la police dans notre exemple avec la police variable, nous avons démontré une typographie cinétique, c'est-à-dire une transition transparente des épaisseurs les plus claires aux plus audacieuses. Cela met non seulement l'accent sur le contenu, mais montre également comment, grâce à des changements fluides et en temps réel, différentes polices peuvent améliorer les interactions des utilisateurs. La typographie cinétique permet aux concepteurs d'améliorer l'attractivité visuelle et la convivialité de leur texte, renforçant ainsi son rôle fondamental dans un environnement numérique interactif et intéressant. Ici, nous utilisons une transition douce pour animer le poids de l'élément .variable-font de 100 normal à 1000 gras au survol, créant un effet subtil mais percutant. Ce ne sont là que quelques-unes des opportunités imaginatives qu'offrent les différentes polices. Des animations dynamiques aux mises en page fluides, il existe de nombreuses possibilités de création de polices distinctives et intrigantes. Avec un peu d'inventivité et de compréhension du CSS, nous pouvons remettre en question les normes de conception Web et produire des expériences utilisateur plutôt remarquables. Polices variables : Kyiv Sans transforme la typographie sur le Web en regroupant plusieurs styles de police dans un seul fichier. En réduisant le nombre de requêtes HTTP, cette invention simplifie les processus, augmente la flexibilité de conception et améliore les performances. Les concepteurs peuvent utiliser pleinement les polices modifiables en CSS pour produire des polices réactives et dynamiques qui s'adaptent parfaitement à différentes tailles d'écran et interactions utilisateur. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois! Élément :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Variable font</title>
</head>
<body>
<div>
<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>
<p>The main.js code should look something like this:<br>
</p>
<pre class="brush:php;toolbar:false">import "./style.css";
document.querySelector("#app").innerHTML = `
<div>
<h1>
<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>
<p>And the style.css code should look something like this:<br>
</p>
<pre class="brush:php;toolbar:false">body {
font-family: 'Kyiv Sans';
}
@font-face {
font-family: 'Kyiv Sans';
src: url('/font/KyivTypeSans-VarGX.ttf');
font-weight: 0 1000;
font-display: swap;
}
h1 {
color: #bd0c0c;
height: 100vh;
display: grid;
place-content: center;
margin: 0;
text-align: center;
}
.variable-font {
font-family: 'Kyiv Sans';
font-size: 5rem;
line-height: 1.1;
font-weight: 100;
font-variation-settings:
'wght' 100, 'CONT' 250, 'MIDL' 0;
transition: font-variation-settings 500ms;
}
.variable-font:hover {
font-weight: 1000;
font-variation-settings:
'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}
Copier après la connexionCopier après la connexion
L'élément s'étend sur toute la hauteur de la fenêtre.
.
body {
font-family: 'Kyiv Sans';
}
Copier après la connexion
npm create vite@latest
Copier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexion
Création d'une typographie réactive avec des polices variables
Requêtes multimédias : les maîtres de l'adaptation de la taille de l'écran
npm create vite@latest
Copier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexion
Ces requêtes multimédias garantissent que la police s'adapte à différentes tailles d'écran, améliorant ainsi la lisibilité et l'expérience utilisateur sur différents appareils.
Unités de fenêtre : rendre les mises en page fluides
npm create vite@latest
Copier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexion
Effets typographiques avancés avec polices variables
Typographie fluide
npm run dev
Copier après la connexionCopier après la connexionCopier après la connexion
Cette méthode garantit que le texte reste esthétique et lisible sur un large éventail d'appareils et de tailles d'écran.
Exemple : Animation du poids au survol
npm create vite@latest
Copier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexionCopier après la connexion
Conclusion
Les concepteurs peuvent créer des expériences typographiques visuellement attrayantes et facilement accessibles en utilisant des attributs tels que l'épaisseur, les effets de couche intermédiaire et le contraste, ainsi que des approches réactives telles que les requêtes multimédias et les unités de fenêtre. Les polices variables sont un outil nécessaire pour la conception Web contemporaine car leur fluidité permet de nouvelles orientations pour l'expression artistique.
Ressources
Références
Comment rendre l'arrière-plan transparent dans PS
Méthode de projet de démarrage Webstorm
Comment utiliser la fonction choisir
Les données entre le système Hongmeng et le système Android peuvent-elles être interopérables ?
entrée du site officiel de la plateforme de trading okx
Quel fichier est .exe
La différence entre scratch et python
tutoriel d'installation du guide du serveur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
