5. • 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
8. Font bastoni
• Meno leggibili, ma più perentori
• Aumentando la dimensione, la
leggibilità non è un problema
• Venivano usati spesso nei titoli dei
giornali
10. Font proporzionali
• La distanza fra le lettere dipende dalla
forma della lettera
• Ogni lettera occupa un ingombro
differente
11. Font monospaziati
• Ogni lettera occupa la medesima
dimensione, e la distanza fra gli
ingombri delle lettere è identica
Piccolo esempio 1230
12. Font monospaziati
• Ogni lettera occupa la medesima
dimensione, e la distanza fra gli
ingombri delle lettere è identica
13. 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
15. 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
16. 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
19. 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
20. 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
21. 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
22. Font diffusi
• Arial
• Verdana
• Times New Roman
• Courier
• Georgia
• Trebuchet
• Lucida
23. Di fatto
• Si usano Verdana, Arial, Times New
Roman, Georgia, Trebuchet, Courier
24. 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)
25. 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
26. 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
27. Colori
• Nero su bianco
• L’uso del grigio crea seri problemi di
leggibilità, affatica
• Nero su giallo
28. 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
30. 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
31. Margini
• I margini a destra e a sinistra
aumentano la velocità di lettura e
persino la comprensione!
• Spezzare i margini tra i paragrafi
32. 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
33. 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)
35. 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)
36. 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
37. 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
38. 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!
39. 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)
40. 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)
