Anteprima abbinamenti di font

Come usare l’anteprima degli abbinamenti di font

1. Parti da una delle Coppie suggerite (Editoriale, Blog moderno, Landing page, Notizie, Elegante, Rivista tech, Libro, Classico, Documentazione, Giocoso). Ogni pulsante mostra il font dei titoli e il font del testo che applica.
2. Oppure scegli tu il Font dei titoli e il Font del testo. Gli elenchi sono raggruppati in font sans-serif, serif, display, monospace e scrittura a mano. Scambia i font inverte i due.
3. Regola la Dimensione dei titoli, la Dimensione del testo e l’Interlinea, e scegli il Peso dei titoli (Grassetto (700) o Normale (400)). Spunta Sfondo scuro per verificare la coppia in modalità scura.
4. Sostituisci il Testo del titolo e il Testo del corpo con le tue parole: un titolo vero e un paragrafo vero dicono molto più di un pangramma. Lascia una riga vuota tra un paragrafo e l’altro.
5. Copia il Codice CSS, poi segui Self-hosting con Fontsource per aggiungere i font al tuo progetto.

I font vengono caricati la prima volta che li scegli (da circa 12 a 50 KB per peso). Sono serviti da questo sito, mai da un CDN di font.

Cosa rende buono un abbinamento di font

• Contrasto, non conflitto. La ricetta classica è un serif per un ruolo e un sans-serif per l’altro: Playfair Display sopra Lato, o Montserrat sopra Merriweather. Due font simili ma non identici (per esempio due sans-serif geometrici) sembrano spesso un errore.
• Un font del testo tranquillo. È sul testo che le persone passano il loro tempo. Scegli un font con lettere aperte e un’altezza della x generosa (Inter, Lato, Open Sans, Source Serif 4, Merriweather) e riserva i font display come Playfair Display, DM Serif Display, Oswald o Caveat ai titoli brevi.
• Proporzioni compatibili. I font con altezze della x simili stanno bene insieme sulla stessa riga e nella stessa colonna.
• Due font bastano. Crea la gerarchia con dimensione, peso e spaziatura invece di aggiungere un terzo carattere.

Per un testo leggibile, da 16 a 20 px con un’interlinea tra 1,4 e 1,7 è un buon punto di partenza, con circa 60–75 caratteri per riga. I titoli di solito richiedono un’interlinea più stretta (da 1,1 a 1,3), che il codice CSS imposta per te.

Il codice CSS

Il codice dichiara due proprietà personalizzate, --font-heading e --font-body, ciascuna con uno stack di ripiego: se il web font non è ancora caricato, il browser mostra un font di sistema simile (Georgia per i serif, il font di sistema dell’interfaccia per i sans-serif). Le dimensioni sono scritte in rem (16 px = 1rem), quindi seguono l’impostazione della dimensione del carattere nel browser di chi legge.

Self-hosting e licenze

Tutti i 20 font provengono da Fontsource, che distribuisce font open source come pacchetti npm. Il riquadro di installazione fornisce il comando npm install e le righe import per il subset latin e solo per i pesi che usi; il tuo bundler copierà poi i file woff2 nella build. Servire i font dal tuo dominio è più veloce (nessuna connessione aggiuntiva), funziona offline ed evita di inviare gli indirizzi IP dei visitatori a un servizio di font esterno, un noto problema di GDPR nell’UE.

Ogni font qui presente è rilasciato con la SIL Open Font License 1.1, secondo i metadati del suo pacchetto: puoi usarlo su siti web, app e stampa, a scopo commerciale o meno, e incorporarlo. Non puoi vendere i file del font da soli. Se modifichi un font, deve restare sotto OFL e non può usare il nome riservato originale. Il file di licenza è incluso in ogni pacchetto.