Si stava così bene quando c’erano quella ventina di font web safe da utilizzare che non creavano problemi di compatibilità, ma soprattutto non creavano problemi alla lettura.
E ora? Ci sono ancora per fortuna, ma pare che molti web designer si siano fatti ingolosire da Google Font e dal plugin Cufon.js, e si siano dimenticati che l’utente deve riuscire a leggere i contenuti.
Per chi non sapesse di cosa sto parlando, di Google Font si è già discusso in questo blog, mentre per Cufon, ti invito a leggere questo articolo di HTML.it.
Con questo articolo non voglio parlare di questi 2 strumenti, che sono presenti già da qualche tempo, ma sul loro utilizzo, specialmente ora che in Google Font la scelta dei caratteri è davvero ampia.
I font non web safe vanno utilizzati esclusivamente per i titoli delle sezioni, o per gli elementi dei menu. Punto! Stop! Non utilizzarli assolutamente per i testi del sito: renderersti la lettura difficile e il caricamento delle pagine estremamente lento.
Sembrerà banale questo articolo, ma ho visto diversi web designer abusare di questa tecnica con risultati pessimi, e quindi ho voluto puntualizzare questo aspetto.
Ecco invece qualche esempio di utilizzo corretto di Cufon.
Press75.com
In Press75 si è utilizzato cufon per il menu, i titoli delle sezioni e per i quattro link sotto le sezioni. Come puoi vedere per il testo si è utilizzato un font web safe (Helvetica Neue).
International Rugby Association
Anche in questo caso si è utilizzato cufon per il menu, la tagline e il testo subito sotto la tagline. Per il contenuto si è utilizzato un font web safe (Lucida Sans).
Meinl Percussion
In Meinl Percussion si è utilizzato cufon per il menu, i titoli degli articoli e nelle date, oltre che nella scritta “Latest tweets”. Il contenuto come al solito utilizza un font web safe (Arial).
Questi sono solo tre dei 40 siti raccolti da Spyre Studios, dove vengono mostrati utilizzi creativi di Cufon, e nessuno di questi va a incidere sui contenuti.
Quindi cari Web Designer presenti e futuri, solo font web safe per i contenuti!
22 febbraio 2011 at 18:02
Terrò a mente, non vorrei mai che il mio sito non sia leggibile
22 febbraio 2011 at 22:02
23 febbraio 2011 at 22:48
In realtà c’è anche un problema di rendering non solo di lettura. Molti siti che utilizzano Cufon hanno problemi con caratteri non UTF-8 oppure con simboli o ideogrammi.
Il rendering del cufon funziona con un principio molto semplice, si sostituisce un’immagine ad ogni lettera o gruppo di lettere. Capite bene che per un testo lungo il peso della pagina da DOM e il peso della pagina renderizzata sono molto discordanti.
La leggibilità quindi è un problema minore rispetto al rendering e al consumo di risorse non presenti in pagina ma create al volo
23 febbraio 2011 at 22:51
Ah altra cosa, il Cufon non renderizza cose del tipo text-decoration etc….
26 febbraio 2011 at 09:11
Se parliamo di Cufon, sono perfettamente d’accordo sul fatto che non vada utilizzato nei contenuti; ma con i Google Font (o, più genericamente, con un font incluso con @font-face) secondo me non ci sono problemi prestazionali legati al rendering della pagina.
26 febbraio 2011 at 15:11
X Giovanni… si parlavo di Cùfon io non lo utilizzerei nemmeno sui titoli o voci di menu.
27 febbraio 2011 at 23:27
@Matteo
Ti ringrazio per le precisazioni. Quindi tu non utilizzeresti mai Cufon?
@Giovanni
Perfettamente d’accordo. Con Google Font non ci sono problemi di prestazione, ma potenzialmente di leggibilità dei testi se non utilizzato con criterio
1 marzo 2011 at 04:09
@fedeweb Devo ammettere però che Internet Explorer a volte non effettua l’hinting…
2 marzo 2011 at 19:07
Si io non utilizzerei mai cufon anche perché se proprio dovete fare una cosa stilosa fate un’immagine o uno script ad hoc che crea le immagini dato un testo.
Cmq problemi di rendering ce ne sono e come…. provate una pagina che ha tante chiamate asincrone magari non senza l’utilizzo di cache e tanti elementi creati dinamicamente, il cùfon non ha tempo di creare le immagini che servono per comporre la scritta. Per esperienza (anche su portali con 100 accessi simultanei ) escludo cufon a priori perché ci sono alternative più che valide.
4 marzo 2011 at 18:54
@Giovanni
Si vero, parli di Google Font giusto?
@matteo
Ti ringrazio molto per le ulteriori spiegazioni: di quali alternative parli in particolare?
4 marzo 2011 at 19:35
Fede… guarda che sono Matteo il tuo ex compagno di Università…….
Le alternative sono: usare direttamente immagini con ALT appropriati (soluzione sempre SEO friendly), oppure usare i font normali. Sia con Cufon sia conGoogle Font si riscontrano dei cali di prestazione, non guardate al piccolo sito dove non ci sono problemi evidenti, pensate a delle pagine con molto dinamicità al loro interno.
Anche dell’uso sconsiderato di jquery o javascript in generale ci sarebbe da aprire un post
Google Font può essere usato ma secondo me non aggiunge nulla alla bellezza o al potere comunicativo di un sito.
7 marzo 2011 at 17:14
Ciao Matteo! potevi dirlo prima!
Comunque ti ringrazio molto per le tue spiegazioni! Dai ci sentiamo presto con gmail che ora ho le ultimissime cose da sistemare per la laurea!