Formattazione visiva per i testi
<ul><li>Font </li></ul><ul><li>Dimensione e colori </li></ul><ul><li>Interlinea </li></ul><ul><li>Evidenziature </li></ul>...
Font <ul><li>Font graziati (serif) </li></ul><ul><li>Font bastoni (sans-serif) </li></ul><ul><li>Font proporzionali </li><...
Font graziati <ul><li>G </li></ul>Grazie
<ul><li>Usati per una maggior eleganza e morbidezza </li></ul><ul><li>Si credeva che le grazie accompagnassero dolcemente ...
Font graziati <ul><li>Times </li></ul><ul><li>Century Schoolbook </li></ul><ul><li>Georgia </li></ul>
Font bastoni (o senza grazie) <ul><li>T </li></ul>
Font bastoni <ul><li>Meno leggibili, ma più perentori </li></ul><ul><li>Aumentando la dimensione, la leggibilità non è un ...
Font bastoni <ul><li>Arial </li></ul><ul><li>Trebuchet </li></ul><ul><li>Lucida sans </li></ul><ul><li>Verdana </li></ul><...
Font proporzionali <ul><li>La distanza fra le lettere dipende dalla forma della lettera </li></ul><ul><li>Ogni lettera occ...
Font monospaziati <ul><li>Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è ident...
Font monospaziati <ul><li>Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è ident...
Font monospaziati <ul><li>Nascono con la macchina da scrivere </li></ul><ul><li>Sono usati non per i testi, ma per il codi...
Font monospaziati <ul><li>Courier </li></ul><ul><li>Monaco </li></ul><ul><li>OCR </li></ul>
Aria di famiglia <ul><li>Il nome del font-family identifica famiglie di carattere che condividano le metriche di fondo, le...
Questione di risoluzione <ul><li>A causa della bassa risoluzione del monitor i font pensati per la stampa non si vedono be...
Anti-alias
Antialiasing in piccolo
I browser e gli screen font <ul><li>Explorer di default non applica antialiasing, dunque il testo è sgranato </li></ul><ul...
Verdana e Georgia <ul><li>1994: Verdana </li></ul><ul><li>In seguito: Georgia </li></ul><ul><li>Lettere di forma chiara an...
Browser e font <ul><li>In seguito ne sono stati ideati altri, come il Trebuchet e il Lucida, il Tahoma </li></ul><ul><li>I...
Font diffusi <ul><li>Arial </li></ul><ul><li>Verdana </li></ul><ul><li>Times New Roman </li></ul><ul><li>Courier </li></ul...
Di fatto <ul><li>Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier </li></ul>
Dimensione <ul><li>Bernard: Sopra i 10 px non c’è significativa differenza di accuratezza di lettura fra screen font e fon...
Piacevolezza <ul><li>Georgia meglio di Arial e Courier </li></ul><ul><li>Times più piacevole di Courier </li></ul><ul><li>...
Coerenza <ul><li>Usare un solo tipo di carattere per i testi: Verdana, o Arial, o Times, o Georgia </li></ul><ul><li>Usare...
Colori <ul><li>Nero su bianco </li></ul><ul><li>L’uso del grigio crea seri problemi di leggibilità, affatica </li></ul><ul...
Interlinea <ul><li>L’interlinea di circa 1.5 o leggermente superiore aumenta la leggibilità sulla carta </li></ul><ul><li>...
Evidenziature <ul><li>Usare il grassetto </li></ul><ul><li>Non il corsivo </li></ul><ul><li>Non altri colori </li></ul>
A proposito del corsivo <ul><li>Inizialmente, con una cattiva resa a monitor, il corsivo rendeva le lettere ancora più seg...
Margini <ul><li>I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione! </li></ul><ul>...
Link <ul><li>No ai link dello stesso colore del testo! </li></ul><ul><li>I link sottolineati sono meglio, lontani dai menu...
Link visitati <ul><li>Uno degli indizi più importanti per gli utenti è il cambio di colore per i link già visitati </li></...
Tipi di layout <ul><li>Fisso </li></ul><ul><li>Fluido </li></ul><ul><ul><li>Puro </li></ul></ul><ul><ul><li>Misto </li></u...
Layout fisso <ul><li>Il layout fisso ha le dimensioni dell’area utile definite in pixel, e non modificabili, a qualunque r...
Layout fluido <ul><li>Puro: le dimensioni orizzontali delle aree (colonne) sono definite in percentuale </li></ul><ul><li>...
Layout fluido misto <ul><li>Solo una colonna è libera di variare, mentre l’altra o le altre sono bloccate in pixel </li></...
Layout elastico <ul><li>Le dimensioni sono proporzionali, e in più, dipendono dalla grandezza del testo! </li></ul><ul><li...
Comparazione <ul><li>Fluido </li></ul><ul><li>Fisso a sinistra </li></ul><ul><li>Fisso Centrato </li></ul><ul><li>Nessuna ...
Riepilogo <ul><li>Testi più piccoli a 10 px (ma meglio di più) </li></ul><ul><li>Testi normali 12-14 px (tendenza al rialz...
Fine
Upcoming SlideShare
Loading in …5
×

Scrivere sul web: aspetti visivi

2,453 views

Published on

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,453
On SlideShare
0
From Embeds
0
Number of Embeds
124
Actions
Shares
0
Downloads
53
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Scrivere sul web: aspetti visivi

  1. 1. Formattazione visiva per i testi
  2. 2. <ul><li>Font </li></ul><ul><li>Dimensione e colori </li></ul><ul><li>Interlinea </li></ul><ul><li>Evidenziature </li></ul><ul><li>Margini </li></ul><ul><li>Link </li></ul><ul><li>Liste </li></ul>
  3. 3. Font <ul><li>Font graziati (serif) </li></ul><ul><li>Font bastoni (sans-serif) </li></ul><ul><li>Font proporzionali </li></ul><ul><li>Font monospaziati </li></ul>
  4. 4. Font graziati <ul><li>G </li></ul>Grazie
  5. 5. <ul><li>Usati per una maggior eleganza e morbidezza </li></ul><ul><li>Si credeva che le grazie accompagnassero dolcemente l’occhio da una lettera all’altra </li></ul><ul><li>Nei giornali e nei libri usati per il corpo del testo </li></ul>
  6. 6. Font graziati <ul><li>Times </li></ul><ul><li>Century Schoolbook </li></ul><ul><li>Georgia </li></ul>
  7. 7. Font bastoni (o senza grazie) <ul><li>T </li></ul>
  8. 8. Font bastoni <ul><li>Meno leggibili, ma più perentori </li></ul><ul><li>Aumentando la dimensione, la leggibilità non è un problema </li></ul><ul><li>Venivano usati spesso nei titoli dei giornali </li></ul>
  9. 9. Font bastoni <ul><li>Arial </li></ul><ul><li>Trebuchet </li></ul><ul><li>Lucida sans </li></ul><ul><li>Verdana </li></ul><ul><li>Futura </li></ul><ul><li>Impact </li></ul>
  10. 10. Font proporzionali <ul><li>La distanza fra le lettere dipende dalla forma della lettera </li></ul><ul><li>Ogni lettera occupa un ingombro differente </li></ul>
  11. 11. Font monospaziati <ul><li>Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica </li></ul><ul><li>Piccolo esempio 1230 </li></ul>
  12. 12. Font monospaziati <ul><li>Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica </li></ul>
  13. 13. Font monospaziati <ul><li>Nascono con la macchina da scrivere </li></ul><ul><li>Sono usati non per i testi, ma per il codice di programmazione o html </li></ul><ul><li>Non a caso è il font di default di Explorer per mostrare il codice </li></ul>
  14. 14. Font monospaziati <ul><li>Courier </li></ul><ul><li>Monaco </li></ul><ul><li>OCR </li></ul>
  15. 15. Aria di famiglia <ul><li>Il nome del font-family identifica famiglie di carattere che condividano le metriche di fondo, le forme, le linee </li></ul><ul><li>Esistono molte varianti di alcune di esse: Futura è una di quelle che ha il maggior numero di versioni </li></ul><ul><li>Ogni tipo di carattere di una famiglia ha le metriche per calcolare italico, grassetto, sottolineato </li></ul>
  16. 16. Questione di risoluzione <ul><li>A causa della bassa risoluzione del monitor i font pensati per la stampa non si vedono bene, sono sgranati </li></ul><ul><li>Per sopperire a questa caratteristica alcuni programmi usano una tecnica chiamata anti-aliasing </li></ul>
  17. 17. Anti-alias
  18. 18. Antialiasing in piccolo
  19. 19. I browser e gli screen font <ul><li>Explorer di default non applica antialiasing, dunque il testo è sgranato </li></ul><ul><li>Per risolvere questi problemi, Microsoft commissiona a Mattew Carter un set di Screen-font da usare sui propri sistemi operativi </li></ul>
  20. 20. Verdana e Georgia <ul><li>1994: Verdana </li></ul><ul><li>In seguito: Georgia </li></ul><ul><li>Lettere di forma chiara anche a piccole dimensioni </li></ul><ul><li>Sfruttano la matrice di pixel usando linee verticali, orizzontali e inclinate a 45, dove non c’è bisogno di correzioni </li></ul><ul><li>Spaziatura regolare </li></ul><ul><li>Studio del grassetto </li></ul><ul><li>Esistono per le famiglie sans-serif e serif </li></ul>
  21. 21. Browser e font <ul><li>In seguito ne sono stati ideati altri, come il Trebuchet e il Lucida, il Tahoma </li></ul><ul><li>I browser quando vengono installati, installano automaticamente sul sistema molti font </li></ul><ul><li>Per questa ragione, esiste una serie di famiglie di font che è più probabile che gli utenti abbiano </li></ul>
  22. 22. Font diffusi <ul><li>Arial </li></ul><ul><li>Verdana </li></ul><ul><li>Times New Roman </li></ul><ul><li>Courier </li></ul><ul><li>Georgia </li></ul><ul><li>Trebuchet </li></ul><ul><li>Lucida </li></ul>
  23. 23. Di fatto <ul><li>Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier </li></ul>
  24. 24. Dimensione <ul><li>Bernard: Sopra i 10 px non c’è significativa differenza di accuratezza di lettura fra screen font e font tradizionali </li></ul><ul><li>Times e Arial: lettura più veloce rispetto a Courier e Georgia </li></ul><ul><li>Leggibilità percepita: Courier, Arial, Georgia (in parziale contraddizione con i dati reali) </li></ul>
  25. 25. Piacevolezza <ul><li>Georgia meglio di Arial e Courier </li></ul><ul><li>Times più piacevole di Courier </li></ul><ul><li>Ma… </li></ul><ul><li>Carattere preferito: Verdana </li></ul><ul><li>Verdana ha le prestazioni mediamente buone, anche se non eccellenti, in tutte le misure </li></ul>
  26. 26. Coerenza <ul><li>Usare un solo tipo di carattere per i testi: Verdana, o Arial, o Times, o Georgia </li></ul><ul><li>Usare un solo tipo di carattere per i titoli </li></ul><ul><li>A volte si tende a invertire la convenzione cartacea: Verdana per i testi e Georgia per i titoli! </li></ul><ul><li>Coerenza anche nelle dimensioni </li></ul>
  27. 27. Colori <ul><li>Nero su bianco </li></ul><ul><li>L’uso del grigio crea seri problemi di leggibilità, affatica </li></ul><ul><li>Nero su giallo </li></ul>
  28. 28. Interlinea <ul><li>L’interlinea di circa 1.5 o leggermente superiore aumenta la leggibilità sulla carta </li></ul><ul><li>Purtroppo questo non pare confermato sul web </li></ul><ul><li>L’interlinea aumentata è scomoda per gli ipovedenti </li></ul>
  29. 29. Evidenziature <ul><li>Usare il grassetto </li></ul><ul><li>Non il corsivo </li></ul><ul><li>Non altri colori </li></ul>
  30. 30. A proposito del corsivo <ul><li>Inizialmente, con una cattiva resa a monitor, il corsivo rendeva le lettere ancora più seghettate </li></ul><ul><li>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 </li></ul>
  31. 31. Margini <ul><li>I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione! </li></ul><ul><li>Spezzare i margini tra i paragrafi </li></ul>
  32. 32. Link <ul><li>No ai link dello stesso colore del testo! </li></ul><ul><li>I link sottolineati sono meglio, lontani dai menu </li></ul><ul><li>Link esterni segnalati come tali </li></ul><ul><ul><li>Lo stato hover </li></ul></ul><ul><ul><li>Lo stato active </li></ul></ul><ul><ul><li>Lo stato visited </li></ul></ul>
  33. 33. Link visitati <ul><li>Uno degli indizi più importanti per gli utenti è il cambio di colore per i link già visitati </li></ul><ul><li>A questo è correlata una migliore usabilità (una forma di feedback) </li></ul>
  34. 34. Tipi di layout <ul><li>Fisso </li></ul><ul><li>Fluido </li></ul><ul><ul><li>Puro </li></ul></ul><ul><ul><li>Misto </li></ul></ul><ul><li>Elastico </li></ul>
  35. 35. Layout fisso <ul><li>Il layout fisso ha le dimensioni dell’area utile definite in pixel, e non modificabili, a qualunque risoluzione del monitor </li></ul><ul><li>Consente di impaginare anche le immagini in maniera precisa, perché gli allineamenti vengono rispettati </li></ul><ul><li>I caratteri però hanno comunque una resa leggermente differente su diversi browser e sistemi operativi </li></ul><ul><li>Può essere centrato o allineato a sinistra (raramente a destra) </li></ul>
  36. 36. Layout fluido <ul><li>Puro: le dimensioni orizzontali delle aree (colonne) sono definite in percentuale </li></ul><ul><li>Si adattano a tutte le dimensioni della finestra </li></ul><ul><li>A dimensioni piccole, però, alcune parole indivisibili sforano </li></ul><ul><li>A dimensioni grandi, le righe di testo sono molto lunghe </li></ul>
  37. 37. Layout fluido misto <ul><li>Solo una colonna è libera di variare, mentre l’altra o le altre sono bloccate in pixel </li></ul><ul><li>Consente di impaginare meglio alcune aree (menu, immagini) </li></ul><ul><li>Riga comunque lunga a dimensioni grandi </li></ul>
  38. 38. Layout elastico <ul><li>Le dimensioni sono proporzionali, e in più, dipendono dalla grandezza del testo! </li></ul><ul><li>Un testo più grande genera impaginati più grandi </li></ul><ul><li>Il problema è che l’impaginato facilmente diventa troppo grande e fuoriesce dall’area visibile </li></ul><ul><li>… o diventa troppo piccolo ed è illeggibile </li></ul><ul><li>Difficile impaginare i form! </li></ul>
  39. 39. Comparazione <ul><li>Fluido </li></ul><ul><li>Fisso a sinistra </li></ul><ul><li>Fisso Centrato </li></ul><ul><li>Nessuna differenza in prestazione, ma i soggetti tendono a preferire il fluido per leggere e trovare informazioni. A sinistra è il meno apprezzato. </li></ul><ul><li>(Bernard e Larsen, 2001) </li></ul>
  40. 40. Riepilogo <ul><li>Testi più piccoli a 10 px (ma meglio di più) </li></ul><ul><li>Testi normali 12-14 px (tendenza al rialzo per effetto di aumento età e risoluzioni monitor) </li></ul><ul><li>Colori molto contrastati </li></ul><ul><li>Titoli e link distinti </li></ul><ul><li>Parole chiave in grassetto </li></ul><ul><li>Margini laterali abbondanti (o layout centrato) </li></ul><ul><li>Font standard e sicuri (o graceful degradation nei CSS) </li></ul>
  41. 41. Fine

×