Variable Font Weight
Animation CSS pure qui fait glisser le grammage d'une police variable de 400 à 900 au survol — aucun script, un seul élément.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur CSS : la propriété font-weight de l'élément passe de 400 à 900 au survol grâce à une règle :hover, et la déclaration transition: font-weight .3s fait interpoler cette valeur en continu pendant 300 ms. L'interpolation n'est fluide que si la police chargée est une police variable supportant l'axe wght — Inter, spécifiée ici, couvre les valeurs 100 à 900 sans discontinuité.
Sur une police statique ou un système où Inter n'est pas disponible, le navigateur substitue sans-serif et la transition saute directement au poids le plus proche sans animation progressive. L'effet reste fonctionnel mais perd son glissement. Aucun JavaScript n'est chargé ni exécuté — le champ JS du code est une chaîne vide, l'effet est 100 % feuille de style.
Accessibilité
- prefers-reduced-motion : absent du code. La transition s'exécute quel que soit le réglage OS — si l'accessibilité vous importe, ajoutez
@media (prefers-reduced-motion: reduce) { .text-variable-weight { transition: none } }. - L'élément texte (
<span>) est un nœud textuel pur, entièrement lu par les lecteurs d'écran — aucun attributarian'est nécessaire pour cet effet décoratif. - L'effet est uniquement déclenché par
:hover; aucun état:focus-visiblen'est défini dans le code. Sur un lien ou un bouton interactif, pensez à ajouter un équivalent clavier. - Sur les appareils tactiles,
:hoverne se déclenche pas au toucher simple — l'animation reste invisible sans périphérique pointeur. - Le contraste texte/fond dépend entièrement du contexte d'intégration — l'effet ne définit ni couleur de texte ni couleur de fond.
Compatibilité navigateur
L'interpolation fluide du grammage requiert une police variable avec l'axe wght et un navigateur supportant les transitions CSS sur font-weight.
Si Inter n'est pas disponible comme police variable, la transition saute au poids cible sans interpolation — aucune erreur JS, le texte reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-variable-weight">Votre texte</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| font-weight (état normal) | 400 | Poids de départ au repos — utilisez 100–300 pour un contraste maximal avec la cible. |
| font-weight (:hover) | 900 | Poids cible au survol — toute valeur entière que la police variable supporte (100–900). |
| transition: font-weight .3s | .3s ease | Durée et easing de l'animation — .15s pour un pop vif, .6s ease-in-out pour un glissement cinématique. |
| font-family | Inter, sans-serif | Police utilisée — doit être une police variable avec l'axe wght (Inter, Roboto Flex, Manrope, Source Sans 3…). |
| font-size | 2.5rem (hérité de .demo-text) | Taille du texte — l'effet est d'autant plus lisible qu'il est grand. |
| letter-spacing | -.02em (hérité de .demo-text) | Interlettrage — à ajuster si le changement de grammage modifie le rythme optique du texte. |
FAQ
wght. Sur une police statique, le navigateur choisit la graisse la plus proche et la transition saute sans glissement. Inter chargé depuis Google Fonts (ou installé en police système) est variable et interpolera correctement..text-variable-weight { font-weight: 400 } et .text-variable-weight:hover { font-weight: 900 }. Toute paire d'entiers est valide tant que la police les supporte. Exemple : 100 → 800 pour un effet dramatique, 400 → 600 pour une subtilité d'interface.<span class="text-variable-weight">. Chaque span est autonome — l'état :hover est individuel et aucune initialisation JS n'est requise.
