Typography Adapts
Titre et paragraphe dont la taille, la graisse, l'interlettrage et l'interligne changent en quatre paliers selon la largeur du bloc qui les contient.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0759-root (fond #0a0a0f, pleine largeur) déclare container: tya-text / inline-size. Dedans, .tya-block ajoute 16 px de marge intérieure autour d'un h3 et d'un paragraphe. Au plus étroit, le titre fait 12 px en graisse 800 et le texte 10 px, interligne 1,4 : de quoi tenir dans une vignette.
Trois règles @container tya-text prennent le relais. À 250 px : titre 18 px resserré (letter-spacing: -0.02em), texte 13 px légèrement aéré. À 400 px : titre 26 px en graisse 700, texte 15 px, interligne 1,6. À 550 px : titre 34 px très resserré (-0.04em), texte 17 px, interligne 1,7. Le titre se resserre à mesure qu'il grossit et le texte s'aère, comme on le fait à la main dans une mise en page de magazine.
Chaque passage se fait en douceur grâce à transition: .4s sur le bloc, le titre et le paragraphe. Le composant ne contient aucun script : ce sont uniquement des règles CSS appliquées à la largeur réelle du bloc.
Accessibilité
- Petit palier très petit : sous 250 px, le paragraphe fait 10 px, en dessous de ce que beaucoup de lecteurs lisent confortablement. Si le bloc risque d'être étroit sur mobile, remontez la taille de base de
.tya-block pà 12 ou 13 px. - Unités en pixels : les tailles sont en
px; le zoom du navigateur les agrandit, mais pas le réglage « taille du texte » de certains systèmes. Remplacez-les par desrempour respecter ce réglage. - Structure intacte : seuls les styles changent ; le titre reste un
h3(à adapter à votre hiérarchie) et le texte un paragraphe. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les transitions de taille sont supprimées.
Compatibilité navigateur
Requêtes de conteneur uniquement. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : quatre états aux mêmes largeurs (bascules entre 230 et 260, 380 et 430, 520 et 620 px), sans erreur ni débordement.
Sans @container, le texte reste au plus petit palier (12 px / 10 px) : prévoyez une taille de base plus grande si votre public utilise de vieux navigateurs.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0759-root">
<div class="tya-block">
<h3>Titre</h3>
<p>Paragraphe</p>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Paliers (CSS — @container tya-text (min-width: 250px / 400px / 550px)) |
250, 400 et 550 px | Supprimez le dernier si vos blocs ne dépassent jamais 500 px ; ajoutez un palier à 720 px pour une très grande citation. |
Tailles de base (CSS — .tya-block h3 et .tya-block p) |
12 px et 10 px | Montez à 15 px et 13 px pour garder le petit palier lisible sur mobile. |
Interlettrage du titre (CSS — letter-spacing par palier) |
0 → -0,02 → -0,03 → -0,04 em | Avec une police déjà serrée, gardez 0 aux deux premiers paliers. |
Couleurs (CSS — .fx-0759-root, h3, p) |
Fond #0a0a0f, titre blanc, texte blanc à 70 % |
Pour un fond clair : fond blanc, titre #111, texte #444. |
Vitesse (CSS — transition: .4s) |
0,4 s | none si le bloc change souvent de largeur (glisser une colonne) et que l'animation gêne. |
| Version continue (CSS) | Paliers | Pour une taille qui suit la largeur en continu, remplacez les paliers par font-size: clamp(12px, 6cqi, 34px) sur le titre (unités de conteneur). |
FAQ
clamp() en unités cqi pour la taille.h3 par votre balise dans le HTML et dans les règles .tya-block h3.
