Construction Elementor Template Kit
Construction Elementor Template Kit
Definisci i tuoi font e la scala per creare una gerarchia tipografica completa per il web. I font fanno riferimento a Google Fonts, quindi se inserisci un font presente in Google Font lo vedrai visualmente.
Questa guida spiega come utilizzare il generatore per creare e personalizzare la tua gerarchia tipografica per il web.
L’interfaccia inizia con tre campi per definire i font principali del tuo progetto.
Font per Titoli: Inserisci qui il nome di un font da Google Fonts (es. “Playfair Display”, “Lora”) che verrà usato per i titoli.
Font per Corpo Testo: Inserisci il nome di un font da Google Fonts (es. “Inter”, “Roboto”) per i paragrafi.
Font Monospaziato: Inserisci il nome di un font monospaziato (es. “Roboto Mono”) per visualizzare il codice.
Lo strumento caricherà automaticamente i font, permettendoti di vederli applicati nelle anteprime.
Questa sezione contiene i controlli numerici per definire le proporzioni della tua gerarchia.
Dimensione Base (px): È la dimensione del font del paragrafo, che funge da punto di partenza per calcolare tutte le altre dimensioni.
Scala Modulare: Scegli il rapporto matematico tra i vari livelli di testo. Un rapporto più alto crea un contrasto visivo maggiore.
Spaziatura Titoli (px): Aggiunge o rimuove spazio tra i caratteri di tutti i titoli (H1-H6) per affinare la leggibilità.
Genera Stili: Clicca per applicare le modifiche e rigenerare l’intera anteprima.
Esporta CSS: Scarica un file .css pronto all’uso, con variabili CSS, per una facile integrazione.
Esporta CSV (per Excel): Scarica un file .csv che riassume tutte le proprietà di ogni elemento (dimensione, peso, interlinea, ecc.), utile per la documentazione di progetto. Tutti i valori sono calcolati e completi, senza voci “ereditate”.
L’output è organizzato in schede (tab) per una consultazione ordinata.
Navigazione a Schede: Clicca sui pulsanti (“Font di sistema”, “Titoli”, “Componenti UI”, ecc.) per visualizzare solo la categoria di stili che ti interessa.
Anteprima Visiva: Sulla sinistra di ogni riga, vedrai un’anteprima realistica dello stile applicato. Per esempio, l’anteprima per il “Testo” mostra un paragrafo di più righe per valutare l’interlinea, mentre quella per il “Testo Pulsante” mostra un vero e proprio bottone.
Informazioni di Stile: Sulla destra, troverai il nome dell’elemento e un elenco di tutte le regole CSS che lo definiscono.
La web typography è l’anima di un sito web. Una gerarchia tipografica ben definita può trasformare un design mediocre in un’esperienza utente chiara, professionale e piacevole. Ma ammettiamolo: creare un sistema tipografico coerente da zero, che includa non solo i contenuti ma anche i componenti dell’interfaccia, è un lavoro lungo e complesso.
E se potessi fare tutto questo in pochi minuti, con un risultato matematicamente armonico e visivamente impeccabile?
Siamo entusiasti di presentare la soluzione definitiva: il nostro Generatore di Stili Tipografici, uno strumento potente, intuitivo e, soprattutto, completamente gratuito.
L’obiettivo di questo strumento è darti il massimo controllo con il minimo sforzo. Invece di perderti tra decine di proprietà CSS, ti basta definire le fondamenta del tuo design.
Il vero punto di forza è la praticità. Appena inserisci i tuoi valori, il generatore crea un design system tipografico completo, organizzato in schede chiare:
La vera utilità di uno strumento sta nel mostrare come appariranno gli elementi nel contesto reale. Il nostro generatore va oltre il semplice testo di esempio.
Una volta creata la palette perfetta, integrarla nel tuo progetto è questione di secondi.
.css pronto all’uso, con tanto di variabili CSS, per un’integrazione pulita e moderna. Questo generatore CSS ti fa risparmiare tempo prezioso.Smetti di sprecare tempo e inizia a creare gerarchie di testo impeccabili. Prova subito il nostro Generatore di Stili Tipografici e porta il tuo design al livello successivo.