Immagini di testo
Il testo deve essere implementato come testo reale e non come immagine rasterizzata, a meno che l'immagine non sia essenziale (un logo, uno screenshot di un'interfaccia in esame) o completamente personalizzabile dall'utente.
Cosa richiede
Quando la stessa presentazione visiva può essere ottenuta con testo reale e CSS, è necessario utilizzare testo reale. Le immagini di testo non si ridimensionano in modo pulito, non possono essere selezionate, non possono essere tradotte dal browser, non possono essere restilizzate tramite CSS utente e risultano pixelate ad alto ingrandimento. Eccezioni: loghi, immagini essenziali (uno screenshot che mostra l’aspetto di un’interfaccia utente) e immagini di testo che l’utente può personalizzare.
Come soddisfarlo
- Rendere intestazioni, banner e testo promozionale come testo HTML con web font, non come PNG esportati.
- Per i badge di marketing («Nuovo», «Saldi», «30% di sconto»), utilizzare uno
<span>stilizzato con CSS anziché un’immagine sprite. - Se un designer consegna un’immagine hero con testo incorporato, richiedere che il testo sia su un livello separato da renderizzare sull’immagine tramite CSS.
- Per le card con citazioni in stile social media generate lato server, renderizzarle come SVG con elementi
<text>quando possibile — il testo SVG si ridimensiona in modo pulito ed è selezionabile. - Utilizzare
@font-faceper caricare font display personalizzati anziché rasterizzare caratteri decorativi.
Errori comuni
- Banner pubblicitari con tutto il testo («Offerta a tempo limitato! Acquista ora!») renderizzato come JPEG, sfocato al 200% di ingrandimento.
- Card con livelli di prezzo dove «99 €/mese» fa parte di un’immagine della card anziché essere testo HTML.
- Divisori di sezione con testo stilizzato («I nostri servizi») distribuiti come PNG invece di un
<h2>stilizzato. - Chiamate all’azione interamente basate su immagini, con il testo alternativo che duplica il contenuto visivo.
- Screenshot in stile email utilizzati nelle pagine marketing quando il contenuto di marketing potrebbe semplicemente essere testo reale.
Perché è importante
Le immagini di testo rappresentano anche un problema di traduzione e SEO: Google non può indicizzarle, Chrome non può tradurle e gli utenti di lenti di ingrandimento dello schermo le vedono pixelate. La correzione è di solito banale: sostituire l’esportazione con HTML. Il problema è di natura operativa — i designer consegnano JPEG perché sono più veloci da produrre in Figma che da specificare.