Line Height

Ultima modifica: Giovedì 12 Febbraio 2009, 01:44

I CSS sono uno strumento potente, poiché permettono un pieno controllo sugli elementi della pagina. Questa è una cosa che, più o meno, sappiamo tutti. Quello che non sappiamo è che i fogli di stile sono caratterizzati da una vasta gamma di proprietà e valori, alcune delle quali sono spesso poco conosciute.

Qualche giorno fa ho deciso di approfondire la questione, studiando cause ed effetti di tutti i valori possibili per la proprietà CSS display. Dopo alcuni giorni di lavoro (e di pausa), ho finalmente completato la pagina di analisi e verifica della proprietà display.

Il documento prende in esame ogni tipo di valore possibile. Vengono tralasciati i parametri block, inline e none, poiché largamente utilizzati. Premesso questo, il test analizza le altre nove possibilità.

Per ogni voce c’è una spiegazione (spesso tradotta da fonti esterne), seguita da una lista di browser compatibili e da un esempio dove è possibile vedere la proprietà in azione.

A piè di pagina ho inserito una lista di fonti dalle quali ho preso spunto man mano che procedevo col lavoro, che spero possa essere utile per chi ha intenzione di approfondire ulteriormente l’argomento.

Nota: La pagina è abbastanza datata e necessita di alcune correzioni. Spero di applicarle al più presto.

Vai alla pagina d’esperimento CSS: La proprietà display.

Scegliere il giusto carattere, le giuste dimensioni, le giuste misure per il testo di una pagina web non è assolutamente facile: in gioco ci sono tanti parametri, portati dagli utenti che ci visitano, e tante regole da rispettare, per ottenere dei buoni risultati nel campo della leggibilità.

Abbiamo gli strumenti per ridare alla tipografia il suo vero ruolo all’interno della sfera del design.

Come specificato in un ottimo articolo sull’anatomia dei caratteri web, il foglio stampato ed il layout web non hanno nulla in comune, nemmeno la rappresentazione dei colori (additiva per i monitor, sottrattiva per il supporto cartaceo). Questo genera alcune differenze, specialmente per quello che riguarda la famiglia di caratteri da utilizzare.

La tipologia di caratteri Serif (cioè, con grazie) è quella maggiormente utilizzata nella stampa: ogni tratto termina con piccole linee ed eleganti decorazioni che accompagnano l’occhio nella lettura del testo (es. Times New Roman, Georgia, Garamond). Appartengono invece alla famiglia Sans Serif (senza grazie) tutti quei caratteri privi di questi fronzoli (es. Verdana, Arial, Helvetica).

Su foglio, l’impatto di quest’ultimi agli occhi del lettore non è certo dei migliori: lo scarso contrasto e la semplicità delle lettere rendono il testo decisamente monotono e noioso. Tuttavia, su un monitor, questi fattori non devono essere tenuti troppo in considerazione. Le dimensioni relativamente piccole adottate dagli sviluppatori e il sempre più frequente utilizzo della smussatura (detta anti-alias), fa sì che la famiglia Serif risulti scomoda per la lettura: tutte le linee e le curve poste sulle estremità di ogni lettera diventano puntini fastidiosi che possono rendere incomprensibili le parole o sfocare eccessivamente i testi (specialmente se l’effetto smussato è attivo).

A riguardo vi rimando ad un altro breve articolo sulla scelta della giusta famiglia di caratteri.

Una volta deciso il font da utilizzare, bisogna tener conto di alcuni importanti fattori essenziali per dare al testo una buona leggibilità: interlinea (line height), spazio fra le lettere e le parole (letter spacing e white space), allineamento (horizontal alignement), dimensioni del testo (font size), eccetera. E’ qua che entra in gioco, quindi, webtypography.net, un’interessante trascrizione online dell’omonimo libro di Robert Bringhurst dedicato alllo studio della tipografia, dove vengono illustrate tutte le proprietà CSS per realizzare testi piacevoli da leggere e le tecniche utili per focalizzare e mantenere l’attenzione sui contenuti.

Nelle specifiche W3C dei CSS 2.1 è presente un’intera sezione dedicata ai fogli di stile uditivi. Qualche giorno fa è stato pubblicato un interessante articolo di Nicola Convertini relativo a questo argomento, ovviamente made in HTML.it.

Studi recenti stimano in 11 milioni gli statunitensi con problemi di vista di cui 1,5 milioni sono ciechi.

L’articolo inizia con l’introdurre il ruolo degli screen readers, e l’avvento di nuovi dispositivi di rendering. Dopodiché, inizia l’elenco delle proprietà specifiche.

I contenuti sono sicuramente molto esaustivi, nonostante trovi alcune definizioni ancora abbastanza oscure. Ciò che più mi ha colpito di questo piccolo “saggio” è senza dubbio la vastità di parametri offerti per personalizzare la voce del lettore elettronico: stress, frequenza, velocità e molto altro ancora. E’ stato anche studiato un metodo per offrire all’utente un ascolto tridimensionale basato sulla sorgente della voce.

Alcuni attributi non sono ancora pienamente supportati dalle applicazioni destinate alla sintesi vocale dei contenuti, anche se ammetto di aver “fantasticato” molto sull’utilizzo dell’attributo speech/aural. Sarebbe interessante, infatti, poter analizzare del codice scritto esclusivamente per la lettura di un testo teatrale, di una poesia, o di una favola (dove certo non mancano molteplici intonazioni e timbri di voce) e osservare come variano le proprietà e i valori del parlato in base a frasi, interi periodi o persino generi (mettiamo a confronto, per esempio, un racconto dell’orrore con una filastrocca).

I CSS uditivi rientrano in un campo abbastanza inesplorato e pieno di ostacoli (sebbene nell’ambito dell’accessibilità siano stati compiuti grandi passi), ma senza dubbio offriranno ad una buona percentuale di navigatori un motivo in più per usufruire dell’immensa quantità di informazioni e di contenuti che attualmente internet può già vantare.