102.3K+Scarica
Vai alla guida all’uso
Typography Scaledi Owl-Listener

Typography Scale Skill.

Crea una gerarchia leggibile a partire da un piccolo insieme di stili di testo documentati.

  • Design UI
  • Tipografia
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Typography ScaleSKILL.md
Attività Design UI Produce • Una scala di stili di testo con nome, comprensiva di dimensione, peso, interlinea e spaziatura tra lettere. • Assegnazione dei ruoli dei font a testo corrente, titoli e testo tecnico. • Regole d'uso responsive e verifiche su contenuti reali. Prima di iniziare Per una validazione visiva significativa servono i file dei font effettivi o i font di piattaforma disponibili.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Crea un sistema tipografico coerente

Un riferimento per sistemi tipografici che copre dimensioni modulari, peso, interlinea, spaziatura tra lettere, ruoli dei font e uso responsive.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Typography Scale combina i rapporti tra le dimensioni con peso, interlinea e spaziatura tra lettere. Considera un sistema tipografico più di una semplice sequenza di dimensioni: una didascalia, un paragrafo di testo, un titolo e una riga display hanno ruoli e condizioni d'uso diversi.

La fonte include esempi di rapporti modulari e scelte di ruolo dei font, oltre a indicazioni per mobile su titoli e lunghezza di riga. Sono regole di partenza da verificare con contenuti reali. Non afferma che un rapporto matematico da solo garantisca una tipografia leggibile con ogni font o sistema di scrittura.

Risultati attesi

  • Una scala di stili di testo con nome, comprensiva di dimensione, peso, interlinea e spaziatura tra lettere.
  • Assegnazione dei ruoli dei font a testo corrente, titoli e testo tecnico.
  • Regole d'uso responsive e verifiche su contenuti reali.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Scegli la relazione di base

    Seleziona una base per il testo corrente e un rapporto adatti al contenuto e al brand esistente.

  2. 02
    Definisci stili completi

    Abbina ogni dimensione a peso, interlinea, spaziatura tra lettere e un ruolo d'uso chiaro.

  3. 03
    Prova testo reale

    Controlla titoli lunghi, paragrafi e larghezze mobile; evita di introdurre dimensioni superflue per correggere singoli casi.

02 Quando usarlo

Quando usarla

Per una validazione visiva significativa servono i file dei font effettivi o i font di piattaforma disponibili.

Un buon caso d'uso

  • Stili di testo incoerentiUtile quando un prodotto ha accumulato titoli ed etichette quasi duplicati.
  • Nuove basi per la UIStabilisce i ruoli tipografici prima che le schermate inventino scale proprie.

Limiti da verificare

  • Non solo lunghezza di rigaLa lunghezza di riga conta, ma questa skill affronta un sistema tipografico più ampio.
  • Non è una licenza del carattereLa scelta e l'uso dei font richiedono comunque licenze adeguate e disponibilità sulla piattaforma.

Cosa portare

  • Font e brandIndica le famiglie approvate, i pesi disponibili e i vincoli esistenti.
  • Esempi di contenutoIncludi etichette, titoli, paragrafi, codice o visualizzazioni numeriche realistici.
  • Contesti di schermoDescrivi i requisiti per mobile, UI dense e lettura di testi lunghi.

03 Decisioni importanti

Le decisioni che contano

  1. Gli stili hanno un ruolo

    Casi d'uso documentati riducono le decisioni arbitrarie tra dimensioni vicine.

  2. Mobile senza ridurre tutto

    La fonte distingue il ridimensionamento dei titoli dalla conservazione di una base leggibile per il testo corrente.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Rivedi la configurazione

Usa il metodo di installazione documentato nel repository e conserva gli eventuali file complementari indicati. Questa voce descrive un metodo di design mirato, non un'applicazione eseguibile.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

Per una validazione visiva significativa servono i file dei font effettivi o i font di piattaforma disponibili.

Parti da un solo risultato

Adatta ambito, materiali di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa typography-scale per un'app di lettura per la ricerca con testo di articoli, note, etichette di navigazione ed estratti di codice. Definisci una scala modulare sobria con valori di stile completi e il comportamento dei titoli su mobile. Verifica con i titoli e i paragrafi lunghi forniti, non con testo segnaposto.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Ogni stile include più del solo valore di dimensione del font.
  • I ruoli di testo più frequenti usano un insieme limitato di stili.
  • Titoli lunghi e testo corrente restano leggibili su larghezze ridotte.

OpenDesign offre uno spazio di lavoro di design locale per agenti di coding. Questa scheda non significa che la skill sia inclusa nel pacchetto né che siano inclusi i suoi strumenti esterni, le credenziali e le dipendenze software.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte collegata qui sotto. Il comportamento e i requisiti originali possono cambiare.

Autore della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
ui-design/skills/typography-scale/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Un riferimento per sistemi tipografici che copre dimensioni modulari, peso, interlinea, spaziatura tra lettere, ruoli dei font e uso responsive.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Una scala modulare sceglie il font?

No. Il rapporto organizza le dimensioni; la scelta del font e il rendering effettivo richiedono comunque giudizio.

Tutte le dimensioni desktop dovrebbero ridursi su mobile?

La fonte suggerisce di ridurre i titoli mantenendo leggibile la dimensione del testo corrente e di regolare la lunghezza di riga.

Quanti stili vanno usati regolarmente?

La fonte consiglia di limitare l'uso abituale a un piccolo insieme, documentando ruoli aggiuntivi come didascalie o testo display.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md