la tipografia balbuzie digitale l.
Download
Skip this Video
Download Presentation
La tipografia Balbuzie digitale

Loading in 2 Seconds...

play fullscreen
1 / 32

La tipografia Balbuzie digitale - PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on

La tipografia Balbuzie digitale. Le regole per l’uso del colore e del carattere tipografico valide per la stampa non sono applicabili in toto allo schermo . Infatti, se abitualmente vale. Stampa  foglio di carta bianca + testo nero. Schermo  sfondo bianco + testo nero , vale ancora?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'La tipografia Balbuzie digitale' - isleen


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
la tipografia balbuzie digitale
La tipografiaBalbuzie digitale

Le regole per l’uso del colore e del carattere tipografico valide per la stampa non sono applicabili in toto allo schermo. Infatti, se abitualmente vale

  • Stampa foglio di carta bianca + testo nero
  • Schermo sfondo bianco + testo nero, vale ancora?

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia balbuzie digitale2
La tipografiaBalbuzie digitale

Trasferimento che non considera le differenze tra i due media:

  • Stampa foglio di carta bianca e il testo nero come oggetti tangibili, il colore con sostanza di pigmento
  • Schermo sfondo bianco costituito da onde luminose, il testo nero come assenza di luce. Dopo un certo lasso temporale l’irraggiamento diventa irritante per gli occhi.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia balbuzie digitale3
La tipografiaBalbuzie digitale

ConclusioneCiò che funziona per la stampa non può essere semplicemente trasferito allo schermo così com’è.

  • Leggibilità a stampa e a schermo completamente diverse. Non scegliere il colore solo per comunicare una certa emozione, ma considerare da subito la leggibilità.

Tuttavia le regole per la stampa sono un bagaglio di partenza e un punto di riferimento utile.

Per innovare bisogna infrangere le regole. Ma per infrangere le regole bisogna conoscerle.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia elementi di base
La tipografiaElementi di base

Anatomia del carattere tipografico

Le lettere hanno braccia, gambe, occhi, code, gambe …

apice

ascendente

occhiello o pancia

braccio

Linea superiore

p

A

T

f

Linea della maiuscola

gamba

Linea base

Linea inferiore

asta

discendente

traversa

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia classi di caratteri
La tipografiaClassi di caratteri

Nella tipografia moderna due sono le forme basilari di carattere:

Antique

serif = con grazie

Grotesque

sans serif = senza grazie o bastoni

Con differenti spessori delle aste

Con o senza differenti spessori delle aste

Serif

Bastoni

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia classi di caratteri6
La tipografiaClassi di caratteri

Antique

serif = con grazie

Grotesque

sans serif = senza grazie o bastoni

Serif

Bastoni

Si utilizzano per testi nell’editoria di libri e giornali.

Si utilizzano per titoli, intestazioni e pubblicità

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia classi di caratteri7
La tipografiaClassi di caratteri

Antique

serif = con grazie

Grotesque

sans serif = senza grazie o bastoni

A dimensione standard sono meno adatti allo schermo, adatti alla stampa.

Se si deve utilizzarli, scegliere quelli con grazie e aste non troppo sottili.

Sono più adatti alla griglia di pixel dello schermo.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia classi di caratteri8
La tipografiaClassi di caratteri

Antique

serif = con grazie

Grotesque

sans serif = senza grazie o bastoni

BaskervilleBodoniBookmanGaramondGoudyLucidaPalatinoTimes…

Avant GardeArialImpactFuturaGill SansHelveticaTahomaVerdana…

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia famiglie di caratteri
La tipografiaFamiglie di caratteri

Mappa grammaticale di una convenzionale famiglia di caratteri ampia.

I filetti spessi indicano l’estensione della famiglia nucleare.

Muoversi lungo qualunque linea, tuttavia il salto di una tappa corrisponde a un’ellisse: cortocircuito delle regole grammaticali.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia famiglie di caratteri10
La tipografiaFamiglie di caratteri

La famiglia di caratteri lega insieme i componenti grazie a caratteristiche visive simili.

I membri di una famiglia si assomigliano, ma conservano la loro individualità dei tratti.

I membri di una famiglia hanno differenti pesi e spessori.

Alcune famiglie hanno molti membri, altre sono ridotte a pochi.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia famiglie di caratteri11
La tipografiaFamiglie di caratteri

Le famiglie più estese possono avere caratteri sia serif che bastoni.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia unit di misura dei caratteri
La tipografiaUnità di misura dei caratteri

Due unità di misura principali:

  • Pica  per misurare la lunghezza delle righe
  • Punti  per specificare
    • la grandezza del carattere (corpo)
    • distanza tra le righe (interlinea)

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia evidenziazione dei caratteri stampa
La tipografiaEvidenziazione dei caratteri - Stampa

