I problemi nel ridimensionare un testo

Ho visitato il sito del quotidiano romano Il Tempo usando uno smarphone e ho notato che la testata era scritta con lettere bruttissime: i loro contorni erano troppo frastagliati, e lo spessore delle aste era incostante tra una lettera e l’altra.

Andando ad ingrandire non c’era nulla di irregolare, anzi. Solo che attorno alle lettere delle due parole c’è una linea continua che ne segue il contorno. Andando a ridimensionare, il software non sa come deve gestire i pixel, e il risultato che viene fuori non è ottimale. 

Screenshot da cellulare. Sicuro c'è qualcosa che non va.

 

Ho provato a visitare la stessa pagina da pc, e in questo caso non c’erano problemi di sorta. Anche rimpicciolendo i contenuti della pagina al 30% dell’originale, il contorno delle lettere non era mai frastagliato, e tutti i passaggi di colore erano graduali.

Così è come la vedo, in dimensioni normali, da pc.

Screenshot da pc della scritta rimpicciolita al 30%. La linea di contorno è diventata solo una sfumatura azzurrina intorno alle lettere, ma non ci sono irregolarità evidenti. I tratti inferiori di L ed E però sono più sottili di quello che dovrebbero essere.

Evidentemente il problema non era nell’immagine in sé, ma nel modo in cui il software la gestisce. Quello che uso sul cellulare ha algoritmi peggiori rispetto a quello che uso sul computer.

Fino agli anni Ottanta i caratteri che venivano visualizzati sui monitor dei computer erano bitmap. Per disegnarli si aveva a disposizione una griglia limitatissima, di 8x8 o meno, e per ciascun quadratino bisognava stabilire un valore binario, 1 o 0, senza possibilità di sfumature intermedie.

Le scritte venivano visualizzate correttamente solo in una dimensione specifica. Raddoppiandola, triplicandola o comunque aumentandola di un numero intero di volte, non si creavano distorsioni ma l’effetto finale non era ottimale, visto che le linee curve o oblique si rivelavano essere composte da un certo numero di scalini.

Scegliendo invece un valore che non fosse multiplo (ad esempio aumentando la dimensione del 75% o diminuendola del 15%) c’era il rischio di creare distorsioni nelle lettere e scombinare i pesi dei vari tratti.

In seguito sono stati introdotti i font variabili outline, in cui il disegnatore realizza i contorni delle lettere, fissando soltanto l’estremità di inizio e fine nonché i punti di controllo di ciascuna linea di Bezier, utilizzando un piano cartesiano largo centinaia di unità.

Questo permette di ingrandire a dismisura le lettere senza perdere la curvatura dei tratti e senza trasformare le linee oblique in una sequenza di gradini.

È per questo che quando ingrandiamo il testo di una pagina web o un pdf vediamo la forma perfetta delle lettere, mentre se ingrandiamo il testo in un’immagine siamo in grado di riconoscere i singoli pixel.

Tuttavia anche i font scalabili devono essere ricondotti a un numero preciso di pixel e questo può creare problemi, in piccole dimensioni. Il lavoro svolto dal software è determinante. Non solo questo fa in modo che non cambino le proporzioni della lettera, ma aggiunge degli elementi a cui il disegnatore non ha lavorato, esplicitamente. La lettera non è più un insieme di bit che possono avere valore 1 o 0, ma ciascun pixel può avere almeno 256 sfumature diverse di grigio per dare l’impressione di avere delle curve arrotondate.

Si è anche andati più oltre, regolando separatamente i subpixel, ossia le componenti rossa, verde e blu di ciascun pixel, in maniera tale da triplicare la risoluzione orizzontale.

Il Rosewood è un carattere pensato per essere usato in grandi dimensioni. Ma quando lo rimpiccioliamo sullo schermo per avere una visione complessiva della pagina, come deve essere visualizzato? Ovviamente il software deve fare un grosso lavoro di approssimazione sfruttando anche le sfumature di grigio, per rendere l'idea della forma delle lettere senza distorcerle troppo, pur non avendo la possibilità di inserire la stessa quantità di dettagli.

 

Quando si sceglie un carattere tipografico non bisogna limitarsi a guardare la forma di ciascuna lettera in grande, ma bisogna anche valutare come si comporta all’interno del software, perché non tutti hanno gli stessi accorgimenti per quanto riguarda l’anti-aliasing e in generale l’adattamento a diverse dimensioni.

Ma la testata del Tempo non è un’immagine come avviene sulla gran parte dei siti web?

Sembrerebbe di no.

Si tratterebbe di un Svg (o Svg+Xml), ossia di una grafica vettoriale.

In effetti anche ingrandendo, la qualità di linee curve e oblique rimane sempre accettabile. Solo che non riesco a vedere il contenuto del file, che è codificato in base64.

 

Anche ingrandendo al 500% il logo, la linea curva appare continua e non scalettata in maniera evidente.

 

Il quotidiano ha festeggiato quest’anno gli 80 anni di vita.

Quando è nato a maggio 1944, in occasione della Liberazione della capitale dai nazifascisti, i caratteri del nome erano molto simili a quelli che si usano oggi, slab con M molto divaricata. Pereò non c’era la linea di contorno attorno alle lettere.

Soprattutto il colore era il nero, perché come tutti i quotidiani faceva uso solo di inchiostro nero per qualunque cosa, articoli, titoli, immagini, pubblicità.

Il colore è stato introdotto più di recente.

Dice Wikipedia che la stampa a colori su tutte le pagine è stata introdotta solo ad ottobre del 2007, ossia 17 anni fa. Sicuramente la prima pagina era a colori già da vari anni, ed è possibile che ci fosse già stata la scelta del blu come colore di riferimento, ma su questo argomento l’enciclopedia non dice nulla. 

Così come non dice in che anno è stata aggiunta la linea di contorno attorno al nome, scelta pensata sicuramente per l’effetto che avrebbe avuto sulla carta, non certo sui display degli smartphone.