CSS font-size e l’unità di misura rem

I CSS3 introducono una nuova unità di misura priva dei problemi di em e px.

Esistono vari modi di ridimensionare il testo di una pagina web tramite CSS: in pixel, em e in percentuale.

Tramite un post di Jonathan Snook ho scoperto l’esistenza di una nuova unità di misura introdotta con i CSS3, chiamata rem. Questa unità si comporta in maniera molto simile a em, senza ereditarne i punti deboli.

Continua a leggere CSS font-size e l’unità di misura rem »

Raccolta di font open-source per @font-face

Una collezione di link utili da cui scaricare font liberamente utilizzabili con @font-face.

Utilizzare font personalizzati sui propri siti web ormai non è più un’utopia: con il supporto ormai diffuso della proprietà @font-face è possibile in pochi passi personalizzare un progetto senza dover ricorrere ai classici Arial e Georgia.

Ricordando che è comunque fondamentale preservare la leggibilità, uno dei punti critici è l’utilizzo di font protetti da copyright: non è infatti possibile pubblicarli su una pagina web se sono tutelati dal diritto d’autore. Per questo motivo le soluzioni possibili sono utilizzare servizi esterni come Typekit, oppure scegliere font open-source che non presentano alcun problema legale.

Se optate per la seconda ipotesi, questa raccolta di web font liberamente utilizzabili potrebbe tornarvi utile:

  • The league of Moveable Type: una collezione appena nata di font open-source disegnati in maniera specifica per l’utilizzo su web con @font-face.
  • Font Squirrel: una delle migliori raccolte attualmente disponibili. Sul sito sono presenti anche diversi strumenti utili per includere font nei propri progetti.
  • Google Font Directory: Google mette a disposizione una buona raccolta di font, che è possibile includere sui propri siti direttamente dai server di Mountain View. Sono presenti comunque anche i link per il download.
  • Webfonts Wiki: offre un elenco abbastanza dettagliato di font utilizzabili con vari tipi di licenze come OpenFont, GNU, CC oppure open-source.
  • Fonthead: una discreta collezione di font gratuiti ed a pagamento.
  • Ten by twenty: tutti i font gratuiti di questo sito sono espressamente utilizzabili con @font-face; quelli a pagamento no.
  • Dafont: una delle più ampie collezioni di font gratuiti. Potete utilizzarli con @font-face, ma fate sempre attenzione ad eventuali clausole prima del download

Come utilizzare @font-face?

Avete trovato il font che fa per voi ma non sapete come includerlo sul vostro sito? Se la semplice guida che ho pubblicato vi risulta ancora troppo complessa, troverete fantastico il @font-face generator di Font Squirrel: dovrete solo caricare il font desiderato ed avrete immediatamente un kit pronto all’uso con tutti i file necessari.

Personalizzare i font con Typekit

Poche righe di JavaScript sono sufficienti per personalizzare il proprio sito usando font alternativi.

Da diverso tempo sto sperimentando l’uso di Typekit, un servizio che permette di utilizzare font diversi dai soliti noti (Arial, Verdana, Georgia…) in modo compatibile con tutti i principali browser. Il funzionamento è semplice e si basa su font-face e JavaScript, eliminando il problema relativo ai copyright dei font che sono interamente ospitati sui server di Typekit.

I risultati del test

Sono molto soddisfatto dei risultati ottenuti sul mio blog personale, dove sto effettuando le prove. La configurazione è semplice, e l’account trial gratuito permette di fare test senza problemi, mettendo a disposizione più di un centinaio di font (sono oltre 400 negli account a pagamento). La libreria disponibile tra l’altro cresce nel tempo, perché ne vengono progressivamente aggiunti sempre di nuovi.

Quali sono i possibili svantaggi da considerare? Sicuramente il peso della pagina, che a seconda del font scelto cambia notevolmente. Utilizzando il font Droid Serif, nelle sue forme Regular e Italic, ho una pagina che pesa ben 79kb in più del normale. Le cose potrebbero cambiare senza usare il corsivo, ma è necessario comunque fare attenzione a dettagli come questo. Il peso dei font aggiuntivi è comunque sempre visibile nel pannello di amministrazione di Typekit, non è quindi un dettaglio nascosto, da calcolare autonomamente.

