Letter Spacing
Un texte bold dont l'espacement entre lettres passe de 0 à 8 px au survol par transition CSS native — zéro JavaScript, applicable à tout élément texte.
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 accumule deux classes sur le même <span>. .demo-text fixe la typographie (taille 2,5 rem, graisse 800, espacement initial -.02em). .text-spacing écrase cet espacement à 0 et déclare transition: letter-spacing .4s — le navigateur planifie l'interpolation sans aucun JS. La règle .text-spacing:hover { letter-spacing: 8px } est la seule instruction cible : au survol, l'espacement croît de 0 à 8 px ; au départ du curseur, il revient à 0.
CSS interpole letter-spacing nativement. L'easing implicite est ease (accélération puis décélération). Sur Chromium 112+, la transition letter-spacing est accélérée GPU sans repaint de layout — la propriété est animée dans le compositor thread. Sur Firefox et Safari, le moteur re-rend le bloc texte à chaque frame, mais l'animation reste fluide à 60 fps pour des textes courts. Aucun requestAnimationFrame, aucun écouteur d'événements : la source JS est vide.
Accessibilité
- prefers-reduced-motion : absent du code. Si votre public inclut des utilisateurs sensibles aux animations, ajoutez
@media (prefers-reduced-motion: reduce) { .text-spacing { transition: none } }dans votre feuille de style. - L'effet est uniquement déclenché au survol — inaccessible au clavier sans modification. Pour la navigation clavier, ajoutez
.text-spacing:focus { letter-spacing: 8px }. - Contraste : le code hérite
color: #fff(body) sur fond#0a0a0f— ratio ≥ 21:1, WCAG AAA. - Pas d'attribut
ariadans la structure : le changement est purement visuel, aucun état sémantique à communiquer aux lecteurs d'écran.
Compatibilité navigateur
CSS letter-spacing, transition et :hover sont universellement supportés depuis 2012. Zéro dépendance.
Sans support des transitions CSS (navigateurs très anciens), le texte affiche directement l'espacement cible au survol — aucune erreur, aucun JS manquant.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-spacing">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 |
|---|---|---|
| letter-spacing (cible) | 8px | Ligne letter-spacing: 8px dans .text-spacing:hover — amplitude d'expansion. 3–4 px pour un nav, 12–20 px pour un titre display. |
| transition durée | .4s | Dans transition: letter-spacing .4s sur .text-spacing — .2s pour un retour instantané, .6–.8s pour une inertie élégante. |
| transition easing | ease (implicite) | Remplacez .4s par .4s cubic-bezier(0.4,0,0.2,1) pour un ressort Material, ou .4s ease-out pour une décélération naturelle. |
| letter-spacing (départ) | 0 | Ligne letter-spacing: 0 dans .text-spacing — partez de -.05em pour un effet « serré → aéré » plus dramatique. |
| font-size | 2.5rem | Dans .demo-text — l'effet est plus spectaculaire sur des grands corps. En dessous de 1 rem, l'expansion en px est peu perceptible. |
| font-weight | 800 | Dans .demo-text — une graisse élevée (700–900) maximise le contraste visuel entre l'état serré et l'état écarté. |
FAQ
letter-spacing augmente la largeur rendue de l'élément inline. Pour éviter le layout shift, contenez le span dans un bloc à largeur fixée ou ajoutez min-width: max-content à l'item de nav pour réserver l'espace maximal dès le chargement..text-spacing:focus { letter-spacing: 8px }. En JS : toggle une classe CSS (el.classList.toggle('expanded')) avec .text-spacing.expanded { letter-spacing: 8px } — la transition CSS joue automatiquement dans les deux sens.letter-spacing est indépendant des axes d'une variable font. Vous pouvez combiner l'expansion de l'espacement avec une transition simultanée sur font-variation-settings (poids, largeur) — le navigateur interpole les deux propriétés en même temps.
