HomeCasa Prompts

Échelle typographique pour un design system avec tokens et CSS fluide

Définissez une échelle typographique complète : ratio argumenté, tailles, interlignages et graisses par style, typographie fluide avec clamp(), règles de lecture, accessibilité et tokens. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 6 variables personnalisables et vous pouvez le copier gratuitement en un clic.

Intermédiaire · Texte · En attente de relecture éditoriale

Conçu pour:

Prompt

Agis comme typographe et designer de design system.

Contexte :
- Produit ou marque : {{produit}}
- Plateformes : {{plateformes}}
- Familles de caractères disponibles : {{polices}}
- Taille de base du texte : {{taille_base}}
- Ratio souhaité : {{ratio}}
- Type de contenu principal : {{contenu}}

Livrables :
1. Recommandation de ratio : confirme ou remets en question le ratio choisi selon le contenu (les grands ratios conviennent au marketing, les petits aux interfaces denses) et explique pourquoi.
2. Tableau de l'échelle avec 8 à 10 styles (display, h1-h4, corps large, corps, corps petit, libellé, légende) : nom du token, taille en px et rem, interlignage, graisse, approche et usage recommandé.
3. Typographie fluide pour les titres avec clamp(), en précisant les largeurs de viewport minimale et maximale du calcul.
4. Différences mobile/desktop et ajustements pour les plateformes indiquées.
5. Règles de paragraphe : 45 à 75 caractères par ligne, espacement entre paragraphes, hiérarchie dans les listes et tableaux.
6. Accessibilité : unités rem, zoom à 200 %, tailles minimales lisibles, interlignage d'au moins 1,5 pour le corps et prise en charge de l'espacement du texte exigé par le critère WCAG 1.4.12.
7. Tokens en JSON (format compatible Design Tokens) et en variables CSS.
8. Cinq règles d'usage : à faire et à éviter.

Contraintes :
- N'invente pas de métriques de police (hauteur d'x, graisses disponibles) ; si besoin, indique [À COMPLÉTER].
- Rappelle-moi de vérifier les licences des polices pour le web et les applications.
- Arrondis les tailles à des valeurs pratiques et explique les arrondis. S'il manque une information clé, pose la question d'abord.

Format : tableau de l'échelle, blocs de code JSON et CSS, puis liste des règles.

Comment l'utiliser

  1. Indiquez les polices dont vous avez la licence et la taille de base. 2. Vérifiez que le ratio recommandé convient à votre contenu. 3. Importez les tokens JSON dans votre outil de tokens ou collez les variables CSS dans le projet.

Exemple d'utilisation

Produit : tableau de bord analytique · Polices : Inter et JetBrains Mono · Base : 16 px · Ratio : 1,2 · Contenu : interface dense.

Exemple de résultat

1. Ratio

Je confirme 1,2 (tierce mineure) : dans une interface dense avec tableaux, un ratio plus grand gonflerait les titres au détriment des données.

2. Échelle (base 16 px)

TokenpxremInterligneGraisseUsage
display4831,1700Chiffre clé du tableau de bord
h1402,51,15700Titre de page
h23221,2600Section
h3281,751,25600Carte
h4241,51,3600Sous-section
body-lg201,251,5400Introductions
body1611,5400Texte courant
body-sm140,8751,5400Cellules de tableau
caption120,751,4500Axes et notes

Arrondi : 1,2ⁿ donne 19,2 · 23,04 · 27,65 · 33,18 · 39,81 ; j'arrondis aux multiples de 4 pour rester sur la grille de 4 px.

3. Typographie fluide (360-1280 px)

:root {
  --font-ui: "Inter", system-ui, sans-serif;
  --font-figures: "JetBrains Mono", ui-monospace, monospace;
  --text-body: 1rem;
  --text-h1: clamp(2rem, 1.804rem + 0.87vw, 2.5rem);
  --leading-body: 1.5;
}

Pensez à vérifier les licences d'Inter et de JetBrains Mono pour le web et les apps. Métriques comme la hauteur d'x : [À COMPLÉTER]…

Informations clés

Catégorie
Design UI/UX · Design systems
Type de résultat
Texte
Niveau
Intermédiaire
Conçu pour
ChatGPT, Claude, Gemini et Microsoft Copilot
Vérifié sur
En attente de vérification éditoriale
Variables
Produit ou marque, Plateformes, Familles de caractères, Taille de base, Ratio et Contenu principal
Langue
Français
Prix
Gratuit, sans inscription
Mis à jour
07/11/2026

Questions fréquentes

Quel ratio typographique choisir ?

Les interfaces denses fonctionnent généralement avec des ratios doux comme 1,125 ou 1,2 ; les sites marketing ou éditoriaux profitent de 1,25 ou 1,333 pour un meilleur contraste entre titres et texte.

Pourquoi utiliser rem plutôt que px ?

Parce que le rem respecte la taille de texte réglée par l’utilisateur dans son navigateur, ce qui améliore l’accessibilité pour les personnes qui ont besoin de caractères plus grands.

À quoi sert ce prompt ?

Définissez une échelle typographique complète : ratio argumenté, tailles, interlignages et graisses par style, typographie fluide avec clamp(), règles de lecture, accessibilité et tokens.

Avec quels outils d'IA fonctionne-t-il ?

Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.

Comment personnaliser le prompt ?

Cliquez sur « Personnaliser » et remplissez les variables (Produit ou marque, Plateformes, Familles de caractères, Taille de base, Ratio et Contenu principal). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.

Faut-il de l'expérience pour l'utiliser ?

Il est de niveau intermédiaire : il vaut mieux connaître le sujet pour fournir un bon contexte et relire le résultat d'un œil critique.

Ce prompt est-il gratuit ?

Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.

Puis-je me fier au résultat de l'IA ?

Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.

Prompts similaires