HomeCasa Prompts

Scala tipografica per un design system con token e CSS fluido

Definisci una scala tipografica completa: rapporto motivato, dimensioni, interlinea e pesi per stile, tipografia fluida con clamp(), regole di lettura, accessibilità e token JSON e CSS. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 6 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Intermedio · Testo · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come tipografo e designer di design system.

Contesto:
- Prodotto o brand: {{prodotto}}
- Piattaforme: {{piattaforme}}
- Famiglie di caratteri disponibili: {{font}}
- Dimensione base del testo: {{dimensione_base}}
- Rapporto preferito: {{rapporto}}
- Tipo di contenuto prevalente: {{contenuto}}

Consegne:
1. Raccomandazione sul rapporto: conferma o metti in discussione quello scelto in base al contenuto (i rapporti ampi funzionano nel marketing, quelli piccoli nelle interfacce dense) e spiega perché.
2. Tabella della scala con 8-10 stili (display, h1-h4, corpo grande, corpo, corpo piccolo, etichetta, didascalia): nome del token, dimensione in px e rem, interlinea, peso, spaziatura tra le lettere e uso consigliato.
3. Tipografia fluida per i titoli con clamp(), indicando la larghezza minima e massima del viewport usate nel calcolo.
4. Differenze tra mobile e desktop e adattamenti per le piattaforme indicate.
5. Regole per i paragrafi: 45-75 caratteri per riga, spaziatura tra paragrafi e gerarchia in elenchi e tabelle.
6. Accessibilità: unità rem, zoom al 200%, dimensioni minime leggibili, interlinea di almeno 1,5 nel corpo e supporto della spaziatura del testo richiesta dal criterio WCAG 1.4.12.
7. Token in JSON (formato compatibile con Design Tokens) e in variabili CSS.
8. Cinque regole d'uso: cosa fare e cosa evitare.

Vincoli:
- Non inventare metriche dei font (altezza x, pesi disponibili); se servono, segnale come [DA COMPLETARE].
- Ricordami di verificare le licenze dei font per web e app.
- Arrotonda le dimensioni a valori pratici e spiega gli arrotondamenti. Se mancano informazioni chiave, chiedi prima.

Formato: tabella della scala, blocchi di codice JSON e CSS ed elenco delle regole.

Come usarlo

  1. Indica i font di cui hai già la licenza e la dimensione base. 2. Verifica che il rapporto consigliato sia adatto ai tuoi contenuti. 3. Importa i token JSON nel tuo strumento di token o copia le variabili CSS nel progetto.

Esempio d'uso

Prodotto: dashboard di analytics · Font: Inter e JetBrains Mono · Base: 16 px · Rapporto: 1,2 · Contenuto: interfaccia densa.

Esempio di risultato

1. Rapporto

Confermo 1,2 (terza minore): in un'interfaccia densa con tabelle, un rapporto più ampio gonfierebbe i titoli togliendo spazio ai dati.

2. Scala (base 16 px)

TokenpxremInterlineaPesoUso
display4831,1700Numero chiave della dashboard
h1402,51,15700Titolo di pagina
h23221,2600Sezione
h3281,751,25600Card
h4241,51,3600Sottosezione
body-lg201,251,5400Introduzioni
body1611,5400Testo corrente
body-sm140,8751,5400Celle di tabella
caption120,751,4500Assi e note

Arrotondamento: 1,2ⁿ dà 19,2 · 23,04 · 27,65 · 33,18 · 39,81; arrotondo a multipli di 4 per stare sulla griglia da 4 px.

3. Tipografia fluida (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;
}

Ricorda di verificare le licenze di Inter e JetBrains Mono per web e app. Metriche come l'altezza della x: [DA COMPLETARE]…

Dati chiave

Categoria
Design UI/UX · Design system
Tipo di output
Testo
Livello
Intermedio
Pensato per
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
Prodotto o brand, Piattaforme, Famiglie di caratteri, Dimensione base, Rapporto e Contenuto prevalente
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Quale rapporto tipografico scegliere?

Le interfacce dense funzionano di solito con rapporti delicati come 1,125 o 1,2; i siti di marketing o editoriali traggono vantaggio da 1,25 o 1,333 per un maggiore contrasto tra titoli e testo.

Perché usare rem invece di px?

Perché il rem rispetta la dimensione del testo impostata dall’utente nel browser e migliora l’accessibilità per chi ha bisogno di caratteri più grandi.

A cosa serve questo prompt?

Definisci una scala tipografica completa: rapporto motivato, dimensioni, interlinea e pesi per stile, tipografia fluida con clamp(), regole di lettura, accessibilità e token JSON e CSS.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Prodotto o brand, Piattaforme, Famiglie di caratteri, Dimensione base, Rapporto e Contenuto prevalente). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati