102.3K+Télécharger
Aller au guide d’utilisation
Typography Scalepar Owl-Listener

Typography Scale Skill.

Créez une hiérarchie lisible à partir d’un petit ensemble de styles de texte documentés.

  • Design d’interface
  • Typographie
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Typography ScaleSKILL.md
Tâche Design d’interface Produit • Une échelle de styles de texte nommés avec taille, graisse, interligne et crénage. • Des attributions de rôles typographiques pour le corps de texte, les titres et le texte technique. • Des règles d’usage responsive et des vérifications avec du contenu réel. Avant de commencer Nécessite les fichiers de polices réels ou les polices disponibles sur la plateforme pour une validation visuelle pertinente.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Construire un système typographique cohérent

Une référence de système typographique couvrant les tailles modulaires, la graisse, l’interlignage, le crénage, les rôles de police et l’usage responsive.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

Typography Scale associe les relations de taille à la graisse, à l’interligne et à l’espacement des lettres. Il considère qu’un système typographique est plus qu’une suite de tailles de police : une légende, un paragraphe, un titre et une ligne d’affichage appellent des rôles et des conditions d’usage différents.

La source inclut des exemples de rapports modulaires et de choix de rôles de police, ainsi que des conseils mobiles pour les titres et la longueur de ligne. Ce sont des règles de départ à tester avec du contenu réel. Elle ne prétend pas qu’un rapport mathématique suffise à garantir une typographie lisible pour toutes les polices ou tous les systèmes d’écriture.

Livrables attendus

  • Une échelle de styles de texte nommés avec taille, graisse, interligne et crénage.
  • Des attributions de rôles typographiques pour le corps de texte, les titres et le texte technique.
  • Des règles d’usage responsive et des vérifications avec du contenu réel.
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Choisir la relation de base

    Sélectionnez une base pour le corps de texte et un rapport adaptés au contenu et à la marque existante.

  2. 02
    Définir des styles complets

    Associez chaque taille à une graisse, un interligne, un crénage et un rôle d’usage clair.

  3. 03
    Tester du texte réel

    Vérifiez les titres longs, les paragraphes et les largeurs mobiles ; évitez d’ajouter des tailles inutiles pour corriger des cas isolés.

02 Cas d’usage

Quand l’utiliser

Nécessite les fichiers de polices réels ou les polices disponibles sur la plateforme pour une validation visuelle pertinente.

Un bon choix

  • Styles de texte incohérentsUtile lorsqu’un produit a accumulé des titres et libellés quasi identiques.
  • Nouvelles bases d’interfaceÉtablit les rôles typographiques avant que chaque écran n’invente sa propre échelle.

Limites à vérifier

  • Pas seulement la longueur de ligneLa longueur de ligne compte, mais ce Skill traite un système typographique plus large.
  • Pas une licence de policeLe choix et l’usage des polices exigent toujours des licences appropriées et leur disponibilité sur la plateforme.

Éléments à fournir

  • Polices et marqueIndiquez les familles approuvées, les graisses disponibles et les contraintes existantes.
  • Exemples de contenuIncluez des libellés, titres, paragraphes, code ou affichages numériques réalistes.
  • Contextes d’écranDécrivez les besoins pour le mobile, les interfaces denses et la lecture longue.

03 Décisions importantes

Décisions clés

  1. Les styles portent des rôles

    Des cas d’usage documentés réduisent les décisions arbitraires entre tailles voisines.

  2. Le mobile sans tout réduire

    La source distingue la réduction des titres de la préservation d’une taille de corps de texte lisible.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez la méthode d’installation documentée du dépôt et conservez les fichiers complémentaires référencés. Cette entrée décrit une méthode de conception ciblée, et non une application exécutable.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

Nécessite les fichiers de polices réels ou les polices disponibles sur la plateforme pour une validation visuelle pertinente.

Commencer par un seul livrable

Adaptez la portée, les sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilisez typography-scale pour une application de lecture de recherche avec texte d’article, notes, libellés de navigation et extraits de code. Définissez une échelle modulaire sobre avec des valeurs de style complètes et le comportement des titres sur mobile. Testez-la avec les longs titres et paragraphes fournis plutôt qu’avec du faux texte.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque style comprend plus qu’une valeur de taille de police.
  • Les rôles de texte fréquents utilisent un ensemble limité de styles.
  • Les titres longs et le corps de texte restent lisibles sur les petites largeurs.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, identifiants et dépendances logicielles.

Télécharger OpenDesignLire le démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier du skill
ui-design/skills/typography-scale/SKILL.md
Licence
MIT
Instantané examiné
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Une référence de système typographique couvrant les tailles modulaires, la graisse, l’interlignage, le crénage, les rôles de police et l’usage responsive.

Résumé original par OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Une échelle modulaire choisit-elle la police ?

Non. Le rapport organise les tailles ; le choix de la police et le rendu réel demandent toujours du jugement.

Faut-il réduire toutes les tailles desktop sur mobile ?

La source suggère de réduire les titres tout en préservant une taille de corps de texte lisible et en ajustant la longueur de ligne.

Combien de styles faut-il utiliser régulièrement ?

La source recommande de limiter l’usage courant à un petit ensemble, tout en documentant des rôles supplémentaires comme les légendes ou le texte d’affichage.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md