formattazione visiva per_i_testi
TRANSCRIPT
![Page 1: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/1.jpg)
Formattazione visiva per i testi
![Page 2: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/2.jpg)
• Font • Dimensione e colori • Interlinea • Evidenziature • Margini • Link • Liste
![Page 3: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/3.jpg)
Font
• Font graziati (serif) • Font bastoni (sans-serif)
• Font proporzionali • Font monospaziati
![Page 4: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/4.jpg)
Font graziati
G Grazie
![Page 5: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/5.jpg)
• 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
![Page 6: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/6.jpg)
Font graziati
• Times • Century Schoolbook • Georgia
![Page 7: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/7.jpg)
Font bastoni (o senza grazie)
T
![Page 8: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/8.jpg)
Font bastoni
• Meno leggibili, ma più perentori • Aumentando la dimensione, la
leggibilità non è un problema • Venivano usati spesso nei titoli dei
giornali
![Page 9: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/9.jpg)
Font bastoni
• Arial • Trebuchet • Lucida sans • Verdana • Futura • Impact
![Page 10: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/10.jpg)
Font proporzionali
• La distanza fra le lettere dipende dalla forma della lettera
• Ogni lettera occupa un ingombro differente
![Page 11: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/11.jpg)
Font monospaziati
• Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica
Piccolo esempio 1230
![Page 12: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/12.jpg)
Font monospaziati
• Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica
![Page 13: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/13.jpg)
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
![Page 14: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/14.jpg)
Font monospaziati
• Courier • Monaco• OCR
![Page 15: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/15.jpg)
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
![Page 16: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/16.jpg)
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
![Page 17: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/17.jpg)
Anti-alias
![Page 18: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/18.jpg)
Antialiasing in piccolo
![Page 19: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/19.jpg)
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
![Page 20: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/20.jpg)
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
![Page 21: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/21.jpg)
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
![Page 22: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/22.jpg)
Font diffusi
• Arial • Verdana • Times New Roman • Courier • Georgia • Trebuchet • Lucida
![Page 23: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/23.jpg)
Di fatto
• Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier
![Page 24: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/24.jpg)
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)
![Page 25: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/25.jpg)
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
![Page 26: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/26.jpg)
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
![Page 27: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/27.jpg)
Colori
• Nero su bianco • L’uso del grigio crea seri problemi di
leggibilità, affatica • Nero su giallo
![Page 28: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/28.jpg)
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
![Page 29: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/29.jpg)
Evidenziature
• Usare il grassetto • Non il corsivo • Non altri colori
![Page 30: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/30.jpg)
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
![Page 31: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/31.jpg)
Margini
• I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione!
• Spezzare i margini tra i paragrafi
![Page 32: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/32.jpg)
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
![Page 33: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/33.jpg)
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)
![Page 34: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/34.jpg)
Tipi di layout
• Fisso • Fluido
– Puro – Misto
• Elastico
![Page 35: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/35.jpg)
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)
![Page 36: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/36.jpg)
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
![Page 37: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/37.jpg)
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
![Page 38: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/38.jpg)
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!
![Page 39: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/39.jpg)
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)
![Page 40: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/40.jpg)
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)
![Page 41: Formattazione visiva per_i_testi](https://reader034.vdocumenti.com/reader034/viewer/2022052507/558bc2d5d8b42ae74b8b45d0/html5/thumbnails/41.jpg)
Fine