Impara Tecniche di Formattazione del Testo per la Leggibilità

line-height

La proprietà line-height definisce l'altezza di una riga ed è spesso utilizzata per regolare lo spazio tra le righe di testo. Per impostazione predefinita, line-height dipende dal font del testo ed è determinata dal browser.

line-height: multiplier | value in px | value in em | percent

multiplier è un valore senza unità (ad esempio, 1.5). In questo caso, l'altezza della riga sarà pari a 1.5 volte il valore di font-size;
value in px è un valore specifico (ad esempio, 24px) a cui l'altezza della riga sarà uguale;
value in em è un valore (ad esempio, 1.4em) che funziona in modo simile al multiplier. Il browser controllerà il valore di font-size, lo moltiplicherà per 1.4 e questo risultato sarà l'altezza della riga;
percent è un valore (ad esempio, 120%) che funziona come un multiplier. Il valore di font-size verrà moltiplicato per 1.2, determinando così l'altezza della riga.

index.html

styles.css

Output

letter-spacing

La proprietà letter-spacing imposta la spaziatura orizzontale tra i caratteri del testo.

letter-spacing: normal | value in px | value in em

normal è la spaziatura predefinita tra i caratteri;
value in px è un valore specifico che aggiunge spazio extra tra i caratteri;
value in em funziona in modo simile a px, ma la spaziatura è relativa alla font-size.

index.html

styles.css

Output

word-spacing

La proprietà word-spacing definisce la distanza tra le parole nel testo. Aumenta lo spazio tra le parole. Se nel testo sono presenti segni di punteggiatura e sono scritti insieme alle parole, continueranno a essere scritti insieme, poiché non viene inserito spazio tra di essi.

word-spacing: value | inherit | normal

value è un valore specifico che imposta lo spazio tra le parole;
inherit eredita la spaziatura tra le parole dall'elemento genitore;
normal è la spaziatura predefinita tra le parole.

index.html

styles.css

Output

text-shadow

La proprietà text-shadow aggiunge un'ombra al testo.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set regola la posizione orizzontale dell'ombra. I valori positivi spostano l'ombra verso destra, mentre i valori negativi la spostano verso sinistra;
Y set regola la posizione verticale dell'ombra. I valori positivi spostano l'ombra verso il basso, mentre i valori negativi la spostano verso l'alto;
blur radius definisce quanto l'ombra appare sfocata. Valori più alti rendono l'ombra più morbida e diffusa. Il valore predefinito è 0 se non specificato;
color specifica il colore dell'ombra in qualsiasi formato colore valido. Se non specificato, il valore predefinito è il colore del testo.

index.html

styles.css

Output

Nota

Nella formattazione del testo, non esistono regole rigide che impongano quali valori debbano essere utilizzati in situazioni specifiche. La scelta delle proprietà e dei valori di formattazione del testo dipende dai requisiti unici di ciascun progetto e dalla visione del design.

1. Quale proprietà CSS viene utilizzata per creare un effetto visivo che aggiunge un'ombra al testo?

2. Quale proprietà CSS regola la distanza tra le parole in un testo?

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 2

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.56

Scorri per mostrare il menu

line-height

line-height: multiplier | value in px | value in em | percent

multiplier è un valore senza unità (ad esempio, 1.5). In questo caso, l'altezza della riga sarà pari a 1.5 volte il valore di font-size;
value in px è un valore specifico (ad esempio, 24px) a cui l'altezza della riga sarà uguale;
value in em è un valore (ad esempio, 1.4em) che funziona in modo simile al multiplier. Il browser controllerà il valore di font-size, lo moltiplicherà per 1.4 e questo risultato sarà l'altezza della riga;
percent è un valore (ad esempio, 120%) che funziona come un multiplier. Il valore di font-size verrà moltiplicato per 1.2, determinando così l'altezza della riga.

index.html

styles.css

Output

letter-spacing

La proprietà letter-spacing imposta la spaziatura orizzontale tra i caratteri del testo.

letter-spacing: normal | value in px | value in em

normal è la spaziatura predefinita tra i caratteri;
value in px è un valore specifico che aggiunge spazio extra tra i caratteri;
value in em funziona in modo simile a px, ma la spaziatura è relativa alla font-size.

index.html

styles.css

Output

word-spacing

word-spacing: value | inherit | normal

value è un valore specifico che imposta lo spazio tra le parole;
inherit eredita la spaziatura tra le parole dall'elemento genitore;
normal è la spaziatura predefinita tra le parole.

index.html

styles.css

Output

text-shadow

La proprietà text-shadow aggiunge un'ombra al testo.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set regola la posizione orizzontale dell'ombra. I valori positivi spostano l'ombra verso destra, mentre i valori negativi la spostano verso sinistra;
Y set regola la posizione verticale dell'ombra. I valori positivi spostano l'ombra verso il basso, mentre i valori negativi la spostano verso l'alto;
blur radius definisce quanto l'ombra appare sfocata. Valori più alti rendono l'ombra più morbida e diffusa. Il valore predefinito è 0 se non specificato;
color specifica il colore dell'ombra in qualsiasi formato colore valido. Se non specificato, il valore predefinito è il colore del testo.

index.html

styles.css

Output

Nota

Nella formattazione del testo, non esistono regole rigide che impongano quali valori debbano essere utilizzati in situazioni specifiche. La scelta delle proprietà e dei valori di formattazione del testo dipende dai requisiti unici di ciascun progetto e dalla visione del design.

1. Quale proprietà CSS viene utilizzata per creare un effetto visivo che aggiunge un'ombra al testo?

2. Quale proprietà CSS regola la distanza tra le parole in un testo?

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 2