Formattazione visiva per i testi

•  Font • Dimensione e colori •  Interlinea •  Evidenziature • Margini •  Link •  Liste

Font

•  Font graziati (serif) •  Font bastoni (sans-serif)

•  Font proporzionali •  Font monospaziati

Font graziati

G Grazie

• Usati per una maggior eleganza e morbidezza

•  Si credeva che le grazie accompagnassero dolcemente l’occhio da una lettera all’altra

• Nei giornali e nei libri usati per il corpo del testo

Font graziati

• Times • Century Schoolbook • Georgia

Font bastoni (o senza grazie)

T

Font bastoni

• Meno leggibili, ma più perentori •  Aumentando la dimensione, la

leggibilità non è un problema •  Venivano usati spesso nei titoli dei

giornali

Font bastoni

•  Arial • Trebuchet • Lucida sans • Verdana • Futura •  Impact

Font proporzionali

•  La distanza fra le lettere dipende dalla forma della lettera

• Ogni lettera occupa un ingombro differente

Font monospaziati

• Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica

Piccolo esempio 1230

Font monospaziati

• Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica

Font monospaziati

• Nascono con la macchina da scrivere •  Sono usati non per i testi, ma per il

codice di programmazione o html • Non a caso è il font di default di

Explorer per mostrare il codice

Font monospaziati

•  Courier • Monaco•  OCR

Aria di famiglia

•  Il nome del font-family identifica famiglie di carattere che condividano le metriche di fondo, le forme, le linee

•  Esistono molte varianti di alcune di esse: Futura è una di quelle che ha il maggior numero di versioni

•  Ogni tipo di carattere di una famiglia ha le metriche per calcolare italico, grassetto, sottolineato

Questione di risoluzione

•  A causa della bassa risoluzione del monitor i font pensati per la stampa non si vedono bene, sono sgranati

•  Per sopperire a questa caratteristica alcuni programmi usano una tecnica chiamata anti-aliasing

Anti-alias

Antialiasing in piccolo

I browser e gli screen font

•  Explorer di default non applica antialiasing, dunque il testo è sgranato

•  Per risolvere questi problemi, Microsoft commissiona a Mattew Carter un set di Screen-font da usare sui propri sistemi operativi

Verdana e Georgia

•  1994: Verdana •  In seguito: Georgia •  Lettere di forma chiara anche a piccole

dimensioni •  Sfruttano la matrice di pixel usando linee

verticali, orizzontali e inclinate a 45, dove non c’è bisogno di correzioni

•  Spaziatura regolare •  Studio del grassetto •  Esistono per le famiglie sans-serif e serif

Browser e font

•  In seguito ne sono stati ideati altri, come il Trebuchet e il Lucida, il Tahoma

•  I browser quando vengono installati, installano automaticamente sul sistema molti font

•  Per questa ragione, esiste una serie di famiglie di font che è più probabile che gli utenti abbiano

Font diffusi

•  Arial •  Verdana •  Times New Roman •  Courier • Georgia •  Trebuchet •  Lucida

Di fatto

•  Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier

Dimensione

•  Bernard: Sopra i 10 px non c’è significativa differenza di accuratezza di lettura fra screen font e font tradizionali

•  Times e Arial: lettura più veloce rispetto a Courier e Georgia

•  Leggibilità percepita: Courier, Arial, Georgia (in parziale contraddizione con i dati reali)

Piacevolezza

•  Georgia meglio di Arial e Courier •  Times più piacevole di Courier

•  Ma…

•  Carattere preferito: Verdana •  Verdana ha le prestazioni mediamente

buone, anche se non eccellenti, in tutte le misure

Coerenza

• Usare un solo tipo di carattere per i testi: Verdana, o Arial, o Times, o Georgia

• Usare un solo tipo di carattere per i titoli

•  A volte si tende a invertire la convenzione cartacea: Verdana per i testi e Georgia per i titoli!

•  Coerenza anche nelle dimensioni

Colori

• Nero su bianco •  L’uso del grigio crea seri problemi di

leggibilità, affatica • Nero su giallo

Interlinea

•  L’interlinea di circa 1.5 o leggermente superiore aumenta la leggibilità sulla carta

•  Purtroppo questo non pare confermato sul web

•  L’interlinea aumentata è scomoda per gli ipovedenti

Evidenziature

• Usare il grassetto • Non il corsivo • Non altri colori

A proposito del corsivo

•  Inizialmente, con una cattiva resa a monitor, il corsivo rendeva le lettere ancora più seghettate

•  I sistemi operativi più recenti hanno fatto passi avanti nella resa dei caratteri: ora il corsivo, se a caratteri abbastanza grandi e per piccole porzioni di testo, può risultare comunque leggibile

Margini

•  I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione!

•  Spezzare i margini tra i paragrafi

Link

• No ai link dello stesso colore del testo! •  I link sottolineati sono meglio, lontani

dai menu •  Link esterni segnalati come tali

–  Lo stato hover –  Lo stato active –  Lo stato visited

Link visitati

• Uno degli indizi più importanti per gli utenti è il cambio di colore per i link già visitati

•  A questo è correlata una migliore usabilità (una forma di feedback)

Tipi di layout

•  Fisso •  Fluido

–  Puro –  Misto

•  Elastico

Layout fisso

•  Il layout fisso ha le dimensioni dell’area utile definite in pixel, e non modificabili, a qualunque risoluzione del monitor

•  Consente di impaginare anche le immagini in maniera precisa, perché gli allineamenti vengono rispettati

•  I caratteri però hanno comunque una resa leggermente differente su diversi browser e sistemi operativi

•  Può essere centrato o allineato a sinistra (raramente a destra)

Layout fluido

•  Puro: le dimensioni orizzontali delle aree (colonne) sono definite in percentuale

•  Si adattano a tutte le dimensioni della finestra

•  A dimensioni piccole, però, alcune parole indivisibili sforano

•  A dimensioni grandi, le righe di testo sono molto lunghe

Layout fluido misto

•  Solo una colonna è libera di variare, mentre l’altra o le altre sono bloccate in pixel

•  Consente di impaginare meglio alcune aree (menu, immagini)

•  Riga comunque lunga a dimensioni grandi

Layout elastico

•  Le dimensioni sono proporzionali, e in più, dipendono dalla grandezza del testo!

•  Un testo più grande genera impaginati più grandi

•  Il problema è che l’impaginato facilmente diventa troppo grande e fuoriesce dall’area visibile

•  …o diventa troppo piccolo ed è illeggibile •  Difficile impaginare i form!

Comparazione

•  Fluido •  Fisso a sinistra •  Fisso Centrato Nessuna differenza in prestazione, ma i

soggetti tendono a preferire il fluido per leggere e trovare informazioni. A sinistra è il meno apprezzato.

(Bernard e Larsen, 2001)

Riepilogo

•  Testi più piccoli a 10 px (ma meglio di più) •  Testi normali 12-14 px (tendenza al rialzo per

effetto di aumento età e risoluzioni monitor) •  Colori molto contrastati •  Titoli e link distinti •  Parole chiave in grassetto •  Margini laterali abbondanti (o layout centrato) •  Font standard e sicuri (o graceful degradation nei

CSS)

Fine