Varie opzioni per evidenziare i passaggi di un testo con dimensione del carattere uniforme:

  • Spessore e stile
    • Thin, Semi-bold, Bold, Italic…
  • Spaziatura
    • Narrow, Broad
  • Maiuscoletti e maiuscole
  • Caratteriserif e sans serif compresenti
  • Modifica della dimensione del carattere (con parsimonia)

Scegliere solo alcune di queste opportunità, non usarle tutte insieme!

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia interlinea stampa
La tipografiaInterlinea - Stampa

L’interlinea garantisce al lettore una lettura agile.

Misurata a partire dalla linea di base fino alla mediana della riga successiva, deve essere pari a 1,5 altezza della x.

Extrema ratio is a brand of world wide extension

Per linee particolarmente lunghe utilizzare un’interlinea maggiore.

Se l’interlinea è eccessiva, il lettore oltre alle righe vede anche gli spazi negativi in mezzo. L’alternanza di elementi positivi e negativi irrita l’occhio.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia dimensioni del carattere stampa
La tipografiaDimensioni del carattere - Stampa

La dimensione come variabile fondamentale ai fini della leggibilità del testo

  • I testi stampati a 6 pt non si leggono
  • I titoli dovrebbero essere tra 14 e 18
    • I sottotitoli tra 12 e 14
      • Per i testi mantenere una dimensione minima di 8/10 pt

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia dimensioni del carattere stampa16
La tipografiaDimensioni del carattere - Stampa

La dimensione del carattere dipende da

  • formato in cui deve apparire il testo (es. Fax, quotidiano, formato A4…)
  • larghezza della colonna
  • quantità di testo

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia layout del testo stampa
La tipografiaLayout del testo - Stampa

Una riga normale ha una lunghezza di circa 50 caratteri. Utilizzare l’interlinea automatica.

Righe con più di 50 caratteri richiedono un’interlinea extra, per aiutare a trovare il capo delle riga successiva.

Se le righe sono troppo corte, può essere difficile leggere, salvo i casi di note in cui il testo è breve.

Se le righe sono più corte si può utilizzare un corpo del carattere più piccolo.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia allineamento dei caratteri stampa
La tipografiaAllineamento dei caratteri - Stampa

L’allineamento dei caratteri determina l’aspetto tipografico di un testo.

Nei giornali il testo è giustificato e utilizza l’intera larghezza della colonna.

Negli inviti il testo è allineato al centro. Adatto solo per piccole porzioni di testo.

Il testo giustificato a destra o a sinistra si dice a bandiera a desta (b/d) o a bandiera a sinistra (b/s). Evita i buchi del testo giustificato. Ma utilizzare solo per testi brevi il b/d.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia spaziatura tra le lettere stampa
La tipografiaSpaziatura tra le lettere - Stampa
  • tracking  distanza tra le lettere. La scelta giusta di questo parametro dipende dal carattere, dal corpo, dal peso scelto. Deve risultare un texture tipografica armoniosa (con leggerezza e pesantezza bilanciate).

I caratteri piccoli hanno necessità di un tracking maggiore rispetto alle lettere più grandi.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia spaziatura tra le parole stampa
La tipografiaSpaziatura tra le parole - Stampa
  • kerning  distanza tra le parole.Dev’essere proporzionato al tracking, le lettere devono confluire con ritmo e grazia nelle parole. Ricordare il fattore di vicinanza nella leggibilità.

Evitare eccessive concentrazioni di carattere neri seguiti da buchi bianchi troppo ampi. Se aumenta il treking  aumentare anche il kerning.

I caratteri narrow e bold possono avere spaziature inferiori tra le lettere e le parole.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia tipografia e leggibilit a schermo
La tipografiaTipografia e leggibilità a schermo

Leggere a schermo è faticoso. Evitare i testi lunghi.

Nei libri e riviste il layout è sempre molto denso per motivi economici. Lo spazio della schermata non ha questo problema.

Usare un’interlinea ampia.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia tipografia e leggibilit a schermo22
La tipografiaTipografia e leggibilità a schermo

I caratteri convenzionali (print font) non possono essere semplicemente trasferiti sullo schermo. I caratteri stampati hanno una risoluzione tra 1200 e 2400 dpi, contro i 72 dpi del carattere a schermo!

  • Esistono particolari caratteri per lo schermo (detti screen font), il cui design è adattato alla risoluzione di schermo = 72 dpi ed ottimizzato per la lettura
    • Chicago (quello del Mac)
    • Verdana
    • Georgia (alternativo al Times su PC)
    • Geneva
    • Monaco
    • New York (Times New Roman su Mac)…

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia gli screen font
La tipografiaGli screen font

