L’utilizzo dei colori e dei caratteri nelle pagine Web e’ fondamentale.
Quante volte vi sara’ capitato di entrare in siti anche interessanti ma di doverne uscire quasi subito perche’ non riuscivate a concentrarvi su quello che leggevate, vi saltavano le righe sotto gli occhi, o quant’altro non rientrava nei contenuti ma nella visione degli stessi?

Qui di seguito riportiamo alcune delle regole che un buon webmaster dovrebbe tenere sempre presente.
Sono regole conosciute a chi dipinge in quanto basate essenzialmente sulla conoscenza di alcune regole comportamentali dei colori e dei loro accostamenti.

---

Suddivisione dei colori

Colori Primari

I colori primari sono il rosso, il blu ed il giallo.
I colori primari non sono generati da nessun altro colore.
La mescolanza di tutti i colori primari tra loro da il nero (questo e’ da ricordare quando si parlera’ dei colori complementari).

Colori Secondari

I colori secondari sono frutto dell'associazione fra parti uguali di due colori primari.

I colori secondari sono quindi:

il verde (formatosi dall’associazione giallo + blu);
il viola (formatosi dall’associazione blu + rosso);
l’arancio (formatosi dall’associazione giallo + rosso).

Colori Complementari

Dalle precedenti suddivisioni si possono ottenere le coppie di colori complementari, ovvero le coppie composte da un PRIMARIO e dal SECONDARIO ottenuto dalla mescolanza degli altri due colori primari.

Ci puo’ aiutare a ricordare le combinazioni se esaminiamo il significato di complementare; difatti si dicono colori complementari in quanto, se mescolati con il primario del quale sono complementari, completano il colore primario ottenendo il nero.

Quindi le coppie dei colori complementari sono:

