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