Font stack
F
Definition complete
Le font stack (pile de polices) est la liste ordonnee de polices declaree dans la propriete CSS font-family. Le navigateur parcourt cette liste et utilise la premiere police disponible, garantissant un rendu typographique coherent quelles que soient les polices installees sur le systeme de l'utilisateur.
Un font stack bien construit commence par la police ideale (souvent une police web telechargee), suivie de polices systeme similaires en apparence, et termine par une famille generique (serif, sans-serif, monospace). Cette structure assure un fallback graceful.
Les polices systeme varient selon les OS : -apple-system et BlinkMacSystemFont sur macOS/iOS, "Segoe UI" sur Windows, Roboto sur Android. La declaration system-ui utilise automatiquement la police systeme native, offrant performance et coherence avec l'environnement utilisateur.
La tendance des "system font stacks" utilise uniquement les polices systeme pour des performances optimales (pas de telechargement) et une integration native. GitHub et Medium ont popularise cette approche : font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
Exemples pratiques
- Marque avec police custom : font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
- System font stack : font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
- Monospace pour code : font-family: "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
A quoi sert Font stack ?
Le font stack est fondamental en CSS : il garantit la lisibilite meme si la police principale n'est pas disponible, optimise le rendu pendant le chargement des web fonts, et assure une experience coherente cross-platform.
Font stack en pratique chez 123web
Chez 123web, nous construisons des font stacks reflechis pour chaque projet. Nous selectionnons des fallbacks visuellement proches de la police de marque et testons le rendu sur differents systemes pour garantir une typographie coherente partout.