rosso e verde (rammentiamo che il verde e' dato dal giallo + blu);
giallo e viola (rammentiamo che il viola e' dato dal blu + rosso);
blu e arancio (rammentiamo che l'arancio e' dato dal giallo + rosso).

I colori complementari accostati al PRIMARIO al quale si riferiscono, danno il massimo del contrasto cromatico; sono quindi aggressivi e di difficile visualizzazione e lettura, creando anche un effetto tremolio all’occhio di chi li osserva.

Colori Caldi

I colori caldi sono: il Giallo, l’Arancio ed il Rosso (e le loro relative sfumature).

Colori Freddi

I colori freddi sono: il Blu, il Viola ed il Verde (e le loro relative sfumature).

Colori Terziari

I colori Terziari sono le sfumature dei colori SECONDARI.

Se tutto puo’ sembrare un po’ complicato, in realta’, con un minimo di esercizio e di attenzione, risultera’ meno fumoso di quanto ora si creda.

La figura qui di fianco riassume le classificazioni precedenti e puo’ essere un valido aiuto per ricordarle.

- Nel triangolo centrale vi sono raffigurati i colori PRIMARI.
- Nel cerchio i colori SECONDARI e loro sfumature (i cosiddetti colori TERZIARI).
- Sono contrassegnati con le frecce e gli asterischi le coppie di colori complementari.
- Divisi inoltre con una linea rossa i colori denominati comunemente caldi e freddi.

---

Leggibilita’

La precedente divisione dei colori ci aiuta ora a riconoscere quali sono le combinazioni di colori che risultano all’occhio piu’ o meno leggibili.

I colori complementari sono poco leggibili

I colori complementari sono poco leggibili, in quanto quando vengono accostati, essendo fra di loro in massimo contrasto, creano all'occhio un particolare effetto tremolio che rende difficilissima la messa a fuoco e affatica la vista, rendendo difficile la lettura.

I colori complementari meno leggibili sono:

testo verde su fondo rosso
testo blu su fondo fucsia
ma anche:
testo rosso su fondo verde
testo giallo su fondo viola
testo blu su fondo arancio


I colori complementari piu’ leggibili sono:

testo bianco su fondo nero
testo grigio su fondo nero
testo bianco su fondo blu
testo nero su fondo bianco
testo giallo su fondo nero
testo blu su fondo bianco

Psicologia dei colori

Attenzione anche alla psicologia dei colori.
Quando scegliete il colore per i vostri lavori ponete attenzione anche al simbolismo che essi hanno sia nella vostra psiche che il quella del visitatore (che ovviamente varia a seconda della cultura e dell'area geografica di dove si trova; ad esempio in Giappone il bianco e' il colore del lutto). Se si associano tra loro colori che simboleggiano concetti opposti potrete risultare poco convincenti o anche indecisi.

Qui di seguito si riportano alcune di queste:

Colore
Sensazioni positive
Sensazioni negative
Note

Rosso
Passione, energia, amore, forza, azione
Sangue, guerra, pericolo, aggressivita'
E' uno dei colori detti salienti, cioe' che sembrano avvicinarsi all'osservatore.

Verde
Natura, primavera, fertilita', denaro, tenacia, prontezza
Inesperienza, invidia
Usato come simbolo di via libera (es. semaforo); e' inteso come colore giovane.

Giallo
Sole, estate, oro, ottimismo, disponibilita', altruismo
Malattia, vigliaccheria, azzardo
Particolarmente visibile anche in situazioni limite (es. antinebbia).

Blu
Stabilita', calma, unita', soddisfazione, armonia, fedelta', cielo, mare
Depressione, conservatorismo
Usatissimo come colore aziendale date le sue caratteristiche positive.

Bianco
Neve, purezza, innocenza, pace
Freddo, ospedaliero, sterile

Grigio
Intelligenza, dignita', maturita'
Ombra, noia, depressione.

Nero
Potenza, formalita', profondita', stile
Cattiveria, timore, morte, anonimato.

Non usare troppi colori all'interno dello stesso layout

Evitare di usare sfondi con immagini troppo elaborate (salvo casi eccezionali) che diminuiscono drasticamente la leggibilita' e affaticano l'occhio

Preferire sempre la semplicita' all'esagerazione e all'estro. Non sempre stupire a tutti i costi paga!

Risoluzione video

Rammentarsi che non tutti gli utenti hanno la stessa nostra risoluzione video, per cui se basiamo effetti o quant'altro su particolari colori non e' detto che il visitatore riesca a vederli. Vi sono ancora utenti che hanno computer con settaggi video a 8 bit cioe' che visualizzano solo 256 colori. Per evitare questo problema esiste una gamma universale di 216 colori, i cosi' detti web save, leggibile da tutti i pc. Secondo lo standard Html non ci si sbaglia se si utilizzano i 16 colori base sicuramente letti da tutti i pc e browser.

---

Cosa sono i colori web safe

I computer piu' vecchi hanno schede video e monitor in grado di visualizzare correttamente soltanto 256 colori. Questi 256 colori vengono gestiti diversamente dalle piattafome PC e Mac; a causa di queste differenze rimangono soltanto 216 colori comuni.

Se vogliamo essere sicuri che i nostri lavori vengano visti perfettamente da qualsiasi utente (anche quelli che hanno computer con settaggi video a 8 bit, ovvero che visualizzano solo 256 colori), dobbiamo utilizzare per i nostri lavori solo i 216 colori riportati nella tabella qui sotto, detti appunto colori web safe.

Oggi, comunque, la stragrande maggioranza degli utenti ha computer che dispongono di una ampia quantita' di ram video e di monitor moderni che consentono di visualizzare ben piu' di 256 colori.

---

Sintesi addittiva e sottrattiva

Parlando di web, e' giusto considerare che i nostri lavori verranno nella maggior parte dei casi visualizzati su di un monitor e non letti su carta. Ci sono differenze fondamentali su come i vari media visualizzano i colori e vale la pena averne una minima conoscenza.

I monitor (e in generale molte delle apparecchiature elettroniche) usano la sintesi additiva RGB (Red - Green - Blue), al contrario tutte le stampanti e le pubblicazioni su carta usano la sintesi sottrattiva CMYK (Cyan - Magenta - Yellow - blacK).

Senza entrare troppo in argomenti tecnici, lo spazio colore (cosi' si chiama la gamma dei colori visualizzabili) dei monitor e' dato dalla combinazione di fasci di luce di colore differente (appunto rosso, verde e blu) che colpiscono l’occhio; quest’ultimo, quando viene raggiunto da una luce costituita da due o piu' componenti, non e' in grado di percepire separatamente le parti: ne elabora invece una sintesi globale, facendoci "vedere" un colore intermedio fra quelli iniziali.

Lo spazio colore degli stampati e' costruito invece tramite i pigmenti ciano, magenta, giallo (e nero), che si sovrappongono e si combinano assorbendo ognuno la componente di luce del colore complementare al proprio e riflettendo invece la componente che hanno in comune.

E’ interessante notare che, mentre nella sintesi additiva il colore ottenuto dalla combinazione di rosso, verde e blu e' il bianco, nella sintesi sottrattiva il colore risultante dalla somma di ciano, magenta e giallo e' il nero. La ragione e' che avendo ognuno dei colori primari della sintesi sottrattiva (ciano, magenta e giallo) il potere di assorbire una delle tre differenti parti della radiazione visibile, mescolandoli tutti e tre l'intero spettro visibile verra' assorbito e nessuna luce sara' riflessa verso l'osservatore.

E’ da notare inoltre che i colori CMYK risultano di solito meno brillanti di quelli RGB.

---

Testo

Possiamo dividere i font (caratteri) in 4 grandi famiglie:

Serif o graziati

I caratteri Serif o graziati come Garamond, Bookman Old Style, MS Serif, Book Antiqua, Times New Roman.
Questi sono caratterizzati da dei trattini (grazie o serif appunto) piu’ o meno elaborati in chiusura delle aste. Vengono di solito usati per dare uno stile elegante o un'effetto old style.

Sans-serif o bastoni

I caratteri Sans-serif o bastoni come Verdana, MS Sans Serif, Arial, Century Gothic, Arial Narrow, Arial Rounded MT Bold.
Questi sono privi di alcun fregio in chiusura delle aste. Di gran lunga i piu’ usati sul web, simboleggiano semplicita’ e informalita’ ma anche stabilita’ e modernita’. Per queste due ultime caratteristiche sono preferiti per i loghi delle aziende moderne.

Script o calligrafici

I caratteri Script o calligrafici simulano la scrittura a mano libera (corsiva) spesso inclinata e con lettere che tendono ad unirsi fra loro. Di non facile legibilita’.

Fantasia

I caratteri Fantasia comprendono tutti quei caratteri con particolari effetti o fregi che non possono essere catalogati nelle categorie qui sopra. Sono assolutamente sconsigliati per testi lunghi.

Altra suddivisione viene fatta relativamente alla spaziatura fra i caratteri:

Monospaced

I caratteri Monospaced come Courier, Courier New.
In questi, tutte le lettere hanno la stessa larghezza (ovvero sia lettere strette come la "i" che lettere larghe come la "o" occupano lo stesso spazio).

Non monospaced

I caratteri Non Monospaced dove ogni lettera ha una sua larghezza che dipende dalla forma della lettera stessa.

Leggibilita’

1) E' importante (soprattutto nello studio di loghi e testate per siti web) che la parte superiore del testo non sia coperta da effetti grafici e fregi (da alcuni studi risulta, infatti, che la parte superiore del carattere ci aiuti maggiormente a distinguere un carattere dall'altro).

2) E' meglio evitare titoli totalmente maiuscoli che risultano piu' monotoni e difficili da leggere, creando un rettangolo visivo sempre uguale (e' provato che leggiamo riconoscendo le parole nella loro interezza, non riassemblando le singole lettere).

3) L'italic e’ davvero poco leggibile e faticoso. Mai abusarne, ma soprattutto mai usarlo per enfatizzare un lungo testo (si otterrebbe l'effetto contrario).

