Podcast su CSS - 036: Text & Typography
Il testo è uno degli elementi costitutivi del web.
Quando crei un sito web, non devi necessariamente applicare uno stile al testo; il codice HTML ha di fatto uno stile predefinito abbastanza ragionevole.
Tuttavia, poiché è probabile che il testo copra la maggior parte del tuo sito web, vale la pena aggiungere qualche stile per abbellirlo. Modificando alcune proprietà di base, puoi migliorare notevolmente l'esperienza di lettura dei tuoi utenti.
In questo modulo, vedremo innanzitutto alcune proprietà fondamentali dei caratteri CSS, come font-family, font-style, font-weight e font-size. Successivamente, esamineremo le proprietà che interessano i paragrafi di testo, come text-indent e word-spacing. Il modulo termina con alcuni argomenti più avanzati, come caratteri variabili e pseudo-elementi.
Cambiare il tipo di carattere
Utilizza font-family per cambiare il tipo di carattere del testo.
La proprietà font-family accetta un elenco di stringhe separate da virgole, che fa 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 quali serif, sans-serif e monospace (consulta l'elenco completo delle opzioni su MDN). Il browser mostrerà il primo carattere disponibile dall'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 tuoi caratteri preferiti. In genere, la famiglia di caratteri generici di riserva dovrebbe essere simile ai tuoi caratteri preferiti: se utilizzi font-family: "Helvetica" (una famiglia di caratteri senza grazie), la famiglia di caratteri di riserva dovrebbe essere sans-serif.
Utilizzare i caratteri in corsivo e obliquo
Utilizza font-style per specificare se il testo deve essere in corsivo o meno. font-style accetta una delle seguenti parole chiave: normal, italic e oblique.
Formatta il testo in grassetto
Utilizza font-weight per impostare il "grassetto" del testo. Questa proprietà accetta valori per parole chiave (normal, bold), valori relativi per le parole chiave (lighter, bolder) e valori numerici (da 100 a 900).
Le parole chiave normal e bold corrispondono rispettivamente ai valori numerici 400 e 700.
Le parole chiave lighter e bolder vengono calcolate in base all'elemento principale. Consulta il Significato dei pesi relativi di MDN per un pratico grafico che mostra come viene determinato questo valore.
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 delle parole chiave assoluti (xx-small, x-small, small, medium, large, x-large, xx-large) e un paio di valori di parola chiave relativi (smaller, larger). I valori relativi sono relativi al valore font-size dell'elemento principale.
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, si consiglia di 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 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 di seguito, 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 una parola e l'altra nel testo. Questa proprietà accetta valori di lunghezza come em, px e rem. Tieni presente che la lunghezza specificata si riferisce allo 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 più proprietà relative ai caratteri contemporaneamente. Le possibili proprietà sono font-family, font-size, font-stretch, font-style, font-variant, font-weight e line-height.
Consulta l'articolo di MDN font per le specifiche su come ordinare queste proprietà.
Modificare le maiuscole e le minuscole 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 per le parole chiave: uppercase, lowercase e capitalize.
Aggiungere sottolineature, sovralinee e linee finali al testo
Utilizza text-decoration per aggiungere righe al testo. I trattini bassi sono più comunemente utilizzati, ma è possibile aggiungere righe sopra il testo o al suo interno.
La proprietà text-decoration è un'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 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à citate in precedenza.
Aggiungere un rientro al testo
Utilizza text-indent per aggiungere un rientro ai blocchi di testo. Questa proprietà prende una lunghezza (ad esempio 10px, 2em) o una percentuale della larghezza del blocco contenitore.
Gestire i contenuti nascosti o in eccesso
Utilizza text-overflow per specificare in che modo vengono rappresentati i contenuti nascosti. Sono disponibili due opzioni: clip (impostazione predefinita), che tronca il testo nel punto di overflow e ellipsis, che visualizza i puntini di sospensione (...) in corrispondenza del punto di overflow.
Controlla lo spazio vuoto
La proprietà white-space viene utilizzata per specificare in che modo devono essere gestiti gli spazi vuoti in un elemento. Per ulteriori dettagli, consulta l'articolo white-space sulla MDN.
white-space: pre può essere utile per il rendering di ASCII art o di blocchi di codice con rientro cautela.
Controlla il modo in cui le parole si interrompono
Utilizza word-break per modificare il modo in cui le parole devono essere "interrotte" quando eccedono 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 spezzare le parole a singoli caratteri, se necessario.
Modifica l'allineamento del testo
Utilizza text-align per specificare l'allineamento orizzontale del testo in un elemento a blocco o a una 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.
Usa start e end per rappresentare la posizione dell'inizio e della fine di una riga di testo nell'attuale modalità di scrittura. Pertanto, start viene mappato a left in inglese e a right in arabo, che è scritto da destra a sinistra (RTL). Sono 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 delle parole in modo che il testo si allinei con i bordi sinistro e destro del blocco.
Modificare la direzione del testo
Utilizza direction per impostare la direzione del testo, ltr (da sinistra a destra, predefinita) o rtl (da destra a sinistra). Alcune lingue come l'arabo, l'ebraico o il persiano sono scritte da destra a sinistra, quindi è consigliabile usare direction: rtl. Per l'inglese e per tutte le altre lingue da sinistra a destra, utilizza direction: ltr.
Modificare il flusso di testo
Utilizza writing-mode per modificare il flusso e la disposizione del testo. 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 il valore di writing-mode è diverso da horizontal-tb.
Aggiungi un'ombra 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 versioni diverse del carattere, ad esempio grassetto, corsivo o ridotto. 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.
Pseudo-elemento ::selection
Utilizza lo pseudo elemento ::selection per modificare l'aspetto del testo selezionato dall'utente.
Quando utilizzi questo pseudo-elemento, puoi 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 di 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 forma abbreviata sono font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures e font-variant-numeric. Controlla i link su ogni proprietà per ulteriori dettagli sul relativo utilizzo.
Verifica la tua comprensione
Verifica le tue conoscenze della tipografia sul web
Quale delle seguenti parole chiave può essere utilizzata come font-family di riserva generico?
serifmonospaceitalicitalic è una parola chiave valida per font-style, non per font-family.sci-fifantasy è un metodo di riserva generico valido per font-family, tuttavia.sans-serifhelvetica"Helvetica" non è una parola chiave generica, ma si riferisce a una famiglia di caratteri specifica.Quale affermazione viene utilizzata per convertire la prima lettera di ogni parola in maiuscolo? 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: usa 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. Usa text-align per allineare il testo a sinistra, destra o al centro (e altro ancora!).Quale proprietà CSS può essere utilizzata per modificare lo spazio tra le righe di testo?
line-spacingleadingbaseline-distanceline-heightRisorse
- La sezione Best practice sui caratteri illustra l'importazione dei caratteri, il rendering dei caratteri e altre best practice per l'utilizzo dei caratteri sul web.
- Stile dei caratteri e del testo MDN Fundamental.