Restyling Corriere

Giovedì il Corriere Della Sera ha annunciato il restyling del suo sito web riempiendo un'intera pagina del quotidiano, la 27, con la presentazione di tutte le novità. 

Una grande immagine, un articolo lungo e cinque riquadri verticali a fondo colorato con la presentazione di singoli aspetti, ciascuno firmato da un giornalista diverso. 

Nel primo riquadro si parla di font, a firma Giovanni Angeli: "I caratteri della nostra tradizione diventano più moderni: il Solferino si declina in nuove varianti stilistiche e il Brera abbandona il formato compresso per abbracciare una leggibilità più ariosa".

A fianco dell'immagine, in maniera schematica, si vede una A maiuscola accanto a una a minuscola, tratte dal Comic Sans (!), titolo "Il carattere e le immagini", e sotto: "Sono più grandi per facilitare la lettura". 

La nuova home page è online da mercoledì, dicono. 

Il restyling riguarda il raggruppamento degli argomenti, i menù, i video verticali, le notizie personalizzate sulla base della geolocalizzazione. 

Vado a dare un'occhiata, ma qualcosa non mi torna: apro un articolo da cellulare, e mi trovo davanti una Q con coda separata. Che è diversa dalla Q che si vede sul cartaceo. Una variante strana del Solferino?

Riapro la stessa pagina dal Pc, e, sorpresa, l'articolo è scritto in un carattere senza grazie stretto, che viene identificato come "Brera Condensed Bold" dallo strumento Esamina del browser Edge.

Anche il titolo dell'articolo è scritto con lo stesso font, a differenza del cellulare dove è nello stesso serif dell'articolo, che deve essere quello di default, evidentemente il PT Serif, nel mio caso. 

Edge mi elenca tre versioni del Solferino presenti nella cartella Assets del sito (Bold, Light e Regular), cinque del Brera (dai nomi indecifrabili), e un font chiamato Economia-icon, tutti in formato woff.

Nelle istruzioni Css c'è scritto semplicemente: "Font-family: BreraCondensed-Bold;", senza nessuna alternativa neanche generica. Per qualche motivo sconosciuto il mio cellulare non riesce ad attingere a questo font, quindi prende l'alternativa di default, senza neanche avere indicazioni sulla scelta di un serif o di un sans. 

Nello Stylesheet dedicato si possono trovare tutti i link ai font inclusi, non soltanto in formato woff, ma anche ttf o eot. 

Come mai il mio telefono non ci arriva?

Eppure la homepage è in caratteri Solferino: li riconosco dalla g con l'occhiello inferiore aperto. 

Il dettaglio grafico che mi colpisce di più è un'etichetta rossa con scritta bianca in Brera Bold Italic e pallino bianco lampeggiante che viene aggiunta su alcuni articoli per attirare l'attenzione: ci può essere scritto "Ultim'ora" oppure "Esclusivo".

Si chiama "label__text", con due underscore, e ha il lato superiore e quello inferiore rettilinei e i bordi laterali arrotondati; lo sfondo rosso è circondato da una cornice bianca che si distingue dal bianco dello sfondo grazie a un'ombreggiatura grigia. 

Il rosso dello sfondo è un #d62d2d, ossia (214,45,45).

Con un po' di sforzo si può individuare la porzione di codice in cui viene descritto l'oggetto: ".label.label--updating". 

Il parametro "border-radius" serve ad arrotondare le parti laterali: azzerandolo, la cornice diventa un rettangolo perfetto. 

L'ombra è impostata al colore (0,0,0) ma con una trasparenza di .25. 

Il colore del bordo è regolato col parametro Border, l'altezza della linea con Line-height. 

Ci sono impostazioni di margini (top e bottom), padding, e roba che non capisco (display impostato a flex e align-self a flex-start)

L'Ai Overview di Google spiega: "Display: flex è una proprietà CSS che attiva il modulo Flexbox, creando un contenitore flessibile che allinea automaticamente gli elementi figli in righe o colonne. Semplifica drasticamente la creazione di layout responsive, la distribuzione dello spazio e l'allineamento (verticale e orizzontale) senza usare float o posizionamenti complessi". 

Il cerchietto lampeggiante si regola altrove, in particolare la velocità a cui deve lampeggiare. 

Comunque, l'impostazione generale della pagina vista da Pc è basata sulla divisione in due parti, quella di sinistra larga due terzi del monitor con le notizie principali e i riquadri con rubriche, video eccetera, e quella di destra, con notizie più leggere: ai falchi del Pirellone è nato un falchetto, l'oroscopo di Paolo Fox, l'abitudine di riguardare Pretty Woman...

Su cellulare invece c'è una sola colonna verticale, coi titoli larghi quanto il display. 

Ogni tanto però c'è anche un po' di scorrimento orizzontale, quando vengono presentati video uno a fianco all'altro. 

Le dimensioni dei titoli variano a seconda di lunghezza, importanza, presenza di foto. Caratteri Solferino Bold, dimensione tra 29 e 37 px, ma anche 21 o 15px, in alcuni casi. 

Clicco sulla notizia di apertura e il titolo è in 36px, il testo in 18px, ma c'è sempre qualche intoppo: stavolta lo vedo in Roboto, tranne le parole in grassetto che sono in Solferino. 

Almeno sul cellulare lo stesso articolo lo vedo tutto in sans serif, ma non in Brera. 

I font del Corriere sono stati lanciati col restyling del 2011, mentre la riduzione del formato cartaceo avvenne tre anni dopo, nel 2014.