Il designer (es. Matthew Carter per Microsoft) ha considerato ogni singolo carattere a livello di pixel, e ne ha ottimizzato le forme per farli 'funzionare' costretti nelle rigide maglie della griglia dello schermo.

Ecco perché il corsivo risulta sempre brutto, specie nelle piccole dimensioni: infatti non collima con una griglia perfettamente squadrata di pixel e pertanto va usato solo quando assolutamente inevitabile.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia l antialiasing schermo
La tipografiaL’antialiasing - Schermo

L'antialiasing è una sfumatura che rende il contorno delle lettere più morbido attraverso l'utilizzo di pixel intermedi fra il colore di primo piano e di sfondo.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia l antialiasing schermo25
La tipografiaL’antialiasing - Schermo

Espediente per superare la scalettatura dei contorni delle lettere dovuta alla bassa risoluzione del monitor. Molto efficace per dimensioni del carattere più grandi, a piccole dimensioni crea una sfocatura fastidiosa che ostacola la lettura.

Es. l'Arial a 18 punti rende bene, ma lo stesso carattere a 12 punti risulta troppo sfocato, mentre un carattere più 'leggero' come il Courier risulta evanescente anche alla stessa dimensione di 18pt.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia l antialiasing schermo26
La tipografiaL’antialiasing - Schermo

Consiglio

usare l'anti-aliasing solo per le headlines, e uno 'screen font' senza anti-alias per le piccole dimensioni (meno di 18 punti.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia gli stili light normale bold schermo
La tipografiaGli stili light, normale, bold - Schermo

La leggibilità a schermo dipende dalla scelta cromatica di testo e sfondo (ricordare il triangolo del colore).

Se lo sfondo è bianco, i bordi del carattere tendono a essere bruciati per effetto della sovraluminosità, dunque il carattere sembra più sottile.

Compensare scegliendo un carattere dalle aste più spesse, oppure scurire lo sfondo.

Gli stili light e ultralight su schermo vanno solo a dimensioni molto grandi.

Per normali e bold aumentare il traking.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia dimensione del carattere schermo
La tipografiaDimensione del carattere - Schermo
  • I titoli dovrebbero essere tra 18 e 20 pt
    • I sottotitoli tra 16 e 18
      • Per i testi mantenere una dimensione minima di 10 pt, meglio tra 11 e 14 pt

Considerare il contrasto con lo sfondo.Un colore chiaro su sfondo scuro appare più grassetto di un colore scuro sullo stesso sfondo, a causa dell’alone di sovraluminosità che emana.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia spaziatura tra le lettere schermo
La tipografiaSpaziatura tra le lettere - Schermo

Il testo su schermo dovrebbe avere un tracking da 5 a 10 unità per garantire una maggiore leggibilità.

Se si diminuisce il tracking le lettere tendono a fondersi. Es. r+n=m, c+l=d.

I grassetti devono avere tracking maggiore dello stile normale.

Se però il tracking è eccessivo le parole tendono a spezzarsi.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia interlinea schermo
La tipografiaInterlinea - Schermo
  • Normalmente l’interlinea a schermo è pari al 120% dell’interlinea singola (impostazione Auto).
    • Nell’interlinea singola i discendenti e gli ascendenti di 2 linee consecutive paiono toccarsi.
  • 35 caratteri/riga sono la lunghezza ideale su schermo. L’interlinea ideale = 150% della singola.
  • Caratteri expanded e light richiedono un’interlinea maggiore di quelli narrow e bold.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia interlinea schermo31
La tipografiaInterlinea - Schermo

Nell'HTML non esiste ancora il concetto di interlinea (il CSS non è ancora supportato a dovere dai browser)

Esiste un trucco per simulare l'interlinea: inserire spazi di maggiori dimensioni all'interno di righe di testo. Il tag:

<FONT SIZE=+1>&nbsp;</FONT><BR> (resta inteso che naturalmente il SIZE=+1 può essere aumentato, se necessario).

Prof. Paola Trapani – Comunicazione Visiva

La tipografia

la tipografia lunghezza della riga schermo
La tipografiaLunghezza della riga - Schermo
  • Il limite massimo è di 35 caratteri per riga o anche meno. Limitare la lunghezza della riga con uno dei seguenti metodi:
    • usare la funzione BlockQuote
    • inserire un <BR> (break) dove si desidera andare a capo
    • costringere il testo in colonne di una data larghezza usando delle tabelle

La lunghezza della riga è in relazione all’interlinea.

Prof. Paola Trapani – Comunicazione Visiva

La tipografia