Prima di scegliere un font inoltre è bene verificarne l’aspetto sui vari browser: non sempre il rendering è ottimale, soprattutto su Internet Explorer.

Questi però non sono problemi relativi a Typekit, ma fattori da considerare quando si usano font alternativi. L’unico limite del servizio, con l’account trial, è l’inserimento di un piccolo badge in basso a destra sul sito, e la banda mensile di 5Gb per i font.

Scegliere Typekit o usare i CSS?

L’alternativa CSS-only è sempre praticabile: ne avevo parlato nel 2008 quando solo Safari supportava certe proprietà e adesso potrebbe essere la soluzione ideale. Il problema però è l’esistenza di un copyright su quasi tutti i font, spesso anche quelli gratuiti, che non sempre possono essere utilizzati liberamente.

Un altro limite della soluzione autonoma è dato dalle solite differenze tra browser. Firefox supporta Web Open Font Format e TrueType, Safari e Chrome supportano solo TrueType, Explorer supporta EOT, mentre Safari Mobile (iPhone e iPad) usano SVG. Un grande caos, che obbliga lo sviluppatore a includere un font in tutti questi formati per avere risultati coerenti.

Per questo motivo soluzioni come Typekit sono l’ideale: certo, c’è da considerare una minima spesa aggiuntiva se non si vuole usare l’account gratuito con i relativi limiti, ma i vantaggi esistono.

Ci sono anche altre soluzioni alternative, come Typotheque (che concede licenze anche per la stampa) e Kernest, ma non le ho provate personalmente. Ve le segnalo se siete interessati a sperimentare, in attesa di altri servizi come Fontdeck.

Grunge: nuovo stile per il Web Design

Dopo la grafica Web 2.0, attira molte attenzioni il grunge style. Uno sguardo alla nuova tendenza con esempi e download.

Senza ombra di dubbio lo stile Web 2.0 è stato uno dei più seguiti ed utilizzati degli ultimi tempi. Riflessi, colori accesi, badge e quant’altro stanno ancora imperversando in rete, ma nuovi stili cercano di emergere per differenziarsi dalla massa.

Proprio tra questi c’è il Grunge style: il termine è difficilmente traducibile, ma è possibile riconoscerlo facilmente.

Cos’è lo stile Grunge

E’ caratterizzato da un look sporco, con irregolarità nelle illustrazioni e negli elementi che compongono le pagine. Spesso i colori sono scuri, ma ci sono anche delle eccezioni. In realtà non nasce oggi, ma diversi siti lo utilizzano già da tempo: basti pensare che questo post di Jason Santa Maria è del 2004.

Per un web designer, nonostante l’apparenza disordinata questo stile implica molto più lavoro ed attenzione ai dettagli. Servono ottime doti di fotoritocco e soprattutto equilibrio per non esagerare e rendere un sito caotico.

L’irregolarità va bene, ma non deve diventare un problema per l’utente: il primo obiettivo deve sempre essere una facile lettura ed una navigazione intuitiva.

Proprio questa difficoltà probabilmente impedirà allo stile grunge di diventare una vera e propria tendenza. Niente comunque vi impedisce di usarlo per ottenere un risultato originale e differente dagli altri.

Galleria Grunge

Ecco alcuni esempi. Cliccate sugli screenshot per andare ai siti relativi.

Matt Brett Darklight JUXT Interactive Bart-Jan Verhoef nYq Design Studio CSS Rockstars

Download e Risorse esterne

Senza dubbio uno dei punti fondamentali per questo stile è l’attenzione alla tipografia: da non perdere questa collezione di 63 font gratuiti in stile grunge.

Un’ottima guida, anche questa risalente a diverso tempo fa, è quella di Cameron Moll. Divisa in quattro parti, spiega anche come sfruttare al meglio Photoshop.

Immancabile la segnalazione di Smashing Magazine, che ha dedicato ben 2 articoli allo stile Grunge:

Infine se siete alla ricerca di altre icone, texture ed elementi grafici, vi segnalo questo sito.