$ tools/fonts

Generatore coppie di font

Scegli un font heading e body da Google Fonts, anteprima live insieme e copia il CSS. Preset per partire veloce.

$ Preset

# Font del titolo

# Font del corpo

$ Anteprima

</> Codice

$ Come usare il generatore di coppie di font

Inizia scegliendo una coppia preset — sono combinazioni collaudate che funzionano bene insieme. Oppure vai custom: scegli un font per il titolo e uno per il corpo dai menu (tutti da Google Fonts), aggiusta dimensioni e pesi e guarda l'anteprima aggiornarsi in diretta. Passa tra le anteprime articolo, hero e card per vedere come si comporta la coppia in contesti diversi. Quando sei soddisfatto, copia l'import o il CSS e incollalo nel tuo progetto.

Cosa rende una buona coppia di font

Le migliori coppie creano contrasto senza scontrarsi. Un pattern comune è un font serif o display per i titoli accoppiato a un sans-serif pulito per il corpo. Il titolo cattura l'attenzione; il corpo resta leggibile. Evita di accoppiare due font troppo simili — se strizzi gli occhi e non li distingui, scegli qualcosa con più personalità per il titolo.

Perché conta per la tua app

I tuoi screenshot App Store, la landing page e l'UI in-app beneficiano tutti di una tipografia coerente e ben accoppiata. I font che scegli danno il tono — giocoso, professionale, minimale, bold. Azzeccare l'accoppiamento presto evita lavoro di redesign dopo. Usa questo strumento per sperimentare velocemente, poi prendi il CSS esatto nel tuo progetto.

$ FAQ

È gratis?

Sì — completamente gratis, senza registrazione, senza limiti. Gira interamente nel tuo browser e carica i font direttamente da Google Fonts.

Posso usare questi font nella mia app?

Tutti i font qui sono da Google Fonts e sono open-source. Puoi usarli in app, siti web, stampa — ovunque. Controlla la licenza di ogni font su Google Fonts per i dettagli (la maggior parte è SIL Open Font License).

Come aggiungo i font al mio progetto?

Copia il tag <link> o la riga @import dalla sezione codice e aggiungila al tuo HTML o CSS. Poi usa le dichiarazioni font-family mostrate nell'output CSS.

Perché alcuni pesi appaiono non disponibili?

Non tutti i Google Fonts supportano tutti i pesi. I chip dei pesi mostrano solo quelli che il font selezionato fornisce davvero.

Altri strumenti

Ti piace LaunchShots?
Gratis per sempre — se ti ha fatto risparmiare tempo, puoi offrirmi un caffè.
Sostieni →
copiato ✓