Impara Tecniche di Formattazione del Testo per la Leggibilità

line-height

line-height controlla la spaziatura verticale tra le linee di testo. I browser impostano un valore predefinito in base al font, ma è possibile personalizzarlo utilizzando diversi formati:

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

multiplier valore senza unità come 1.5 moltiplica il font-size;
value in px altezza specifica, ad esempio, 24px;
value in em valore relativo, simile al moltiplicatore (1.4em = font-size × 1.4);
percent funziona come il moltiplicatore (120% = font-size × 1.2).

index.html

styles.css

Output

letter-spacing

letter-spacing imposta la spaziatura orizzontale tra i caratteri.

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

normal: spaziatura predefinita;
value in px: spaziatura aggiuntiva fissa;
value in em: spaziatura relativa a font-size.

index.html

styles.css

Output

word-spacing

word-spacing regola la distanza tra le parole.

word-spacing: value | inherit | normal

value: spaziatura personalizzata;
inherit: utilizza la spaziatura dell’elemento genitore;
normal: spaziatura predefinita.

index.html

styles.css

Output

text-shadow

text-shadow aggiunge ombre al testo. Accetta quattro valori:

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

X set: spostamento orizzontale;
Y set: spostamento verticale;
blur radius: morbidezza dell'ombra (0 = nitida);
color: qualsiasi colore valido, predefinito al colore attuale 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

Scorri per mostrare il menu

line-height

line-height controlla la spaziatura verticale tra le linee di testo. I browser impostano un valore predefinito in base al font, ma è possibile personalizzarlo utilizzando diversi formati:

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

multiplier valore senza unità come 1.5 moltiplica il font-size;
value in px altezza specifica, ad esempio, 24px;
value in em valore relativo, simile al moltiplicatore (1.4em = font-size × 1.4);
percent funziona come il moltiplicatore (120% = font-size × 1.2).

index.html

styles.css

Output

letter-spacing

letter-spacing imposta la spaziatura orizzontale tra i caratteri.

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

normal: spaziatura predefinita;
value in px: spaziatura aggiuntiva fissa;
value in em: spaziatura relativa a font-size.

index.html

styles.css

Output

word-spacing

word-spacing regola la distanza tra le parole.

word-spacing: value | inherit | normal

value: spaziatura personalizzata;
inherit: utilizza la spaziatura dell’elemento genitore;
normal: spaziatura predefinita.

index.html

styles.css

Output

text-shadow

text-shadow aggiunge ombre al testo. Accetta quattro valori:

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

X set: spostamento orizzontale;
Y set: spostamento verticale;
blur radius: morbidezza dell'ombra (0 = nitida);
color: qualsiasi colore valido, predefinito al colore attuale del testo.

index.html

styles.css

Output

Nota

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