Système de Typographie Fluide

Que fait Système de Typographie Fluide ?

Objectif

Le skill Système de Typographie Fluide permet de créer une échelle typographique qui s'adapte en douceur à la taille de la fenêtre du navigateur. Au lieu de sauter entre des tailles fixes à des points de rupture spécifiques, la typographie évolue linéairement entre des valeurs minimales et maximales définies à l'aide de la fonction CSS clamp(). Cela améliore l'harmonie visuelle, la lisibilité, et réduit la charge de maintenance liée à la gestion de nombreuses media queries.

Cas d'utilisation

• Construire un système de design responsive à partir de zéro.
• Moderniser la typographie d'un site existant pour une meilleure cohérence multi-appareils.
• Créer des mises en page où le texte doit parfaitement remplir l'espace disponible sur toutes les tailles d'écran.
• Simplifier le CSS en remplaçant plusieurs règles @media par un seul ensemble de variables fluides.

Quand NE PAS l'utiliser

• Prise en charge des navigateurs obsolètes : Si le projet doit prendre en charge des navigateurs qui ne comprennent pas clamp() (par ex., Internet Explorer).
• Designs à largeur fixe : Lorsque la mise en page est strictement fixe et ne cherche pas à être responsive.
• Précision extrême : Si des directives de marque spécifiques imposent des tailles de pixels exactes à chaque résolution possible, qui ne s'alignent pas sur une échelle linéaire.

Entrées

Pour générer un système typographique fluide, vous avez besoin de :

1. Plage de viewport :
   • min-width : La largeur d'écran où la mise à l'échelle commence (par ex., 320px).
   • max-width : La largeur d'écran où la mise à l'échelle s'arrête (par ex., 1200px).
2. Taille de police de base :
   • min-size : La taille de police du corps de texte à min-width (par ex., 16px).
   • max-size : La taille de police du corps de texte à max-width (par ex., 20px).
3. Ratio d'échelle :
   • Un multiplicateur pour déterminer la taille des titres (par ex., 1.250 pour "Tierce majeure", 1.333 pour "Quarte juste").

Sorties

1. Propriétés personnalisées CSS : Un bloc de variables CSS définissant l'échelle fluide.
2. Classes utilitaires de typographie : (Optionnel) Classes CSS pour une application facile de l'échelle.
3. Documentation de hiérarchie : Un mappage clair des tailles, du corps de texte à H1.

Flux de travail

1. Définir les paramètres de l'échelle

Déterminez les viewports minimum et maximum ainsi que les tailles de base. Exemple : 320px à 1280px, base 16px à 18px.

2. Choisir une échelle typographique

Sélectionnez un ratio qui correspond à la tonalité de la marque.

• 1.067 (Seconde mineure) : Différences subtiles, bon pour les données denses.
• 1.200 (Tierce mineure) : Standard, équilibré.
• 1.414 (Quarte augmentée) : Contraste élevé, titres audacieux.

3. Calculer les niveaux hiérarchiques

Multipliez la taille de base par le ratio pour chaque niveau (H6 à H1). Formule : Taille_niveau = Base * (Ratio ^ Niveau)

4. Générer les formules fluides

Convertissez les valeurs min/max calculées en pixels en une fonction clamp(). clamp(min, préférée, max)

Calcul de la valeur préférée : pente = (max_size - min_size) / (max_viewport - min_viewport) ordonnée_origine = min_size - pente * min_viewport préférée = (ordonnée_origine) + (pente * 100vw)

5. Implémentation

Appliquez les variables CSS générées au design.

Règles de décision

• Accessibilité avant tout : La min-size pour le texte du corps ne devrait rarement être inférieure à 1rem (16px).
• Préférence utilisateur : Utilisez toujours les unités rem pour la sortie finale afin que les paramètres de taille de police du navigateur de l'utilisateur soient respectés. N'utilisez jamais de dimensionnement exclusif en vw sans clampage min/max basé sur rem — les unités de viewport pures ignorent le zoom du navigateur et les préférences de taille de police de l'utilisateur, et peuvent échouer au critère WCAG 1.4.4 (Redimensionnement du texte).
• Intensité de l'échelle : Utilisez des ratios plus petits pour les sites à fort trafic mobile afin d'éviter que les titres ne deviennent trop grands sur les petits écrans.

Contraintes

• Réactivité : La typographie doit rester dans les limites de son conteneur sans provoquer de débordement.
• Lisibilité : La longueur de ligne (mesure) devrait idéalement rester entre 45 et 75 caractères. Ajustez la largeur des conteneurs en conséquence lorsque le texte évolue.
• Hiérarchie : H1 doit toujours être visuellement distinct et plus grand que H2, qui doit être plus grand que H3, etc.

Schémas d'échec courants

• Calcul incorrect : Cela entraîne un rétrécissement du texte lorsque l'écran s'agrandit.
• Incohérence d'unités : Mélange de px et rem d'une manière qui casse le zoom du navigateur.
• Sur-échelle : Les titres deviennent si grands sur les écrans 4K qu'ils dominent tout le viewport.
• Accessibilité : Oublier de tester comment l'échelle fluide se comporte lorsque l'utilisateur zoome ou augmente la taille de police de base de l'OS/navigateur (WCAG 1.4.4 Redimensionnement du texte, WCAG 1.4.10 Réaffichage).

Critères de validation

• La typographie évolue en douceur lors du redimensionnement de la fenêtre du navigateur.
• Aucun "saut" ou changement brusque de taille n'est visible.
• Tout le texte est lisible à une largeur de 320px.
• Les titres maintiennent une hiérarchie claire par rapport au texte du corps.
• Le système utilise les unités rem pour la base et clamp() pour le comportement fluide.
• Le texte se réaffiche sans perte de contenu ni de fonction à un zoom navigateur de 400% (WCAG 1.4.10 Réaffichage) et respecte la préférence de taille de police de l'utilisateur (WCAG 1.4.4).