Scegliere il font giusto per il proprio sito web è importante!

La selezione del Font è importante

Scegliere il font corretto ha un enorme impatto su come i lettori sperimentano un sito web.

Il font giusto può creare una forte identità per il proprio marchio.

Usare un font che è facile da leggere è importante. Il font aggiunge valore al proprio testo. E' anche importante scegliere il colore corretto e la dimensione del testo per il font.

Famiglie di Font Generici

In CSS ci sono 5 famiglie di font generici:

1. Serif: i fonts hanno minuscoli tratti sull'orlo di ogni lettera. Creano un senso di formalità ed eleganza
2. Sans-serif: i fonts hanno linee pulite (senza tratti sui bordi). Creano un aspetto moderno e minimalista.
3. Monospace: i fonts hanno qui tutte le letter la medesima larghezza fissa. Creano un aspetto meccanico.
4. Cursive: i fonts imitano la scrittura umana.
5. Fantasy: i fonts sono decorativi e divertenti.

Tutti i diversi nomi di font appartengono a una delle famiglie di font generiche.

Differenza tra Font Serif e Sans-serif

Alcuni esempi di Font

La proprietà font-family in CSS

In CSS, usiamo la proprietà font-family per specificare il font del testo.

La proprietà font-family dovrebbe tenere diversi nomi di font come un sistema di "riserva", per assicurare la massima compatibilità tra browser e sistemi operativi. Si inizia col font che si vuole, e si termina con una famiglia generica (per consentire al browser di prelevare un font simile nella famiglia generica, se nessun altro font sia disponibile). I nomi dei font dovrebbero essere separati da una virgola.

Esempio

Specifica alcuni diversi fonts per tre paragrafi:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

CSS Caratteri sicuri per il web

I caratteri sicuri per il web sono fonts che sono installati universalmente tra tutti i browser e i dispositivi.

Font di riserva

Tuttavia, non ci sono font sicuri per il web completamente al 100%. Ci sono sempre delle possibilità che un font non sia trovato o non sia correttamente installato.

Perciò, è molto importante usare fonts di riserva.

Questo significa che dovremmo aggiungere una lista di "font di backup" simili nella proprietà font-family.

Esempio

Qui ci sono tre tipi di font: Tahoma, Verdana sans-serif. Il secondo e il terzo font sono di backup, nel caso il primo non sia trovato.

p {
font-family: Tahoma, Verdana, sans-serif;
}

I migliori font sicuri per il web per HTML e CSS

La seguente lista contiene i migliori font sicuri per il web per HTML e CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Arial (sans-serif)

Arial è il font più usato sia per contenuti online e media stampati. Arial è anche il carattere di default in Google Docs.

Arial è uno dei font più sicuri per il web ed è anche disponibile in tutti i principali sistemi operativi.

ESEMPIO

Verdana (sans-serif)

Verdana è un carattere molto popolare. Verdana è facile da leggere perfino per dimensioni ridotte di carattere.

ESEMPIO

Helvetica (sans-serif)

Il carattere Helvetica è amato dai designers. E' adatto per diversi tipi di business.

ESEMPIO

Tahoma (sans-serif)

Il carattere Tahoma ha meno spazio tra i caratteri.

ESEMPIO

Trebuchet MS (sans-serif)

Trebuchet MS fu disegnato da Microsoft nel 1996. Bisogna usare questo font con attenzione. Non è supportato dai sistemi operativi dei dispositivi mobili.

ESEMPIO

Times New Roman (serif)

Times New Roman è uno dei caratteri più riconoscibili al mondo. Appare professionale ed è usato in molti giornali e siti web di notizie. E' anche il font primario per dispositivi e applicazioni Windows.

ESEMPIO

Georgia (serif)

Geogia è un carattere serif elegante. E' molto leggibile a diverse dimensioni carattere, perciò è un buon candidato per design Mobile Responsive.

ESEMPIO

Garamond (serif)

Garamond è un carattere classico usato per molti libri stampati. Ha un aspetto senza tempo e una buona leggibilità.

ESEMPIO

Courier New (monospace)

Courier New è il carattere monospace più utilizzato. Courier New è spesso usato con i display di codifca e molti provider email lo usano come carattere di default. Courier New è anche il carattere standard per le sceneggiature dei film.

ESEMPIO

