Optical Size
L'axe opsz de Fraunces adapte les détails typographiques selon la taille : empattements, contrastes et interlettres varient de 9 à 144, en CSS pur.
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 sur la propriété CSS font-variation-settings, qui expose les axes d'une police variable. L'axe standardisé "opsz" (optical size) produit deux dessins distincts selon sa valeur : une valeur basse génère une coupe texte (traits ouverts, empattements larges, contraste réduit) ; une valeur haute génère une coupe display (empattements acérés, contraste stroke élevé, interlettres plus serrés). Aucun JavaScript, aucune image — une règle CSS par niveau de taille suffit.
Fraunces est une police variable serif dont l'axe opsz s'étend de 9 à 144 et l'axe wght de 100 à 900. À opsz 144 / wght 700, les empattements sont fins et contrastés, taillés pour un titre en display. À opsz 9 / wght 400, les traits s'ouvrent et les empattements s'élargissent pour rester lisibles en petit corps. La valeur opsz 48 constitue un niveau intermédiaire naturel pour les sous-titres.
Trois classes CSS appliquent chacune une paire de valeurs précise. .vf-opsz-large fixe font-variation-settings: "opsz" 144, "wght" 700 sur un corps de 2rem. .vf-opsz-medium fixe "opsz" 48, "wght" 500 à 1rem. .vf-opsz-small fixe "opsz" 9, "wght" 400 à 0.75rem. Les trois niveaux sont empilés dans .vf-opsz-scene (flex-column, gap: 20px, centrage horizontal). Juxtaposés, ils révèlent que l'axe opsz est un redesign adaptatif des formes, pas un simple zoom.
Les étiquettes .vf-opsz-tag utilisent Recursive avec font-variation-settings: "MONO" 1 — la police passe en rendu monospace sans changer de famille. Elles affichent la valeur opsz active de chaque couche et portent un badge violet semi-transparent (rgba(139,92,246,.15)) pour rester discrètes tout en informant.
Accessibilité
- Aucune animation : l'effet est entièrement statique (pur CSS, zéro
requestAnimationFrame).prefers-reduced-motionest sans objet — aucun mouvement à réduire. - Contraste texte principal : blanc (#ffffff) sur fond noir (#0a0a0f) — ratio ≥ 7:1, WCAG AAA. Le texte
.vf-opsz-smallàrgba(255,255,255,.5)atteint ~4,6:1 AA à la taille rendue (≥ 12px). - Les
<span class="vf-opsz-tag">sont lus par les lecteurs d'écran (ex. : « opsz 144 »). S'ils sont purement décoratifs, ajouteraria-hidden="true"sur chaque span. - Aucun élément interactif dans la structure de base — pas de tabulation requise. Aucun focus trap introduit si un composant parent est cliquable.
- Fallback typographique :
font-family: Fraunces, serif— si la police variable n'est pas chargée, le texte reste lisible en serif système sans erreur JS ni crash visuel.
Compatibilité navigateur
Nécessite font-variation-settings (polices variables CSS) — supporté dans tous les navigateurs modernes depuis 2018. Zéro dépendance JS.
Si Fraunces n'est pas chargée, le navigateur affiche la police <code>serif</code> système — le texte reste lisible mais la démonstration de l'axe opsz est perdue. Charger Fraunces depuis Google Fonts (<code>opsz,wght@9..144,100..900</code>) garantit le rendu attendu.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-opsz-scene">
<div class="vf-opsz-row">
<div class="vf-opsz-large">Titre display
<span class="vf-opsz-tag">opsz 144</span>
</div>
</div>
<div class="vf-opsz-row">
<div class="vf-opsz-medium">Sous-titre
<span class="vf-opsz-tag">opsz 48</span>
</div>
</div>
<div class="vf-opsz-row">
<div class="vf-opsz-small">Texte courant — corps adapté à la lecture
<span class="vf-opsz-tag">opsz 9</span>
</div>
</div>
</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-variation-settings: "opsz" 144 | 144 | Valeur display dans .vf-opsz-large — plage valide Fraunces : 9–144. Réduire à 72 pour un display plus doux. |
| font-variation-settings: "opsz" 48 | 48 | Valeur intermédiaire dans .vf-opsz-medium — descendre à 24–30 pour un h3 ou une légende. |
| font-variation-settings: "opsz" 9 | 9 | Valeur body dans .vf-opsz-small — optimisé pour ≈ 12px. Monter à 14 pour des corps 16–18px. |
| font-variation-settings: "wght" (par niveau) | 700 / 500 / 400 | Graisse indépendante par niveau, librement ajustable sans impacter l'opsz. Ex. : wght 900 pour un display très gras. |
| font-size (.vf-opsz-large) | 2rem | Taille CSS du niveau display — augmenter à 3–4rem pour un hero plein écran. Fraunces supporte de très grands corps sans perte de qualité. |
| font-family: Fraunces, serif | Fraunces | Remplacez par toute police variable possédant un axe opsz (Literata, Newsreader, Source Serif 4…). La plage de l'axe varie selon la police. |
| gap (.vf-opsz-scene) | 20px | Espacement vertical entre les 3 niveaux typographiques dans le conteneur flex-column. |
FAQ
opsz (9–144) et wght (100–900). Chargez-la via : <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap" rel="stylesheet">. Les étiquettes utilisent Recursive (axe MONO) — omettez-les si vous n'en avez pas besoin.opsz modifie les coordonnées des glyphes : à opsz 9, les empattements s'élargissent, les traits fins s'ouvrent et les contrastes se réduisent pour compenser l'effet optique du petit corps. À opsz 144, les empattements s'affinent et les contrastes s'amplifient pour l'impact display. Ce n'est pas un redimensionnement CSS — les formes changent effectivement.font-variation-settings est animable en CSS (transition: font-variation-settings 0.4s ease) et en JavaScript (el.style.fontVariationSettings = '"opsz" 72, "wght" 600'). Le navigateur interpole les valeurs d'axe frame par frame — utile pour un hover qui fait glisser un titre d'opsz 48 vers opsz 144.
