Il post in cui parlo di una delle mie fisse da typonerd

Ho passato l’ultima settimana cercando il font perfetto per questo blog (e ancora non ne sono completamente convinto). Mi considero tra quelli che pensano che alcuni font gratuiti non abbiano nulla da invidiare a quelli più famosi e costosi, basta darsi la pazienza di cercare senza accontentarsi dei soliti noti.

Per i titoli ho scelto Montserrat, che ha alcuni tratti in comune con Gotham (il font di Obama) e che da un po’ di tempo sto usando con piacere in alcuni progetti. I paragrafi invece sono stati il mio cruccio fin da subito.

Foundation usa di default Open Sans e per un certo tempo ho utilizzato quello ma è banale ed ha stufato. Tra i sans serif ultimamente i miei preferiti sono Lato, Muli, Source Sans Pro e PT Sans ma nessuno di questi sembrava adatto a questo blog (Muli l’ho tenuto per qualche giorno, ma la leggibilità lasciava a desiderare). Così ho cambiato completamente prospettiva e sono approdato a Merriweather che per il momento sembra funzionare.

Mentre cercavo, un altro tarlo ha cominciato a farsi strada: quello dei font monospace per gli editor di testo (ma quale plurale, c’è solo un editor: Sublime). Come tanti, per anni ho usato il font di default senza mai riflettere sul fatto che almeno metà del mio tempo (lavorativamente parlando) la passo davanti a un editor, perchè non mettere la stessa cura e lo stesso impegno che ho per un sito web anche per il principale strumento del mio lavoro? Così tempo fa è cominciato un pellegrinaggio che è passato per Monaco, Meslo, Anonymous Pro e si è concluso questa settimana con Inconsolata, che sto apprezzando molto.

Inconsolata

Per gli interessati, su Slant trovate screenshot e link per il download di vari font.

La ricerca continua e potete contribuire nei commenti 😉

Non che serva a qualcosa, ma è un buon esercizio

Nell’header ho scritto “italian web designer” ma poi raramente scrivo qui di web & design. Il perchè è presto detto: fare un post tecnico richiede tempo, tanta voglia e la probabilità di risultare banali è piuttosto elevata; per cui il più delle volte tendo a rinunciare e piuttosto preferisco condividere i link che leggo e che mi interessano. (A proposito, dopo le recenti modifiche a google reader li trovate tutti a questo indirizzo)

Stavolta è diverso perchè ho apportato qualche modifica al blog e penso che potrebbe interessare quello che ho fatto e come l’ho fatto. Ho utilizzato delle funzionalità dello standard CSS3 chiamate media queries per modificare l’aspetto del blog in base alla risoluzione. Per semplicità ho deciso che tutti i device con una risoluzione minore di 1024px avrebbero visto la seconda versione, più amichevole per ipad, smartphone etc etc.

Fare lo stesso è molto semplice, nel vostro css aggiungete:

@media screen and (max-width: 1024px) {
/** qui vanno messi i
selettori di cui volete 
cambiare attributi e proprietà */
}

Potete sbirciare il css di questo blog per saperne di più.
NB: L’ho fatto in pochi minuti e non è esente da imperfezioni, scorciatoie e scelte stilistiche discutibili, ma l’effetto che fa su uno smartphone non è niente male. Potete vedere il risultato anche semplicemente ridimensionando la finestra del vostro browser preferito.

Questa attenzione ai diversi device con cui viene visualizzato un sito è detta Responsive Web Design. Se ancora non avete familiarità con questo tipo di tecnica, un buon modo per saperne di più è fare un giro su smashing magazine:

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/