Brush Script MT (cursive)

Il carattere Brush Script MT fu progettato per imitare la scrittura a mano. E' elegante e sofisticato, ma difficilmente può essere letto. Da usare attentamente.

ESEMPIO

Font di riserva usati comunemente

Organizzati per famiglie:

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Serif

• "Times New Roman", Times, serif
• Georgia, serif
• Garamond, serif

Sans-Serif

• Arial, Helvetica, sans-serif
• Tahoma, Verdana, sans-serif
• "Trebuchet MS", Helvetica, sans-serif
• Georgia, Verdana, sans-serif

Monospace

• "Courier New", Courier, monospace

Cursive

• "Brush Script MT", cursive

Fantasy

• Copperplate, Papyrus, fantasy

Font Style

La proprietà font-style è principalmente usata per specificare testo in corsivo.

Questa proprietà ha 3 valori:

• normal - il testo è mostrato normale
• italic - il testo è mostrato in corsivo
• oblique - Il testo è "pendente" (obliquo è molto simile al corsivo, ma meno supportato)

Esempio

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Font Weight

La proprietà font-weight specifica il peso di un font:

Esempio

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Font Variant

La proprietà font-variant specifica se o no un testo venga mostrato in carattere maiuscoletto.

Nel maiuscoletto, tutte le lettere minuscole sono convertite in lettere maiuscole. Tuttavia, le lettere maiuscole convertite appaiono in una dimensione più piccola delle lettere maiuscole originali nel testo.

Esempio

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Font Size

La proprietà font-size imposta la dimensione del testo.

Essere in grado di gestire la dimensione del testo è importante nel web design. Tuttavia, non si dovrebbe usare l'aggiustamento della dimensione del font per rendere i paragrafi come intestazioni o le intestazioni come paragrafi.

Occorre usare sempre il tag HTML più appropriato, come <h1> - <h6> per le intestazioni e <p> per i paragrafi.

Il valore del font-size può essere assoluto o relativo.

Dimensione assoluta:

• Imposta il testo a una dimensione specifica
• Non consente all'utente di cambiare la dimensione del testo in tutti i browser (negativo per ragioni di accessibilità)
• La dimensione assoluta è utile quando la dimensione fisica dell'output è conosciuta

Dimensione relativa:

• Imposta la dimensione relativa agl'elementi circostanti
• Consente all'utente di cambiare la dimensione del testo nel browser

Impostare la dimensione del font con pixels

Impostare la dimensione del testo con i pixels da un controllo completo sulla dimensione del testo:

Esempio

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Impostare la dimensione del font con em

Per consentire all'utente di ridimensionare il testo (nel menù del browser), molti sviluppatori usano em invece dei pixels.

1em equivale alla dimensione corrente del testo. La dimensione di default del testo nei browsers è 16px. Così, la dimensione di default di 1em è 16px.

LA dimensione può essere calcolata dai pixels in em usando questa formula: pixels/16=em

Esempio

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Nel precedente esempio, la dimensione del testo in em è la stessa del primo esempio in pixels. Tuttavia, con la dimensione in em, è possibile modificare la dimensione del testo in tutti i browsers.

Sfortunatamente, c'è ancora un problema con le versioni più vecchie di Internet Explorer. Il testo diventa più largo di quanto dovrebbe essere reso più largo e più piccolo di quanto dovrebbe essere reso più piccolo.

Usare una combinazione di percentuale ed em

La soluzione che funziona in tutti i browsers, è impostare il font-size di default in percentuale per l'elemento <body>:

Esempio

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Il nostro codice funziona alla grande! Mostra la stessa dimensione del testo in tutti i browsers, e consente a tutti i browsers di zoomare o ridimenzionare il testo!

Responsive Font Size

Il testo può essere impostato con unità vw, che significa la "larghezza viewport".

Esempio

<h1 style="font-size:10vw">Hello World</h1>

ESEMPIO

Font Google

Se non si vuole usare alcun carattere standard in HTML, si possono usare i caratteri Google.

I font google sono di libero utilizzo e sono più di 1000 font da scegliere.

Come usare i Font Google

Bisogna semplicemente aggiungere un link a un CSS speciale nella sezione <head> e poi fare riferimento al font nel CSS.

Esempio

Qui, vogliamo usare un font chiamato "Sofia" dai Font Google:

