CSS FONTS
Prima di introdurre l’argomento “CSS FONTS” diciamo che, la scelta del carattere giusto ha un enorme impatto sul modo in cui i lettori sperimentano un sito web. Il font giusto può creare una forte identità per il tuo brand. È importante utilizzare un carattere facile da leggere. Il carattere aggiunge valore al testo. È anche importante scegliere il colore corretto e la dimensione del testo per il carattere.
GENERIC FONT FAMILIES
In CSS FONTS ci sono cinque famiglie di caratteri generici:
- I caratteri serif hanno un piccolo tratto ai bordi di ogni lettera. Creano un senso di formalità ed eleganza.
- I caratteri sans-serif hanno linee pulite (nessun piccolo tratto attaccato). Creano un look moderno e minimalista.
- Caratteri monospace: qui tutte le lettere hanno la stessa larghezza fissa. Creano un aspetto meccanico.
- I caratteri corsivi imitano la scrittura umana.
- I caratteri fantasy sono caratteri decorativi/giocosi.
Tutti i diversi nomi dei caratteri appartengono a una delle famiglie di caratteri generici.
PROPRIETA’ FONT FAMILY
In CSS, si usa la proprietà font-family per specificare il carattere di un testo.
Nota: se il nome del carattere è composto da più parole, deve essere racchiuso tra virgolette, ad esempio: “Times New Roman“.
Suggerimento: la proprietà font-family dovrebbe contenere diversi nomi di font come sistema di “fallback”, per garantire la massima compatibilità tra browser/sistemi operativi. Inizia con il carattere che desideri e termina con una famiglia generica (per consentire al browser di scegliere un carattere simile nella famiglia generica, se non sono disponibili altri caratteri).
CARATTERI SICURI PER IL WEB
I caratteri sicuri per il Web sono caratteri installati universalmente su tutti i browser e i dispositivi. Tuttavia, non ci sono caratteri completamente sicuri per il web al 100%. C’è sempre la possibilità che un font non venga trovato o non sia installato correttamente. Pertanto, è molto importante utilizzare sempre i caratteri di fallback. Ciò significa che dovresti aggiungere un elenco di “caratteri di backup” simili nella proprietà della famiglia di caratteri. Se il primo carattere non funziona, il browser proverà con il successivo, il successivo ancora e così via. Termina sempre l’elenco con un nome di famiglia di caratteri generico.
p {
font-family: Tahoma, Verdana, sans-serif;
}
Il seguente elenco rappresenta i migliori caratteri sicuri per il web, 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)
Di seguito sono riportati alcuni fallback di font comunemente usati, organizzati per cinque famiglie di font generici:
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
FONT STYLE
La proprietà font-style è usata principalmente per specificare il testo in corsivo.
Questa proprietà ha tre valori:
- normal – Il testo viene mostrato normalmente
- italic – Il testo è mostrato in corsivo
- oblique – Il testo è “pendente” (oblique è molto simile al corsivo, ma meno supportato)
FONT WEIGHT
la proprietà font-weight specifica il peso di un font:
p.thick {
font-weight: bold;
}
FONT VARIANT
La proprietà font-variant specifica se un testo deve essere visualizzato o meno con un carattere maiuscoletto. In un carattere maiuscoletto, tutte le lettere minuscole vengono convertite in lettere maiuscole. Tuttavia, le lettere maiuscole convertite vengono visualizzate con una dimensione del carattere inferiore rispetto alle lettere maiuscole originali nel testo.
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 dovresti usare i settaggi della dimensione del carattere per far sembrare i paragrafi come intestazioni o i titoli come paragrafi. Usa sempre i tag HTML appropriati, come <h1> – <h6> per i titoli e <p> per i paragrafi. Il valore della dimensione del carattere può essere assoluto o relativo.
Absolute size:
- Imposta il testo su una dimensione specificata
- Non consente a un utente di modificare la dimensione del testo in tutti i browser (male per motivi di accessibilità)
- La dimensione assoluta è utile quando si conosce la dimensione fisica dell’output
Relative size:
- Imposta la dimensione relativa agli elementi circostanti
- Consente a un utente di modificare la dimensione del testo nei browser
IMPOSTAZIONE IN PIXEL
L’impostazione della dimensione del testo con i pixel ti dà il pieno controllo sulla dimensione del testo:
p {
font-size: 14px;
}
Suggerimento: se utilizzi i pixel, puoi comunque utilizzare lo strumento zoom per ridimensionare l’intera pagina.
IMPOSTAZIONE IN EM
Per consentire agli utenti di ridimensionare il testo (nel menu del browser), molti sviluppatori utilizzano em invece dei pixel. 1em è uguale alla dimensione del carattere corrente. La dimensione del testo predefinita nei browser è 16 px. Quindi, la dimensione predefinita di 1em è 16px. La dimensione può essere calcolata da pixel a em usando questa formula: pixel/16=em
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
RESPONSIVE FONT SIZE
La dimensione del testo può essere impostata con un’unità vw, che significa “larghezza della finestra”. In questo modo la dimensione del testo seguirà la dimensione della finestra del browser:
<h1 style=”font-size:10vw“>Hello World</h1>
Viewport è la dimensione della finestra del browser. 1vw = 1% della larghezza della finestra. Se la finestra è larga 50 cm, 1vw è 0,5 cm.
FONT PROPERTIES
Per abbreviare il codice, è anche possibile specificare tutte le proprietà dei singoli caratteri in una proprietà. La proprietà font è una proprietà abbreviata per:
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
Nota: i valori font-size e font-family sono obbligatori. Se manca uno degli altri valori, viene utilizzato il valore predefinito.
Scrivi un commento