Grafica e tipografia: font decorativi, calligrafici e dingbats

Nella scorsa lezione ci siamo fermati ad analizzare le differenze tra un font serif e un font sans-serif. Questa settimana parleremo di font più particolari: calligrafici, decorativi, dingbats. Questo tipo di font è utile per dare un taglio volutamente singolare al layout ma, com’è ovvio, va usato con moderazione.

Iniziamo?

Font monospazio

Generalmente i font sono proporzionali, ovvero ogni carattere occupa uno spazio varabile, sulla base della larghezza del carattere stesso. Nei font proporzionali alcune lettere sono meno ingombranti di altre, per esempio la lettera r e la i posseggono uno spessore decisamente diverso da quello della lettera o, e cosi via. Nei font monospazio, invece, ogni carattere ha una larghezza fissa, indipendentemente dalla reale dimensione delle lettere.

monospazio

Fig. 01 – Font monospazio

In realtà questo tipo di font non costituisce per noi un grande interesse: difficili da leggere, poco accattivanti e ancor meno comunicativi, i font monospazio da tempo rivestono un ruolo che ha poco a che vedere con la grafica.

Chi si occupa anche dello sviluppo del codice, avrà comunque modo di confrontarsi con questo tipo di font, anche se non in ambito di progettazione grafica: la maggior parte degli editor utilizza infatti font monospazio per la composizione del markup.

Font calligrafici

I font calligrafici sono – come suggerisce il nome stesso – font che simulano la scrittura a mano. I font calligrafici possono rivelarsi molto eleganti e formali (prova a pensare a una partecipazione di nozze, con i nomi degli sposi impressi in un elegante calligrafico argentato) o estrosi e originali, come nel caso dei font “sketch”, ricavati dagli schizzi a matita dei designer.

calligrafici

Fig. 02 – Due font calligrafici che offrono un risultato estetico diametralmente opposto: il font del primo esempio è sofisticato, di classe. Il secondo è giocoso e spontaneo.

Ovviamente la natura eclettica di questi font li rende veramente poco leggibili. Per questo occorre utilizzarli a piccole dosi: vanno bene per dare un tocco creativo al layout, per un’intestazione o uno slogan molto breve, ma sono assolutamente da evitare nei paragrafi.

Il consiglio
La maggior parte dei font calligrafici appare un po’ troppo condensato: per migliorare la leggibilità aumenta leggermente la spaziatura tra le lettere in modo da rendere più nitida ogni parola. Ed evita font calligrafici troppo “svolazzanti”: i font eccessivamente leziosi sono spesso fuori luogo, soprattutto sul web.

Font decorativi

I font decorativi rappresentano il 70% dei font disponibili in rete. Si tratta di font dai contorni irregolari o dal taglio volutamente eccentrico, con lettere arricciate, asimmetriche o arricchite da disegni e fantasie.

Nonostante si possa pensare che questo tipo di font sia poco professionale e difficilmente utilizzabile in un progetto di web design che si rispetti, non è cosi: con un tocco di fantasia e di senso estetico si possano ottenere effetti grafici particolarmente interessanti.

In realtà se ci guardiamo intorno è facile notare che moltissimi siti web fanno uso nelle loro intestazioni – o per enfatizzare alcune sezioni del layout – font decorativi capaci di una forte valenza estetica o comunicativa.

Un font gioco e stravagante nel sito del ristorante Smiling Moose di Deli

Un font gioco e stravagante nel sito del ristorante Smiling Moose di Deli

Un altro font molto particolare nel sito Among the Sleep

Un altro font molto particolare nel sito Among the Sleep

lonely

Il sito Lonely Stock games utilizza un font morbido e infantile

Lavorare con i dingbats

E’ giusto infine spendere due parole per i dingbats, ovvero per i font composti da simboli e illustrazioni. I dingbats non hanno lettere e numeri ma una serie di pittogrammi che, a seconda del font, possono includere motivi floreali, caricature, simboli astratti, icone e cosi via.

Generalmente questo tipo di font viene integrato nel layout al momento della progettazione grafica, come se fosse un pennello di photoshop o un qualsiasi elemento grafico da esportare come immagine al momento della messa in codice.

Un esempio di questo è il classico “swirl”, ovvero un ricciolo ornamentale utilizzato spesso come separatore grafico o per dare un tocco di eleganza alla pagina.

Il sito Steinway ha un layout molto essenziale ed elegante. Gli swirl che incorniciano lo slogan aggiungono un dettaglio esclusivo alla pagina.

Dingbat ornamentale nel sito steinway.com

Dingbat ornamentale nel sito steinway.com

Troviamo un altro esempio di swirl nel sito di gioielli Eclectique Designs:

Swirl nel sito eclectiquedesign.com

Swirl nel sito eclectiquedesign.com

Il sito Team Fanny Pack invece utilizza un dingbat molto particolare (il simpaticissimo Freaky Face, per l’esattezza) per realizzare delle vignette in stile cartoons:

Dingbat fumettistico nel sito Team Fanny Pack

Dingbat fumettistico nel sito Team Fanny Pack

Dingbat fumettistico nel sito Team Fanny Pack

Oltre a questo è possibile integrare i dingbat come veri e propri font all’interno della nostra pagina web, utilizzando per esempio le specifiche della proprietà font-face.

E’ il caso dei bellissimi banner animati creati da Tympanus.net: le icone inserite all’interno dei banner non sono immagini, ma fanno parte di un font creato dallo studio Just Be Nice

Font con icone in banner animati

Font con icone in banner animati

Questa soluzione presenta vantaggi abbastanza ovvi, poiché ci permette di gestire le icone senza dover esportare e importare immagini grafiche, dandoci inoltre la possibilità di cambiare colore e dimensione di ogni icona agendo direttamente sui fogli di stile, come faremmo per un qualsiasi altro elemento testuale della pagina.

Conclusioni

In questo articolo abbiamo visto come sperimentare e dare un’impronta originale ad un sito web utilizzando font più estrosi e come è possibile utilizzare i dingbats come veri e propri elementi grafici di un layout. Nel prossimo articolo parleremo di spaziature, interlinee, allineamenti…ovvero di come dare armonia ed equilibrio alla tipografia di un sito.

A presto!

Indice del corso

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »

L'autore

Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

16 commenti

  1. Buothz
  2. Marco
  3. alessio
  4. Francesco
  5. Dr4k3
  6. Andrews1080
  7. Andrews1080
  8. Ornelius
  9. Ornelius

Trackback e pingback

  1. Corso di grafica: tipografia sul web, come comunicare con i font? | Your Inspiration Web
    [...] Font decorativi, calligrafici e dingbats [...]
  2. Grafica web e psicologia del colore: come i colori comunicano con l’inconscio | Your Inspiration Web
    [...] Font decorativi, calligrafici e dingbats [...]
  3. Grafica web: dalla carta al web, i diversi modi di concepire la grafica | Your Inspiration Web
    [...] Font decorativi, calligrafici e dingbats [...]

Lascia un Commento

Current day month ye@r *