際際滷

際際滷Share a Scribd company logo

Formattazione visiva per_i_testi

Centro di Formazione Professionale OCST
Centro di Formazione Professionale OCST
1 of 41
Download to read offline
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 G Grazie
≒ Usati per una maggior eleganza e morbidezza ≒ Si credeva che le grazie accompagnassero dolcemente locchio da una lettera allaltra ≒ 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 ≒ Luso del grigio crea seri problemi di leggibilit, affatica ≒ Nero su giallo
Interlinea ≒ Linterlinea di circa 1.5 o leggermente superiore aumenta la leggibilit sulla carta ≒ Purtroppo questo non pare confermato sul web ≒ Linterlinea 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 dellarea 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 laltra 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 limpaginato facilmente diventa troppo grande e fuoriesce dallarea visibile ≒ o diventa troppo piccolo ed 竪 illeggibile ≒ Difficile impaginare i form!
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)
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

More Related Content

Formattazione visiva per_i_testi

  • 2. ≒ Font ≒ Dimensione e colori ≒ Interlinea ≒ Evidenziature ≒ Margini ≒ Link ≒ Liste
  • 3. Font ≒ Font graziati (serif) ≒ Font bastoni (sans-serif) ≒ Font proporzionali ≒ Font monospaziati
  • 4. Font graziati G Grazie
  • 5. ≒ Usati per una maggior eleganza e morbidezza ≒ Si credeva che le grazie accompagnassero dolcemente locchio da una lettera allaltra ≒ Nei giornali e nei libri usati per il corpo del testo
  • 7. Font bastoni (o senza grazie) T
  • 8. Font bastoni ≒ Meno leggibili, ma pi湛 perentori ≒ Aumentando la dimensione, la leggibilit non 竪 un problema ≒ Venivano usati spesso nei titoli dei giornali
  • 9. Font bastoni ≒ Arial ≒Trebuchet ≒Lucida sans ≒Verdana ≒Futura ≒ Impact
  • 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 ≒ Luso del grigio crea seri problemi di leggibilit, affatica ≒ Nero su giallo
  • 28. Interlinea ≒ Linterlinea di circa 1.5 o leggermente superiore aumenta la leggibilit sulla carta ≒ Purtroppo questo non pare confermato sul web ≒ Linterlinea aumentata 竪 scomoda per gli ipovedenti
  • 29. Evidenziature ≒ Usare il grassetto ≒ Non il corsivo ≒ Non altri colori
  • 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)
  • 34. Tipi di layout ≒ Fisso ≒ Fluido Puro Misto ≒ Elastico
  • 35. Layout fisso ≒ Il layout fisso ha le dimensioni dellarea 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 laltra 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 limpaginato facilmente diventa troppo grande e fuoriesce dallarea 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)
  • 41. Fine