font, typography

Font pairing – scegliere il miglior abbinamento tra caratteri (e font)


Molte volte è proprio l’accostamento tra i caratteri a segnare la personalità di un prodotto grafico e se volete migliorare l’aspetto e l’uso delle vostre pagine web, quello tipografico si rivela fondamentale, basta pensare i vostri contenuti vengono letti dagli utenti, quindi quale migliore tecnica grafica se non il migliorare l’aspetto e la leggibilità del vostro sito?

Come ho già scritto in un altro post: Presentazioni sui web font, i dettagli sulla tipografia on-line oramai sono importanti e gestibili come nell’editoria. Non proprio come in un software DTP ma negli ultimi tempi le cose si sono (e si stanno evolvendo sempre meglio).

Volete un esempio? Non ci facciamo caso, ma leggere un libro non ci costa fatica, se è il testo è gradevole, invece notiamo di più un libro “illeggibile” più di uno bello, quello che è nascosto nel libro leggibile è proprio il dettaglio del carattere che stiamo leggendo. Ogni particolare del carattere può sembrare banale al lettore; ma c’è da notare che molte volte il font che è nei nostri libri ha minimo qualche decennio di storia, per non parlare di alcuni che hanno raggiunto i nostri occhi attraversando tranquillamente un secolo. Il web e nel particolare i siti sono molto più recenti di molti caratteri classici e comuni (e per comuni intendo font che sono, sì utilizzabili per il testo e la sua lettura, ma sono diventati famosi per il loro utilizzo). Da come si stanno evolvendo servizi e tecnologie on-line, anche l’aspetto invisibile della tipografia sta migliorando e tiene il passo con strumenti utili e ben più consolidati, come la carta stampata.

Oggi l’aspetto e le caratteristiche tipografiche possono essere sfruttate meglio, e giocare sugli abbinamenti e accostamenti tra i caratteri può far distinguere le pagine del vostro sito.

Per poterlo fare le tecnologie web e gli strumenti attuali sono tanti, uno tra tutti (ed è anche il mio servizio preferito) è quello dei web font di Google.

È semplice e pratico, in pratica si tratta di inserire piccole parti di codice nell’HTML e nel vostro foglio di stile (CSS), e potrete così utilizzare di una notevole quantità di caratteri in modo gratuito. Per maggiori dettagli sul questa tecnica potete leggere: Utilizzare i web-font di Google su Blogger. È descritta sia la tecnica di embedding, che l’utilizzo all’interno del servizio di blogger.

Per concludere una ottima e pratica guida su come scegliere e abbinare font, un documento di Andrea Cevenini

http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf

Se avete domande al riguardo, sono pronto a parlarne.

Standard
font, typography, webdesign

Presentazioni sui web font


Una rassegna di presentazioni sulla tipografia sul web, web font e specifiche CSS @font-face.

La prima tratta le specifiche CSS della dichiarazione @font-face, e delle varianti che ogni browser richiede per soddisfarla, le diverse tipologie di font:

  • OTF OpenType Font
  • TTF True Type Font
  • EOT Embedded Open type
  • WOFF Web Open Font Format
  • SVG Scalable Vector Format

E anche tutti i relativi problemi di licenza su questi font.

altre presentazioni, dopo il salto ->

Continua a leggere

Standard
font, typography, webdesign

Utilizzare i web-font di Google su Blogger


Anche se questa di WordPress non è la sede più adatta 🙂 voglio descrivere come si possono integrare i web font di google sulla su piattaforma di Blogger.

Aggiornamento 29-06-2011

È stato aggiornata la sezione Google Fonts alla versione 2

Intanto vi consiglio questo bookmarklet che individua i web font inseriti in una pagina web. Ad esempio potete andare su minimu.it e vederlo in funzione

Consigli per come utilizzare i Web Font di Google su Blogger

In questa directory di Google trovate tutti i font che è possibile utilizzare per modificare l’aspetto tipografico sul vostro Blog.

Il procedimento per utilizzare i web font è molto semplice e le indicazioni si basano tutte su 2 componenti CSS:

  1. il link al web font di Google
  2. il nome del font da usare nelle dichiarazioni del foglio di stile

Partendo dalla pagina principale Google WebFont potete scegliete un font che vi piace dalla lunga lista.

Cliccandoci sopra (e come viene indicato a rollover), entrate nella la scheda del font, questa ha più sottovoci, la prima ad esempio indica le specifiche del font scelto, la voce che serve è l’ultima, ed è ben evidenziata: Use this font

L’articolo prosegue ->

Continua a leggere

Standard