The CSS Podcast - 036: Text & Typography
Il testo è uno degli elementi fondamentali del web.
Quando crei un sito web, non devi necessariamente applicare uno stile al testo. L'HTML ha uno stile predefinito piuttosto ragionevole.
Tuttavia, il testo costituirà probabilmente la maggior parte del tuo sito web, quindi vale la pena aggiungere un po' di stile per renderlo più accattivante. 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 ti consente di importare
caratteri personalizzati nelle tue pagine web. In questo modo hai la certezza di avere la tipografia esatta
di cui hai bisogno, indipendentemente dai caratteri installati dall'utente.
Successivamente, esamineremo le proprietà dei caratteri CSS essenziali, tra cui
font-family
, font-style
, font-weight
e font-size
. Queste nozioni di base
preparano il terreno per la manipolazione del testo in termini di stile e leggibilità.
Tratteremo anche le proprietà specifiche del paragrafo, 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.
Nel corso del corso verranno forniti esempi pratici e suggerimenti per consolidare la tua comprensione e applicazione di queste tecniche CSS.
La regola @font-face
La regola CSS @font-face
è fondamentale nella progettazione web, in quanto 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 salita, influendo sullo spazio sopra la linea di base.
descent-override
- Regola la metrica della discesa, influendo sullo spazio sotto la linea di base.
font-display
- Controlla il comportamento di visualizzazione del carattere in base al suo stato di download.
font-family
- Assegna un nome al carattere da utilizzare all'interno delle proprietà correlate ai caratteri.
font-stretch
- Imposta lo scaling orizzontale accettabile, specificato 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 spessori disponibili.
font-feature-settings
- Consente l'accesso alle funzionalità dei caratteri OpenType.
font-variation-settings
- Fornisce un controllo ottimizzato sulle impostazioni dei caratteri variabili.
line-gap-override
- Esegue l'override dell'interlinea predefinita 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 è necessario per la regola
@font-face
. La combinazione diurl()
elocal()
all'interno disrc
è una strategia comune che utilizza un carattere locale, se disponibile, per poi ripristinare un file di caratteri remoto come fallback. I browser danno la priorità alle risorse in base all'ordine di dichiarazione, pertantolocal()
in genere deve precedereurl()
. unicode-range
- Limita i caratteri per cui deve essere utilizzato questo carattere.
Descrizione
@font-face
libera i designer dai vincoli dei caratteri "sicuri per il web" consentendo loro di utilizzare tipografie personalizzate. 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 |
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 distinti.
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 unicode-range
).
Al contrario, font-family
è una proprietà CSS utilizzata all'interno di una regola CSS per assegnare
un carattere specifico 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
.
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 fallback se"CustomFont" non è disponibile.
Modificare il carattere tipografico
Utilizza font-family
per modificare 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
(trovi l'elenco completo delle opzioni su MDN). Il browser visualizzerà il primo carattere disponibile dell'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 che preferisci: se utilizzi font-family: "Helvetica"
(una famiglia di caratteri sans-serif), la riserva deve essere sans-serif
.
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
Utilizza font-weight
per impostare lo spessore del testo. Questa proprietà accetta valori di parole chiave (normal
, bold
), valori di parole chiave relativi (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 relazione 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 una serie di 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 padre.
Modificare lo spazio tra le righe
Utilizza line-height
per specificare l'altezza di ogni riga di 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 sua letterbox e come cambiano con letter-spacing
.
Modificare lo spazio tra le parole
Utilizza word-spacing
per aumentare o diminuire la lunghezza dello spazio tra le parole del testo. Questa proprietà accetta valori di lunghezza come em
, px
e rem
. Tieni presente che la lunghezza specificata si riferisce allo spazio aggiuntivo oltre alla spaziatura normale. Ciò significa che word-spacing: 0
è equivalente a word-spacing: normal
.
font
shorthand
Puoi utilizzare la proprietà abbreviata font
per impostare più proprietà correlate ai caratteri contemporaneamente. L'elenco delle proprietà possibili è font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
e line-height
.
Consulta questo articolo di MDN per informazioni specifiche su come ordinare queste proprietà.font
Aggiungere sottolineature, sopralinee e linee orizzontali al testo
Utilizza text-decoration
per aggiungere righe al testo. Il sottolineato è il formato più comune, ma è possibile aggiungere linee sopra o attraverso il testo.
La proprietà text-decoration
è l'abbreviazione 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 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 valori di qualsiasi lunghezza e imposta la larghezza del tratto di tutte le decorazioni da text-decoration-line
.
La proprietà text-decoration
è un'abbreviazione di tutte le proprietà precedenti.
Aggiungere un rientro al testo
Utilizza 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 contenitore.
Gestire contenuti nascosti o che non rientrano nello spazio disponibile
Utilizza text-overflow
per specificare come vengono rappresentati i contenuti nascosti. Sono disponibili due opzioni: clip
(impostazione predefinita), che tronca il testo nel punto di overflow, e ellipsis
, che mostra i puntini di sospensione (…) nel punto di overflow.
Controllo degli spazi vuoti
La proprietà white-space
viene utilizzata per specificare come devono essere gestiti gli spazi vuoti in un elemento. Per ulteriori dettagli, consulta l'articolo su white-space
su MDN.
white-space: pre
può essere utile per il rendering di ASCII art o di blocchi di codice con rientro accurato.
Controllare la suddivisione delle parole
Utilizza word-break
per modificare il modo in cui le parole devono essere "interrotte" 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
indica 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 ai lati sinistro e destro del blocco.
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 viene scritto da destra a sinistra (RTL). Si tratta di allineamenti logici. Scopri di più nel nostro modulo Proprietà logiche.
Utilizza center
per allineare il testo al centro del blocco.
Il valore di 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.
Controllare il modo in cui il testo va a capo
Utilizza text-wrap
per
modificare il modo in cui viene eseguito il wrapping del testo all'interno di un elemento.
Le parole chiave accettate per questa proprietà includono wrap
, nowrap
, balance
e
stable
. Il valore predefinito è wrap
, che riduce al minimo l'overflow disponendo il testo
su più righe in base agli spazi e alle interruzioni di parola.
Puoi utilizzare la parola chiave nowrap
per ottenere l'esatto contrario e impedire
che il testo venga interrotto su più righe, il che può causare overflow.
Per ottenere la stessa quantità di testo su ogni riga quando, ad esempio, scrivi
titoli o intestazioni, utilizza la parola chiave balance
. Per migliorare le prestazioni, i browser applicheranno questo valore solo agli elementi con sei righe di testo o meno.
La parola chiave stable
ha un rendimento simile a wrap
, ma è pensata per essere utilizzata con
testo
contenteditable. Con text-wrap: stable
impostato, le righe sopra i contenuti in fase di modifica
non cambieranno posizione durante la procedura.
A volte, le stringhe lunghe senza un punto di interruzione chiaro possono causare l'overflow dei contenitori.
Per controllare il modo in cui questo tipo di interruzione di testo viene interrotto, utilizza
overflow-wrap
.
Le parole chiave che puoi utilizzare per questa proprietà sono normal
, break-word
e
anywhere
. L'impostazione predefinita è normal
e non interrompe il testo per portarlo alla riga
successiva, a meno che non includa spazi o interruzioni naturali.
I valori anywhere
e break-word
aggiungono punti di interruzione in qualsiasi punto della
stringa per evitare l'overflow. Le parole chiave differiscono nel modo in cui rispondono a una dimensione
intrinseca o esplicita min-content
. La parola chiave anywhere
consente tutte le opportunità di interruzione
soft possibili. Il valore break-word
non lo fa e renderebbe il testo
lungo quanto la parola più lunga.
Modificare la direzione del testo
Utilizza direction
per impostare la direzione del testo, ovvero ltr
(da sinistra a destra, l'impostazione predefinita) o rtl
(da destra a sinistra). Alcune lingue, come l'arabo, l'ebraico o il persiano, vengono scritte 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 disposto. Il valore predefinito è horizontal-tb
, ma puoi anche impostare writing-mode
su vertical-lr
o vertical-rl
per il testo che vuoi 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'ombreggiatura al testo
Utilizza 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 diverse versioni del carattere tipografico, come grassetto, corsivo o compresso. I caratteri variabili sono caratteri che possono contenere molte varianti diverse di un tipo di carattere in un unico file.
Per ulteriori dettagli, consulta il nostro articolo sui caratteri variabili.
Pseudo-elementi
::first-letter
e ::first-line
pseudo-elementi
Gli pseudo-elementi ::first-letter
e ::first-line
hanno come target rispettivamente la prima lettera e la prima riga di un elemento di testo.
::selection
pseudo-elemento
Utilizza lo pseudo-elemento ::selection
per modificare l'aspetto del testo selezionato dall'utente.
Quando utilizzi questo pseudo-elemento, 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
è una notazione abbreviata 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 proprietà abbreviata sono font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
e font-variant-numeric
. Consulta i link di ogni proprietà per ulteriori dettagli sul suo utilizzo.
Verifica la tua comprensione
Metti alla prova le tue conoscenze di tipografia sul web
Quale delle seguenti parole chiave può essere utilizzata come font-family
generica di riserva?
helvetica
serif
italic
monospace
sans-serif
sci-fi
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-case: capitalize;
font-variant: capitalize;
text-capitalize: true;
text-transform: 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?
line-spacing
leading
line-height
baseline-distance
Risorse
- Best practice per i caratteri descrive l'importazione e il rendering dei caratteri, nonché altre best practice per l'utilizzo dei caratteri sul web.
- MDN Fundamental text and font styling.