"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013Mattia Compagnucci
I caratteri tipografici sono ovunque, ci accompagnano silenziosi in ogni momento della giornata, sono protagonisti dei nostri progetti Wordpress insieme alle immagini, e ne possono decretare il successo o l'insuccesso.
Come scegliere il giusto carattere, come utilizzarlo in maniera efficace e quali strumenti abbiamo a nostra disposizione. Un viaggio nella tipografia e il suo sviluppo all'interno dei nostri progetti che ci farà capire come un buon uso dei caratteri tipografici può fare veramente la differenza.
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013Mattia Compagnucci
I caratteri tipografici sono ovunque, ci accompagnano silenziosi in ogni momento della giornata, sono protagonisti dei nostri progetti Wordpress insieme alle immagini, e ne possono decretare il successo o l'insuccesso.
Come scegliere il giusto carattere, come utilizzarlo in maniera efficace e quali strumenti abbiamo a nostra disposizione. Un viaggio nella tipografia e il suo sviluppo all'interno dei nostri progetti che ci farà capire come un buon uso dei caratteri tipografici può fare veramente la differenza.
Ucid 2014, Ecosistema Startup,strategie per occupazionePaolo Omero
Incontro a Udine insieme anche al Ministro del Lavoro Giovannini.
Presentazione di infoFACTORY e di alcuni dati sull'importanza del sistema startup per l'occupazione giovanile. Presentazione dei dati dell'incubatore certificato Friuli Innovazione.
Spunti di riflessione per la tavola rotonda.
Building brain - infoFACTORY - home and building automation - smart citiesPaolo Omero
Building Brain is an open source software platform demonstrator which allows to integrate heterogeneous domotics technologies and to encourage the development of brand new applications in this field.
Building Brain is the result of an applied research project carried out by AREA Science Park, Udine Artificial Intelligence Lab and infoFACTORY srl.
Advanced web intelligence, Carlo Tasso, Paolo Omero, infoFACTORY.Paolo Omero
PROGRAMMA DEL SEMINARIO
Durante il seminario sono stati trattati i seguenti argomenti:
Evoluzione delle tecnologie Web: Web 2.0, Intelligenza Artificiale e Web Semantico
Panoramica di alcune tecnologie: Content Based Filtering, Information Extraction, Named Entity Recognition, Social Network Analysis, Automatic Tagging, Sentiment Analysis
Sviluppo del fenomeno dei Social Media con impatto sui processi di Marketing e Business Intelligence
Principali caratteristiche e valore delle conversazioni online
Sistemi di Knowledge Management 2.0
Sistemi di Monitoraggio e Misurazione dei Social Media
Analisi del passaparola online
Misurazione della reputazione
Technological Monitoring
Crisis Management
L'EVOLUZIONE VERSO IL WEB 2.0 E 3.0E NUOVI PROCESSI DI BUSINESS
Come le innovazioni del Web stanno profondamente modificando alcuni processi aziendali
prof. Carlo Tasso - dott. Paolo Omero
Università di Udine
infoFACTORY srl - www.infofactory.it
18 Dicembre 2007
Ucid 2014, Ecosistema Startup,strategie per occupazionePaolo Omero
Incontro a Udine insieme anche al Ministro del Lavoro Giovannini.
Presentazione di infoFACTORY e di alcuni dati sull'importanza del sistema startup per l'occupazione giovanile. Presentazione dei dati dell'incubatore certificato Friuli Innovazione.
Spunti di riflessione per la tavola rotonda.
Building brain - infoFACTORY - home and building automation - smart citiesPaolo Omero
Building Brain is an open source software platform demonstrator which allows to integrate heterogeneous domotics technologies and to encourage the development of brand new applications in this field.
Building Brain is the result of an applied research project carried out by AREA Science Park, Udine Artificial Intelligence Lab and infoFACTORY srl.
Advanced web intelligence, Carlo Tasso, Paolo Omero, infoFACTORY.Paolo Omero
PROGRAMMA DEL SEMINARIO
Durante il seminario sono stati trattati i seguenti argomenti:
Evoluzione delle tecnologie Web: Web 2.0, Intelligenza Artificiale e Web Semantico
Panoramica di alcune tecnologie: Content Based Filtering, Information Extraction, Named Entity Recognition, Social Network Analysis, Automatic Tagging, Sentiment Analysis
Sviluppo del fenomeno dei Social Media con impatto sui processi di Marketing e Business Intelligence
Principali caratteristiche e valore delle conversazioni online
Sistemi di Knowledge Management 2.0
Sistemi di Monitoraggio e Misurazione dei Social Media
Analisi del passaparola online
Misurazione della reputazione
Technological Monitoring
Crisis Management
L'EVOLUZIONE VERSO IL WEB 2.0 E 3.0E NUOVI PROCESSI DI BUSINESS
Come le innovazioni del Web stanno profondamente modificando alcuni processi aziendali
prof. Carlo Tasso - dott. Paolo Omero
Università di Udine
infoFACTORY srl - www.infofactory.it
18 Dicembre 2007
3. 95% of the Web is Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/
Web Design - a.a. 2007/2008 2
4. 95% of the Web is Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/
Information design is typography
Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his
contemporary print materials what we could easily say about our contemporary
websites:
Today we are inundated with such an immense flood of printed matter that the value
of the individual work has depreciated, for our harassed contemporaries simply
cannot take everything that is printed today. It is the typographer’s task to divide up
and organize and interpret this mass of printed matter in such a way that the reader
will have a good chance of finding what is of interest to him.
With some imagination (replace print with online) this sounds like the job description
of an information designer. It is the information designer’s task “to divide up and
organize and interpret this mass of printed matter in such a way that the reader will
have a good chance of finding what is of interest to him”.
Web Design - a.a. 2007/2008 2
5. La tipografia
✤ La tipografia è il mezzo tramite il quale un’idea scritta
viene visualizzata
✤ La scelta dell’aspetto visivo può influenzare
notevolmente la leggibilità del testo e le
sensazioni del lettore, grazie alle migliaia di tipi di
caratteri disponibili.
✤ Si varia da caratteri chiari e distinguibili senza sforzo
e che ben si adattano a testi lunghi, ad altri che
colpiscono l’attenzione e che sono maggiormente
utilizzati nei titoli e nella pubblicità
Web Design - a.a. 2007/2008 2
6. Il “tono” del testo
✤ La tipografia definisce il tono di un testo, pertanto la
scelta del carattere dovrebbe basarsi sul contenuto
del messaggio che si intende trasmettere e sulla
tipologia dei destinatari.
Web Design - a.a. 2007/2008 2
7. Il carattere
✤ Il corpo del carattere definisce l’altezza delle
lettere, comprese le parti ascendenti e discendenti e la
spalla superiore e inferiore.
✤ Spesso lo si identifica con la dimensione del
carattere ma, storicamente, si riferisce alle dimensioni
fisiche del blocco che conteneva in la lettera in rilievo da
imprimere. Ecco perchè un carattere risulterà sempre
più piccolo della dimensione che gli è stata assegnata.
Web Design - a.a. 2007/2008 2
8. Unità di misura
✤ 12 punti = 1 pica
✤ 1 punto = 0,35mm
✤ 1 pica = 4,22 mm
✤ Em: è l’unità di misura di base per un dato carattere,
equivale alla sua altezza media e deriva dalla
larghezza della ‘m’ minuscola di un carattere.
Web Design - a.a. 2007/2008 2
9. Leggibilità
leggibilità del carattere
leggibilità del carattere
Progettato con ascendenti e discendenti accentuate. Studi
sulla leggibilità del carattere hanno dimostrato che il
lettore decifra le lettere dalla parte SUPERIORE
Web Design - a.a. 2007/2008 2
10. Crenatura e legatura
✤ La crenatura consente di correggere lo spazio tra
due lettere. Alcune combinazioni di lettere
presentano uno spazio eccessivo tra di loro, il che le
rende di più difficile lettura. La crenatura riduce questo
eccesso. Alcune combinazioni di lettere hanno spesso
bisogno di essere crenate e sono note come coppie di
crenatura. La crenatura è usata soprattutto per
conferire un aspetto equilibrato e armonico ai caratteri.
Web Design - a.a. 2007/2008 2
11. Crenatura e legatura
L’eccesso di spazio tra le lettere fa apparire poco armonica la parola a sinistra in cui i
caratteri sembrano distaccarsi l’uno dall’altro
Web Design - a.a. 2007/2008 2
14. Interlinea
✤ l’interlinea serve a creare lo spazio per l’inserimento
delle ascendenti e discendenti e ad evitare che le righe si
confondano l’una con l’altra risultando troppo vicine fra
loro.
✤ L’interlinea è usata per facilitare la lettura.
carattere piccolo, interlinea ampia.
✤ La larghezza (o dimensione o giustezza)di una colonna è
collegata alla dimensione del carattere
Web Design - a.a. 2007/2008 2
15. Misure ideali
✤ La lunghezza ideale di una riga è di circa 9 parole (basate
su una media di 5 lettere a parola)
✤ La lunghezza ideale di una riga è di circa 1,5 volte la
lunghezza dell’alfabeto minuscolo
✤ abcdefghijklmnopqrstuvwxyzabcdefghijklm
✤ il numero minimo è di circa 26 caratteri, quello ideale 38
e quello massimo 68
Web Design - a.a. 2007/2008 2
16. Sillabazione, giustificazione e
spaziatura
✤ Se all’interno di una colonna il testo è allineato a sinistra
o a destra, lo spazio fra le colonne sarà sempre lo stesso
e uno dei lati della colonna apparirà irregolare.
✤ Giustificando un testo, entrambi i lati appariranno
ugualmente allineati, quindi lo spazio tra le parole varierà
a seconda della necessità. Un testo giustificato che abbia
parole molto lunghe e molti spazi vuoti potrà presentarsi
visivamente imperfetto poichè, a causa degli spazi, le
parole sembreranno “navigare” nel blocco di testo
Web Design - a.a. 2007/2008 2
18. Particolare attenzione va dedicata alla
giustificazione soprattutto con colonne
di testo molto strette. Continui a-capo,
“vedove”, spaziatura irregolare e spazi
vuoti consecutivi in verticale
(ruscellamento) sono incovenienti
frequenti con la giustificazione
automatica del testo
Particolare attenzione va dedicata alla
giustificazione soprattutto con colonne
di testo molto strette. Continui a-capo,
“vedove”, spaziatura irregolare e spazi
vuoti consecutivi in ver ticale
(ruscellamento) sono incovenienti
frequenti con la giustificazione
automatica del testo
Web Design - a.a. 2007/2008 2
20. Anatomia del carattere http://www.fontshop.com/support/glossary.php
Here’s a glossary of common type terminology, which along with the
FAQs may answer many font related questions. If the information you
need isn’t here, call us.
Kerning: Kerning refers to the horizontal
space between individual pairs of letters (a
kerning pair). Fonts that are properly
kerned appear evenly spaced without large
open gaps of white space between
characters.
Ligatures: Special characters that are actually two letters combined
into one. In cases where two adjacent characters would normally
bump into each other, a ligature allows the letters to flow together
more gracefully. This usually makes word shapes more aesthetically
2
pleasing. Some common ligatures are “fi", “fl”, “ff”, “ffl”, etc.
42. PER INIZIARE A STUDIARE,
ESERCIZIO PER CASA!
✤ Trovate esempi che vi piacciono in cui
questi font sono utilizzati
✤ Scrivete un documento in cui mostrate
✤ il font
✤ il suo utilizzo
✤ perchè vi è piaciuto
✤ Impaginate il documento meglio che
potete, in modo elegante, come se
fosse un libro di design
✤ convertite in PDF e consegate
mettendolo sul vostro blog e
spedendomi una mail
2
49. Personalità
in un progetto grafico l’uso di determinati tipi di
carattere suscita diverse associazioni mentali con
vari aspetti della personalità: per esempio alcuni font
sembrano più autoritari ed altri più scherzosi.
Le personalità dei caratteri tipografici contribuiscono
a suggerire un’idea specifica di ciò che si sta leggendo.
Se un font è evocativo rispetto al contenuto
testuale, significa che è stato utilizzato in modo
coerente.
Se non vi sono nessi fra testo e font, o se la relazione è
ridotta al minimo, il lettore non risponderà prontamente
al messaggio o addirittura lo rifiuterà.
2
60. 15 great examples of Web Typography
01: A List Apart — for people who make websites
2
61. 15 great examples of Web Typography
02: Shaun Inman — professional designer and developer
2
62. 15 great examples of Web Typography
03: FontShop — as its name suggests
2
63. 15 great examples of Web Typography
04: Jesús Rodríguez Velasco — blog of UC Berkeley p
2
64. 15 great examples of Web Typography
05: BearSkinRug Shop — professional illustrator, Kevin Cornel
2
65. 15 great examples of Web Typography
06: Design View — Andy Rutledge, design strategist
2
66. 15 great examples of Web Typography
07: Rikcat Industries — Rik Catlow, design director
2
67. 15 great examples of Web Typography
08: Quipsologies — news and creative morsels
2
68. 15 great examples of Web Typography
09: Design Snips — web design showcase
2
69. 15 great examples of Web Typography
10: Red Interactive Agency — web marketing and development
2
70. 15 great examples of Web Typography
11: The Big Noob — developed by and for…noobs
2
71. 15 great examples of Web Typography
12: Design Can Change — climate change
2
72. 15 great examples of Web Typography
13: Process Type Foundry — they make type
2
73. 15 great examples of Web Typography
14: Finch— interactive and graphic design agency
2
74. 15 great examples of Web Typography
15: SR28 — Simon Reynolds, web designer and illustrator
2
75. ...e altri 15
http://ilovetypography.com/2008/01/02/good-web-typography/
2
76. Da vedere!
(il pdf è su materiale didattico)
Elegant Web Typography Future of Web Design 2007
Jeff Croft
April 17th, 2007
Future of Web Design, London
Elegant Web Typography
2
80. Esercizi per la prossima volta
(1) DOCUMENTO ESEMPI 10 FONT (2) DOCUMENTO DI ESEMPI
TYPOGRAPHY + CSS
✤ Trovate esempi che vi piacciono in cui i
10 font della classificazione sono ✤ Trovate esempi online di siti Web con
utilizzati buon uso della tipografia
✤ Scrivete un documento in cui mostrate ✤ Scrivete un documento in cui
conservate:
✤ il font
✤ lo screenshot dell’esempio
✤ il suo utilizzo
✤ l’url
✤ perchè vi è piaciuto ✤ il tipo di font usato (lo vedete dal CSS)
✤ Impaginate il documento meglio che ✤ il codice CSS da riusare per i vostri lavori
potete, in modo elegante, come se
✤ un Vostro esempio su FireWorks+CSS per
fosse un libro di design studiare l’esempio che avete trovato
✤ convertite in PDF e consegate (3) MOSTRARE DIFERENZE TRA ARIAL
mettendolo sul vostro blog e ed HELVETICA
spedendomi una mail