4) Le righe di testo non devono essere ne' troppo lunghe ne' troppo corte. La lunghezza ottimale si aggira intorno ai 60/70 caratteri per riga, ma da 40 fino a 80 caratteri sono comunque accettabili (di piu' l'occhio fara' un grosso sforzo a seguire la riga fino in fondo senza 'perdersi'; di meno fara' invece uno sforzo eccessivo nel continuo 'andare a capo'.

5) L'interlinea non deve essere ne' troppo larga (creando difficolta' nel cercare la riga successiva quando l'occhio andra' 'a capo'), ne' troppo stretta (creando confusione fra i caratteri di due righe successive.

6) Ricordarsi che ogni sistema operativo ha i suoi font di sistema di default. Quindi se scegliamo un font particolare per un effetto particolare nel sito, non e' detto che il visitatore abbia quel font.

Tabella dei font di default di Windows

Serif
Garamond
Bookman Old Style
MS Serif
Book Antiqua
Times New Roman


Sans-serif
Verdana
MS Sans Serif
Arial
Century Gothic
Arial Narrow
Arial Rounded MT Bold


Monospaced
Courier
Courier New

Tabella dei font di default del MacOs

Serif
New York
Palatino
Times


Sans-serif
Monaco
Geneva
Helvetica
Chicago
Courier