Podcast di CSS - 036: Text & Typography
Il testo è uno degli elementi costitutivi principali del web.
Quando crei un sito web, non devi necessariamente definire lo stile del testo: il codice HTML in realtà presenta uno stile predefinito piuttosto ragionevole.
Tuttavia, poiché il testo costituirà probabilmente la maggior parte del sito web, vale la pena aggiungere un po' di stile per migliorarlo. Se cambi alcune proprietà di base, puoi migliorare notevolmente l'esperienza di lettura dei tuoi utenti.
In questo modulo, inizieremo con la regola @font-face
, che ti consente di importare
caratteri personalizzati nelle tue pagine web. In questo modo avrai esattamente la tipografia
di cui hai bisogno, indipendentemente dai caratteri installati dall'utente.
Successivamente, tratteremo le proprietà dei caratteri CSS essenziali, tra cui
font-family
, font-style
, font-weight
e font-size
. Queste nozioni di base gettano le basi per manipolare il testo sia per lo stile che per la leggibilità.
Parleremo anche delle proprietà specifiche dei paragrafi, come text-indent
e
word-spacing
, prima di concludere con argomenti avanzati come caratteri variabili e pseudo-elementi, che perfezionano ulteriormente il controllo tipografico.
Troverai suggerimenti ed esempi pratici per consolidare la tua comprensione e applicazione di queste tecniche CSS.
Regola @font-face
La regola at-rule del @font-face
CSS è determinante nel web design, consentendoti di specificare e utilizzare caratteri personalizzati per visualizzare il testo. @font-face
sta nella sua versatilità: consente di recuperare i caratteri da un server remoto o da un carattere installato sul dispositivo dell'utente.
Sintassi
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
Descrittori
ascent-override
- Personalizza la metrica di salita, influenzando lo spazio sopra la base di riferimento.
descent-override
- Regola la metrica relativa alla discesa, influenzando lo spazio sotto la base di riferimento.
font-display
- Controlla il comportamento di visualizzazione del carattere in base allo stato di download.
font-family
- Assegna un nome al carattere da utilizzare all'interno delle relative proprietà.
font-stretch
- Imposta una scalabilità orizzontale accettabile, specificata come singolo valore o intervallo.
font-style
- Definisce lo stile del carattere, supportando intervalli di angoli per gli stili obliqui.
font-weight
- Determina lo spessore del carattere o l'intervallo di ponderazioni disponibili.
font-feature-settings
- Consente l'accesso alle funzionalità per i caratteri OpenType.
font-variation-settings
- Offre un controllo ottimizzato sulle impostazioni dei caratteri variabili.
line-gap-override
- Sostituisce l'intervallo tra le righe predefinito del carattere.
size-adjust
- Applica un fattore di scala alla struttura e alle metriche del carattere.
src
- Definisce l'origine del carattere, locale o remota. Questo attributo è obbligatorio per la
regola
@font-face
. La combinazione diurl()
elocal()
all'interno disrc
è una strategia comune che utilizza un carattere locale, se disponibile, ripristinando un file di carattere remoto come riserva. I browser danno priorità alle risorse in base all'ordine delle dichiarazioni, quindilocal()
in genere deve precedereurl()
. unicode-range
- Limita i caratteri per i quali deve essere utilizzato questo carattere.
Descrizione
@font-face
libera i designer dai vincoli dei caratteri "sicuri per il web"
consentendo loro di utilizzare elementi tipografici personalizzati. La capacità della funzione local()
di cercare
un carattere sul dispositivo dell'utente offre un'esperienza fluida che
non dipende necessariamente da una connessione a internet.
Tipi MIME dei caratteri
Formato | Tipo MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Formato carattere Web Open | font/woff |
Formato carattere 2 apertura web | font/woff2 |
La differenza tra @font-face e font-family
In CSS, @font-face
e font-family
sono spesso confusi, ma servono
a scopi distinti.
Come abbiamo visto, @font-face
è una regola utilizzata per definire i caratteri personalizzati
da utilizzare nella tua applicazione web. Indica al browser dove scaricare il carattere, come visualizzarlo durante il caricamento (con la proprietà font-display
) e specifica il sottoinsieme di caratteri da scaricare (con unicode-range
).
Al contrario, font-family
è una proprietà CSS utilizzata all'interno di una regola CSS per assegnare un
determinato carattere o un elenco di caratteri a un elemento. I caratteri elencati in font-family
possono essere caratteri sicuri per il web, caratteri di sistema o caratteri personalizzati definiti con @font-face
.
Riassumendo, @font-face
dichiara un carattere e gli assegna un nome, quindi font-family
applica il carattere dichiarato agli elementi HTML.
Ecco un esempio di utilizzo di entrambi:
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
In questo esempio, @font-face
definisce "CustomFont" e indica al browser dove
trovarlo. La proprietà font-family
lo applica quindi all'elemento body, con Arial come riserva se"CustomFont" non è disponibile.
Modificare il carattere tipografico
Utilizza font-family
per cambiare il carattere tipografico del testo.
La proprietà font-family
accetta un elenco di stringhe separate da virgole, che fanno riferimento a famiglie di caratteri specifiche o generiche. Le famiglie di caratteri specifiche sono stringhe tra virgolette, ad esempio "HЧ", "EB Garamond" o "Times New Roman". Le famiglie di caratteri generiche sono parole chiave quali serif
, sans-serif
e monospace
(consulta l'elenco completo delle opzioni su MDN). Il browser mostra il primo carattere tipografico disponibile nell'elenco fornito.
Quando utilizzi font-family
, devi specificare almeno una famiglia di caratteri generica nel caso in cui il browser dell'utente non abbia i tuoi caratteri preferiti. In genere, la famiglia di caratteri generici di riserva è simile ai caratteri che preferisci: se utilizzi font-family: "Helvetica"
(una famiglia di caratteri Sans- Serif), il valore di riserva dovrebbe essere sans-serif
in modo che corrisponda.
Utilizzare caratteri in corsivo e obliquo
Utilizza font-style
per indicare se il testo deve essere in corsivo o meno. font-style
accetta una delle seguenti parole chiave: normal
, italic
e oblique
.
Applica il grassetto al testo
Utilizza font-weight
per impostare il "grassetto" del testo. Questa proprietà accetta i valori delle parole chiave (normal
, bold
), i valori relativi delle parole chiave (lighter
, bolder
) e i valori numerici (da 100
a 900
).
Le parole chiave normal
e bold
equivalgono, rispettivamente, ai valori numerici 400
e 700
.
Le parole chiave lighter
e bolder
vengono calcolate in base all'elemento principale. Per un pratico grafico che mostra come viene determinato questo valore, consulta Significato dei pesi relativi di MDN.
Modificare la dimensione del testo
Utilizza font-size
per controllare le dimensioni degli elementi di testo. Questa proprietà accetta valori di lunghezza, percentuali e alcuni valori di parole chiave.
Oltre ai valori di lunghezza e percentuale, font-size
accetta alcuni valori di parole chiave assoluti (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) e un paio di valori di parole chiave relativi (smaller
, larger
). I valori relativi si riferiscono al valore font-size
dell'elemento principale.
Modificare lo spazio tra le righe
Utilizza line-height
per specificare l'altezza di ogni riga in un elemento. Questa proprietà accetta un numero, una lunghezza, una percentuale o la parola chiave normal
. In genere, si consiglia di utilizzare un numero anziché una lunghezza o una percentuale per evitare problemi con l'ereditarietà.
Modificare lo spazio tra i caratteri
Utilizza letter-spacing
per controllare la quantità di spazio orizzontale tra i caratteri nel testo. Questa proprietà accetta valori di lunghezza come em
, px
e rem
.
Tieni presente che il valore specificato aumenta la quantità di spazio naturale tra i caratteri. Nella demo seguente, prova a selezionare una singola lettera per vedere le dimensioni della sua letterbox e come cambia con letter-spacing
.
Modificare lo spazio tra le parole
Utilizza word-spacing
per aumentare o diminuire la lunghezza dello spazio tra ogni parola del testo. Questa proprietà accetta valori di lunghezza come em
, px
e rem
. Tieni presente che la lunghezza specificata si riferisce a uno spazio extra oltre alla normale spaziatura. Ciò significa che word-spacing: 0
equivale a word-spacing: normal
.
font
in forma breve
Puoi utilizzare la proprietà abbreviata font
per impostare contemporaneamente molte proprietà relative ai caratteri. L'elenco delle possibili proprietà è font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
e line-height
.
Consulta l'articolo font
dell'MDN per le specifiche su come ordinare queste proprietà.
Cambia il formato del testo
Utilizza text-transform
per modificare le lettere maiuscole del testo senza dover cambiare il codice HTML sottostante. Questa proprietà accetta i seguenti valori di parole chiave: uppercase
, lowercase
e capitalize
.
Aggiungere sottolineature, sottolineature e passanti al testo
Utilizza text-decoration
per aggiungere righe al testo. I trattini sono più comunemente utilizzati, ma è possibile aggiungere righe sopra il testo o direttamente attraverso il testo.
La proprietà text-decoration
è un breve elenco delle proprietà più specifiche descritte di seguito.
La proprietà text-decoration-line
accetta le parole chiave underline
, overline
e line-through
. Puoi anche specificare più parole chiave per più righe.
La proprietà text-decoration-color
imposta il colore di tutte le decorazioni da text-decoration-line
.
La proprietà text-decoration-style
accetta le parole chiave solid
, double
, dotted
, dashed
e wavy
.
La proprietà text-decoration-thickness
accetta qualsiasi valore di lunghezza e imposta lo spessore del tratto di tutte le decorazioni da text-decoration-line
.
La proprietà text-decoration
è un'abbreviazione di tutte le proprietà menzionate sopra.
Aggiungere un rientro al testo
Utilizza text-indent
per aggiungere un rientro ai blocchi di testo. Questa proprietà può avere una lunghezza (ad esempio, 10px
, 2em
) o una percentuale della larghezza del blocco contenitore.
Gestire contenuti stravaganti o nascosti
Utilizza text-overflow
per specificare come vengono rappresentati i contenuti nascosti. Sono disponibili due opzioni: clip
(impostazione predefinita), che tronca il testo in corrispondenza dell'overflow; e ellipsis
, che visualizza i puntini di sospensione (...) in corrispondenza dell'overflow.
Controlla lo spazio vuoto
La proprietà white-space
viene utilizzata per specificare come deve essere gestito lo spazio vuoto in un elemento. Per ulteriori dettagli, consulta l'articolo di white-space
su MDN.
white-space: pre
può essere utile per il rendering di arte ASCII o di blocchi di codice con rientranza accurata.
Controlla le interruzioni delle parole
Utilizza word-break
per modificare il modo in cui le parole devono "interrompere" quando superano la riga. Per impostazione predefinita, il browser non divide le parole. L'utilizzo del valore della parola chiave break-all
per word-break
indicherà al browser di interrompere le parole in singoli caratteri, se necessario.
Modificare l'allineamento del testo
Utilizza text-align
per specificare l'allineamento orizzontale del testo in un elemento blocco o cella di tabella. Questa proprietà accetta i valori delle parole chiave left
, right
, start
, end
, center
, justify
e match-parent
.
I valori left
e right
allineano il testo rispettivamente a sinistra e a destra del blocco.
Utilizza start
e end
per rappresentare il punto di inizio e di fine di una riga di testo nell'attuale modalità di scrittura. Di conseguenza, start
viene mappato a left
in inglese e a right
in scrittura araba, che è scritta da destra a sinistra (RTL). Si tratta di allineamenti logici. Per saperne di più, consulta il modulo Proprietà logiche.
Usa center
per allineare il testo al centro del blocco.
Il valore justify
organizza il testo e modifica automaticamente la spaziatura tra le parole in modo che il testo sia allineato ai bordi sinistro e destro del blocco.
Cambiare la direzione del testo
Utilizza direction
per impostare la direzione del testo, ltr
(da sinistra a destra, impostazione predefinita) o rtl
(da destra a sinistra). Alcune lingue, come l'arabo, l'ebraico o il persiano, sono scritte da destra a sinistra, quindi è necessario usare direction: rtl
. Per l'inglese e tutte le altre lingue da sinistra a destra, utilizza direction: ltr
.
Modificare il flusso del testo
Utilizza writing-mode
per modificare il modo in cui il testo scorre e viene organizzato. Il valore predefinito è horizontal-tb
, ma puoi anche impostare writing-mode
su vertical-lr
o vertical-rl
per il testo che vuoi far scorrere orizzontalmente.
Modificare l'orientamento del testo
Utilizza text-orientation
per specificare l'orientamento dei caratteri nel testo. I valori validi per questa proprietà sono mixed
e upright
. Questa proprietà è pertinente solo quando writing-mode
è impostato su un valore diverso da horizontal-tb
.
Aggiungere un'ombra al testo
Usa text-shadow
per aggiungere un'ombra al testo. Questa proprietà prevede tre lunghezze (x-offset
, y-offset
e blur-radius
) e un colore.
Consulta la sezione text-shadow
del nostro modulo sulle ombre per scoprire di più.
Caratteri variabili
In genere, i caratteri "normali" richiedono di importare file diversi per le diverse versioni dei caratteri tipografici, ad esempio grassetto, corsivo o ridotto. I caratteri variabili sono caratteri che in un unico file possono contenere molte varianti diverse di un carattere tipografico.
Per ulteriori dettagli, consulta il nostro articolo sui caratteri variabili.
Pseudoelementi
Pseudoelementi ::first-letter
e ::first-line
Gli pseudo elementi ::first-letter
e ::first-line
hanno come target rispettivamente la prima lettera e la prima riga di un elemento di testo.
Pseudo-elemento ::selection
Utilizza lo pseudoelemento ::selection
per modificare l'aspetto del testo selezionato dall'utente.
Quando utilizzi questo pseudo-elemento, è possibile utilizzare solo alcune proprietà CSS: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
e stroke-width
.
font-variant
La proprietà font-variant
è un'abbreviazione di diverse proprietà CSS che ti consente di scegliere varianti del carattere come small-caps
e slashed-zero
. Le proprietà CSS incluse in questa forma abbreviata sono font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
e font-variant-numeric
. Controlla i link su ciascuna proprietà per maggiori dettagli sul relativo utilizzo.
Verifica le tue conoscenze
Verifica le tue conoscenze di tipografia sul web
Quale delle seguenti parole chiave può essere utilizzata come font-family
di riserva generica?
serif
monospace
italic
italic
è una parola chiave valida per font-style
, non per font-family
.sci-fi
fantasy
è un elemento di riserva generico valido per font-family
.sans-serif
helvetica
"Helvetica"
non è una parola chiave generica, ma fa riferimento a una specifica famiglia di caratteri.Quale affermazione viene utilizzata per convertire la prima lettera di ogni parola in lettere maiuscole? Ad esempio: This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
Vero o falso: utilizza text-orientation
per allineare il testo a sinistra, a destra o al centro.
text-orientation
modifica la rotazione delle lettere in una riga.text-orientation
modifica la rotazione delle lettere in una riga. Utilizza text-align
per allineare il testo a sinistra, a destra o al centro (e altro ancora!).Quale proprietà CSS può essere utilizzata per modificare lo spazio tra le righe di testo?
line-spacing
leading
baseline-distance
line-height
Risorse
- Le best practice per i caratteri illustrano l'importazione e il rendering dei caratteri e altre best practice per l'utilizzo dei caratteri sul web.
- Testo di base MDN e stili dei caratteri.