The CSS Podcast - 036: Testo e tipografia
Il testo è uno degli elementi fondamentali 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, è probabile che il testo costituisca la maggior parte del tuo sito web, quindi vale la pena aggiungere alcuni stili per migliorarlo. Modificando alcune proprietà di base, puoi migliorare notevolmente l'esperienza di lettura per i tuoi utenti.
In questo modulo inizieremo con la regola @font-face
, che consente di importare caratteri personalizzati nelle tue pagine web. In questo modo avrai la tipografia esatta di cui hai bisogno, indipendentemente dai caratteri installati dall'utente.
Successivamente, illustreremo 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.
Verranno forniti esempi pratici e suggerimenti per consolidare la tua comprensione e applicazione di queste tecniche CSS.
Regola @font-face
La regola at @font-face
CSS è fondamentale nel web design, in quanto ti consente di specificare e utilizzare caratteri personalizzati per visualizzare il testo. La bellezza di @font-face
sta nella sua
versatilità: ti 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 ascensione, influenzando lo spazio sopra la base di riferimento.
descent-override
- Regola la metrica della discesa, che influisce sullo spazio sotto la linea di base.
font-display
- Controlla il comportamento di visualizzazione del carattere in base allo stato del 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 inclinazione per gli stili obliqui.
font-weight
- Determina lo spessore o l'intervallo di spessori disponibili del carattere.
font-feature-settings
- Consente l'accesso alle funzionalità per i caratteri OpenType.
font-variation-settings
- Offre un controllo accurato 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 è obbligatorio per la regola
@font-face
. La combinazione diurl()
elocal()
all'interno disrc
è una strategia comune che utilizza un carattere locale, se disponibile, tornando a un file di caratteri remoto come opzione di riserva. I browser danno la priorità alle risorse in base all'ordine di dichiarazione, 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 "adatti al web" consentendo loro di utilizzare la tipografia personalizzata. La possibilità 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 |
Web Open Font Format 2 | font/woff2 |
La differenza tra @font-face e font-family
In CSS, @font-face
e font-family
vengono spesso confusi, ma hanno scopi diversi.
Come abbiamo discusso, @font-face
è una regola utilizzata per definire i caratteri personalizzati che vuoi utilizzare nella tua applicazione web. Indica al browser dove scaricare il carattere, come visualizzarlo durante il caricamento (con la proprietà font-display
) e specifica quale sottoinsieme di caratteri scaricare (con font-display
).
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 web-safe, 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
Usa font-family
per cambiare il carattere 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 "Helvetica", "EB Garamond" o "Times New Roman". Le famiglie di caratteri generiche sono parole chiave come serif
, sans-serif
e monospace
(consulta l'elenco completo delle opzioni su MDN). Il browser mostrerà il primo carattere 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 disponga dei caratteri che preferisci. In genere, la famiglia di caratteri generica di riserva deve essere simile ai caratteri preferiti: se utilizzi font-family: "Helvetica"
(una famiglia di caratteri senza grazie), la famiglia di caratteri di riserva deve essere sans-serif
per corrispondere.
Utilizzare caratteri in corsivo e obliqui
Utilizza font-style
per impostare se il testo deve essere in corsivo o meno. font-style
accetta una delle seguenti parole chiave: normal
, italic
e oblique
.
Mettere il testo in grassetto
Usa font-weight
per impostare l'"audacia" del testo. Questa proprietà accetta valori di parole chiave (normal
, bold
), valori di parole chiave relative (lighter
, bolder
) e valori numerici (da 100
a 900
).
Le parole chiave normal
e bold
sono equivalenti ai valori numerici 400
e 700
, rispettivamente.
Le parole chiave lighter
e bolder
vengono calcolate in base all'elemento principale. Consulta la pagina Significato dei pesi relativi di MDN per un pratico grafico che mostra come viene determinato questo valore.
Modificare le dimensioni 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 assolute (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) e un paio di valori di parole chiave relative (smaller
, larger
). I valori relativi sono relativi a 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, è consigliabile utilizzare un numero anziché una lunghezza o una percentuale per evitare problemi di ereditarietà.
Modificare lo spazio tra i caratteri
Usa letter-spacing
per controllare la quantità di spazio orizzontale tra i caratteri del 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 relativa cassetta e come cambia con letter-spacing
.
Modificare lo spazio tra le parole
Usa 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 allo spazio extra oltre allo spazio normale. Ciò significa che word-spacing: 0
è equivalente a word-spacing: normal
.
font
stenografia
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
di MDN per informazioni specifiche su come ordinare queste proprietà.
Modificare le maiuscole/minuscole del testo
Utilizza text-transform
per modificare le lettere maiuscole del testo senza dover modificare l'HTML sottostante. Questa proprietà accetta i seguenti valori di parole chiave: uppercase
, lowercase
e capitalize
.
Aggiungere sottolineature, linee superiori e linee passanti al testo
Usa text-decoration
per aggiungere righe al testo. Le linee sottolineate sono le più utilizzate, ma è possibile aggiungere linee sopra il testo o al suo interno.
La proprietà text-decoration
è un'abbreviazione per le 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 di 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 la larghezza del tratto di tutte le decorazioni da text-decoration-line
.
La proprietà text-decoration
è un'abbreviazione per tutte le proprietà sopra indicate.
Aggiungere un rientro al testo
Usa text-indent
per aggiungere un rientro ai blocchi di testo. Questa proprietà accetta una lunghezza (ad esempio 10px
, 2em
) o una percentuale della larghezza del blocco contenente.
Gestire i contenuti nascosti o in eccesso
Utilizza text-overflow
per specificare la modalità di rappresentazione dei 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.
Controllare gli spazi vuoti
La proprietà white-space
viene utilizzata per specificare come gestire gli spazi in un elemento. Per ulteriori dettagli, consulta l'articolo white-space
su MDN.
white-space: pre
può essere utile per il rendering di ASCII art o blocchi di codice con rientri accurati.
Controllare il modo in cui le parole vengono suddivise
Utilizza word-break
per modificare il modo in cui le parole devono essere "interrotte" quando fuoriescono dalla riga. Per impostazione predefinita, il browser non divide le parole. Se utilizzi il valore della parola chiave break-all
per word-break
, il browser separerà le parole in base ai singoli caratteri, se necessario.
Modificare l'allineamento del testo
Utilizza text-align
per specificare l'allineamento orizzontale del testo in un elemento di blocco o di 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 ai lati sinistro e destro del blocco, rispettivamente.
Utilizza start
e end
per rappresentare la posizione dell'inizio e della fine di una riga di testo nella modalità di scrittura corrente. Pertanto, start
corrisponde a left
in inglese e a right
in arabo, che si scrive da destra verso sinistra (RTL). Si tratta di allineamenti logici. Scopri di più nel nostro modulo sulle 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.
Modificare la direzione del testo
Usa direction
per impostare la direzione del testo, ltr
(da sinistra a destra, predefinita) o rtl
(da destra a sinistra). Alcune lingue, come arabo, ebraico o persiano, si scrivono da destra a sinistra, quindi è necessario utilizzare direction: rtl
. Per l'inglese e tutte le altre lingue che si scrivono 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 che venga visualizzato in orizzontale.
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 l'importazione di file diversi per le varie versioni del carattere, ad esempio grassetto, corsivo o condensato. I caratteri variabili sono caratteri che possono contenere molte varianti diverse di un carattere in un unico file.
Per ulteriori dettagli, consulta il nostro articolo sui caratteri variabili.
Pseudo-elementi
Pseudo-elementi ::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.
Pseudoelemento ::selection
Utilizza l'elemento pseudo ::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
, stroke-width
.
font-variant
La proprietà font-variant
è un'abbreviazione per una serie di proprietà CSS che ti consentono di scegliere varianti di carattere come small-caps
e slashed-zero
. Le proprietà CSS incluse in questa abbreviazione 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.
Verificare di aver compreso
Verifica le tue conoscenze di tipografia sul web
Quale delle seguenti parole chiave può essere utilizzata come opzione di riserva generica per font-family
?
helvetica
italic
serif
sci-fi
sans-serif
monospace
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-transform: capitalize;
font-variant: capitalize;
font-style: capitals;
text-capitalize: true;
text-case: capitalize;
Vero o falso: utilizza text-orientation
per allineare il testo a sinistra, a destra o al centro.
Quale proprietà CSS può essere utilizzata per modificare lo spazio tra le righe di testo?
line-height
baseline-distance
line-spacing
leading
Risorse
- Le best practice per i caratteri illustrano l'importazione e il rendering dei caratteri, nonché altre best practice per l'utilizzo dei caratteri sul web.
- Testo di base e stili di caratteri di MDN.