The CSS Podcast - 036: Testo e tipografia
Il testo è uno degli elementi fondamentali del web.
Quando crei un sito web, non è necessario applicare necessariamente uno stile al testo; l'HTML ha infatti alcuni stili predefiniti abbastanza ragionevoli.
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.
In seguito, illustreremo le proprietà dei caratteri CSS essenziali, tra cui font-family
, font-style
, font-weight
e font-size
. Queste nozioni di base rappresentano la base per manipolare il testo sia per lo stile che per la leggibilità.
Parleremo anche di proprietà specifiche per i paragrafi, come text-indent
e
word-spacing
, prima di concludere con argomenti avanzati come i caratteri variabili
e gli 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.
La 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 ascesa, influisce sullo spazio sopra la linea di base.
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
- Nome del carattere da utilizzare nelle proprietà correlate ai caratteri.
font-stretch
- Imposta la 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 di accedere alle funzionalità dei caratteri OpenType.
font-variation-settings
- Fornisce un controllo accurato sulle impostazioni dei caratteri variabili.
line-gap-override
- Sostituisci lo spazio tra le righe predefinito del carattere.
size-adjust
- Applica un fattore di scalabilità al contorno 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 |
Web Open Font Format | 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
).unicode-range
Al contrario, font-family
è una proprietà CSS utilizzata all'interno di una regola CSS per assegnare un 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
.
In sintesi, @font-face
dichiara un carattere e gli assegna un nome, mentre
font-family
applica questo 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 opzione di 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
Utilizza 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 seguente demo, prova a selezionare una singola lettera per vedere le dimensioni della cassetta postale e come cambiano 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.
Inserire un rientro nel 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
(l'impostazione predefinita), che tronca il testo nel punto di overflow, e ellipsis
, che mostra tre puntini (…) nel punto di 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 rientro attento.
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 spezza le parole. L'utilizzo del valore della parola chiave break-all
per word-break
indica al browser di spezzare le parole nei 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.
Utilizza center
per allineare il testo al centro del blocco.
Il valore di justify
organizza il testo e modifica automaticamente gli spazi 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, l'impostazione 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 flusso e l'organizzazione del testo. 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.
Per saperne di più, consulta la sezione text-shadow
del nostro modulo sulle ombre.
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 pseudoelemento, puoi utilizzare solo determinate 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
. Consulta i link su ogni proprietà per maggiori dettagli sul suo utilizzo.
Verificare di aver compreso
Verifica le tue conoscenze sulla tipografia sul web
Quale delle seguenti parole chiave può essere utilizzata come opzione di riserva generica per font-family
?
monospace
sci-fi
serif
italic
sans-serif
helvetica
Quale istruzione viene utilizzata per convertire la prima lettera di ogni parola in maiuscolo? ad es. This is a sentence.
➡ This Is A Sentence.
text-transform: capitalize;
text-capitalize: true;
font-variant: capitalize;
text-case: capitalize;
font-style: capitals;
Vero o falso: usa 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?
baseline-distance
leading
line-spacing
line-height
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.