Font in HTML e CSS
Impara a usare i font web-safe e Google Fonts nei tuoi progetti HTML/CSS di base, senza framework.
Categorie principali di font
- Serif: Georgia, Times New Roman (classici, eleganti)
- Sans-serif: Arial, Helvetica, Roboto (moderni, leggibili)
- Monospace: Courier New, monospace (per codice, tabulati)
- Display/Decorativi: Pacifico, Lobster (per titoli, loghi)
Esempi pratici
Codice Esempio
Visualizza HTML, CSS (JS non necessario per i font)
<h1 class="title">Titolo con font Serif</h1>
<p class="body">Questo è un testo con font Sans-serif.</p>
<pre class="code">console.log('Esempio monospace');</pre>Anteprima Font
Modifica il testo per vedere l'effetto dei font
Serif
Oggetto Academy: Impara a creare siti web!
Sans-serif
Oggetto Academy: Impara a creare siti web!
Monospace
Oggetto Academy: Impara a creare siti web!
Best Practices per i Font
- Usa font web-safe per la massima compatibilità.
- Importa Google Fonts solo se necessario e solo i pesi che usi.
- Evita troppi font diversi nella stessa pagina.
- Assicurati di avere un buon contrasto tra testo e sfondo.
- Testa la leggibilità su dispositivi diversi.
Casi d'Uso: Quale Font Scegliere?
- Curriculum Vitae (CV): Usa font professionali e leggibili come Calibri, Arial, Helvetica o Georgia. Evita font decorativi.
- Sito aziendale: Preferisci sans-serif moderni come Roboto, Open Sans, Lato per un look pulito e affidabile.
- Blog personale: Puoi combinare un serif per i titoli (es. Merriweather) e un sans-serif per il corpo (es. Roboto).
- Portfolio creativo: Puoi osare con un font display per i titoli (es. Pacifico, Lobster), ma mantieni il corpo leggibile.
- Presentazioni o slide: Scegli font chiari e ben spaziati come Montserrat o Nunito.