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

GGrazie

• 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 CentratoNessuna 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