Fw

Wordpress Creative Developer

Google Font e Cufon.js: Come Utilizzarli al Meglio

  • Font
  • -

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.

Google Font e Cufon.js - Come Utilizzarli al Meglio

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

Utilizzo corretto di cufon

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

Utilizzo corretto di cufon

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

Utilizzo corretto di Cufon

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!

 

15 Commenti

  1. Terrò a mente, non vorrei mai che il mio sito non sia leggibile 😀

  2. 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 😉

  3. Ah altra cosa, il Cufon non renderizza cose del tipo text-decoration etc…. 😉

  4. 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.

  5. X Giovanni… si parlavo di Cùfon io non lo utilizzerei nemmeno sui titoli o voci di menu.

  6. @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 😉

  7. @fedeweb Devo ammettere però che Internet Explorer a volte non effettua l’hinting…

  8. 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.

  9. @Giovanni
    Si vero, parli di Google Font giusto?

    @matteo
    Ti ringrazio molto per le ulteriori spiegazioni: di quali alternative parli in particolare?

  10. 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.

  11. 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!

  12. […] Lo ritengo uno strumento estremamente utile, specialmente per quanto riguarda i font non safe. […]

  13. […] link: Google Font e Cufon.js: Come Utilizzarli al Meglio | Fedeweb Tags: […]

  14. Cufon uguale disastro, ho perso una giornata per capire che Cufon era la causa della sparizione di tutte le vocali accentate, apostrofi ecc ecc…..

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *