text-indent

Oltre all’allineamento, puoi anche indentare il testo di una pagina HTML. L’indentazione può essere positiva o negativa e le unità di misura che puoi utilizzare sono sempre le solite: px, % e em.

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

Perché può essere utile indentare il testo negativamente? Beh, hai mai sentito parlare della vecchia tecnica CSS Image Replacement? Se non ne hai mai sentito parlare, significa che sei troppo giovane (beato te!). Questa tecnica veniva usata verso la fine degli anni ’90 e fino agli inizi degli anni 2000. Essa si basava sull’utilizzo di immagini da sostituire al testo. Nel 99,99% dei casi per utilizzare (in modo farlocco!) dei font diversi per titoli e menu.
L’idea era questa: nell’HTML si inseriva il testo come doveva essere, mettiamo il caso di un titolo, ad esempio “Chi siamo”. In questo modo — non usando un’immagine — quel testo risultava indicizzabile senza problemi dai motori di ricerca. Quindi, per personalizzare il titolo, si impostava lo sfondo con l’immagine del testo e il testo reale lo si faceva scomparire con una indentazione negativa.
Per tua fortuna oggi abbiamo @font-face!