<head>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Sofia>">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

ESEMPIO

Usare Font Google multipli

PEr usare caratteri multipli Google, separare il nome del font con un carattere tubo (|):

Esempio

Richiedere font multipli:

<head>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong>">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Stilizzare i Font Google

Certamente si posso stilizzare a piacere con i CSS!

Esempio

Stile del font "Sofia":

<head>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Sofia>">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

ESEMPIO

Abilitare gli effetti del Font

Google possiede anche diversi effetti del font abilitati che si possono usare.

Prima aggiungere effect=effectname alla Google API, e poi aggiungere il nome di una classe speciale. Il nome della classe inizia con font-effect- e finisce con effectname.

Esempio

Aggiunge l'effetto fire al font "Sofia":

<head>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Sofia&effect=fire>">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>

</body>

ESEMPIO

Per richiedere effetti multipli del font, basta separare il nome dell'effetto con un carattere a tubo (|):

Esempio

Aggiunge effetti multipli al font "Sofia":

<head>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple>">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>

ESEMPIO

Accoppiamenti dei font

Un grande accoppiamento dei font è essenziale per un grande design.

Regole di accoppiamento dei Font

Di seguito alcune regole basilari per creare un grande accoppiamento di Font:

1. Complementare

E' sempre sicuro trovare un accoppiamento di font che si completano l'un l'altro.

Una grande combinazione di font dovrebbe armonizzare, senza essere troppo simili o troppo differenti.

2. Usare le superfamiglie dei Font

Una superfamiglia di Font è un set di font progettati per funzionare bene insieme. Quindi, usando font different all'interno della stessa superfamiglia è sicuro.

Per esempio, la superfamiglia Lucida contiene i seguenti font: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif e Lucida Math.

3. Il contrasto è sovrano

Due font che sono troppo simili spesso vanno in conflitto. Tuttavia, il contrasto, è la via giusta, porta fuori il meglio di ciascun font.

Esempio: Combinare serif con sans serif è una combinazione ben nota.

Una superfamiglia forte include sia serif che varianti sans serif dello stesso font (Lucida, Lucida Sans).

4. Scegli solo un capo

Un font dovrebbe essere predominante. Questo stabilisce una gerarchia per i caratteri della propria pagina. Questo può essere ottenuto variando la dimensione, il peso e il colore.

Esempio

Senza dubbio, "Georgia" è predominante qui:

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

Accoppiamenti popolari

Georgia e Verdana

Intestazione: Georgia

Paragrafo: Verdana

ESEMPIO

Helvetica e Garamond

Intestazione: Helvetica

Paragrafo: Garamond

ESEMPIO

Accoppiamenti popolari di Font Google

Merriweather e Open Sans

Intestazione: Merriweather

Paragrafo: Open Sans

ESEMPIO

Ubuntu e Lora

Intestazione: Ubuntu

Paragrafo: Lora

ESEMPIO

Abril Fatface e Poppins

Intestazione: Abril Fatface

Paragrafo: Poppins

ESEMPIO

Cinzel e Fauna One

Intestazione: Cinzel

Paragrafo: Fauna One

ESEMPIO

Fjalla One e Libre Baskerville

Intestazione: Fjalla One

Paragrafo: Libre Baskerville

ESEMPIO

Space Mono e Muli

Intestazione: Space Mono

Paragrafo: Muli

ESEMPIO

Spectral e Rubik

Intestazione: Spectral

Paragrafo: Rubik

ESEMPIO

Oswald e Noto Sans

Intestazione: Oswald

Paragrafo: Noto Sans

ESEMPIO

CSS Proprietà Font

Per accorciare il codice, è anche possibile specificare tutte le proprietà individuali del font in una sola proprietà.

La proprietà fontè una proprietà abbreviata per:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Esempio

Usa font per impostare diverse proprietà font in una dichiarazione:

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

Tutte le proprietà font in CSS

Proprietà	Descrizione
font	Imposta tutte le proprietà font in una dichiarazione
font-family	Specifica la famiglia di font per il testo
font-size	Specifica la dimensione del font del testo
font-style	Specifica lo stile del font per il testo
font-variant	Specifica se un testo dovrebbe essere mostrato con font in maiuscoletto
font-weight	Specifica il peso di un font