Hakai Magazine e National Geographic Magazine
Hakai Magazine è un sito web canadese, in lingua inglese, che si occupa di “scienza costiera e società”. Ha una bella impaginazione, molto spazio bianco, niente pubblicità invasiva, uso accurato dei tag, eccetera. Gli articoli sono impaginati in Adobe Garamond, caricati dal sito di Typekit.
Dallo stesso sito viene preso il Nimbus Sans che si usa per i titoli, un normale senza grazie svizzero col punto sulla i quadrato che passa pressoché inosservato.
Da notare l’effetto ordinato che si ottiene con quel Garamond a 18px, circondato da un buon 25% di spazio bianco a destra e un altro 25% sinistra. Il testo è allineato solo a sinistra. A tutto questo si aggiungono due tocchi di stile: un 1.6em di interlinea fissa (senza il quale lo spazio tra una riga e l’altra sarebbe eccessivo) e 0.03em di spazio tra le lettere, che rende il testo molto meno pesante, più arioso.
Il nome dell’autore dell’articolo viene scritto centrato all’inizio, 22.5px, seguito una riga più piccola in grigio: la data (mese spazio giorno virgola spazio anno), il conteggio delle parole e il tempo stimato di lettura.
Questa informazione si può trovare direttamente in home page, sotto il titolo di ogni articolo, così il lettore già sa il tempo che impiegherà a leggerlo tutto. Più o meno calcola 200 parole al minuto, e arrotonda il conteggio delle parole alle decine.
Un altro sito web che si occupa spesso di notizie scientifiche, quello del celebre National Geographic, porta avanti un discorso simile, dal punto di vista grafico, ma sviluppandolo in maniera diversa (questo dettaglio del tempo di lettura però non lo prende in considerazione).
Anche qui si conta su un serif per il testo, circondato da tanto spazio bianco. L’articolo è sempre allineato solo a sinistra, ma non centrato rispetto alla pagina: la larghezza è più o meno la stessa, ma lo spazio bianco a sinistra è poco, quello a destra è tanto.
Il font utilizzato qui è il Georgia, un font comune che può essere tranquillamente caricato dal computer del visitatore anziché da un server centrale (in mancanza, il sito richiede il serif di default).
Qui si specifica anche il colore: #333, un grigio scuro.
La dimensione è 19px, lo spazio tra le lettere 1.632 (chissà perché tutti questi decimali).
In pratica qui lo spazio tra le righe è aumentato rispetto a quello che sarebbe altrimenti con questo font (si ottiene comunque una bella quantità spazio bianco nel testo). Lo spazio tra una lettera e l’altra influisce, ma di meno.
Il nome dell’autore dell’articolo è scritto in un sans che mi ricorda il Futura (lettere appuntite e M trapezoidale. Ma qui la a è a due piani...), che il browser presenta col nome di GeoBrandBold, scaricato dal server della Society: fonts.ngeo.com.
C’è qualche diavoleria strana in azione, per cui Firefox non riesce a visualizzare l’anteprima personalizzabile nell’apposita finestra.
Strane le alternative fornite nel codice: se il GeoBrandBold fosse in accessibile, si cercherebbe, nell’ordine: il CenturyGothic, l’Apple Gothic, il Gill Sans o Gill Sans Mt, prima di passare al sans di default.
Da notare che questo stesso sans geometrico viene scelto per visualizzare anche le prime tre parole dell’articolo, scritte tutte in maiuscolo grassetto così come nome dell’autore del pezzo e nome del fotografo.
In questi tre casi notiamo però un’impostazione diversa: 3px di spazio tra una lettera e l’altra. Insomma, le parole sono in evidenza, ma allo stesso tempo si evita di scurire troppo la pagina.
Per quanto riguarda il titolo dell’articolo, è in un GeoEditBold. Il copytight risulta della Klim Type Foundry.
Come si fa a non far comparire l’anteprima nella scheda di ispezione di Firefox? Questa è strana: di solito sotto il nome del file si trova l’indirizzo a cui lo è andato a pescare. Anche in questo caso funziona così, solo che rivolgendosi a quell’indirizzo il server risponde che non trova nessun file (“File not found”). Eppure per visualizzarlo nella pagina il browser lo trova.
Un ottimo trucco per non farsi rubare i caratteri, ancora non troppo diffuso, a quanto pare. Ma se uno volesse applicarlo sul proprio sito per nascondere meglio i propri font, come dovrebbe fare?
In effetti nel codice c’è qualcosa di strano: nell’html della pagina stessa ci sono tante istruzioni di @font-face, ma nessun riferimento al GeoBrandBold. Per giunta alcuni file elencati lì sono stati tolti dal server (tipo i ttf).
Ok. Ma allora chi chiama questo GeoBrand?
Non si sa. Bisognerebbe studiare il codice, cosa niente affatto semplice, tenuto conto che è un labirinto di file e di regole (decine? Centinaia? Migliaia?) che ne basterebbe una piccola parte per far funzionare decentemente il sito, immagino.
Comunque nella pagina dovrebbe comparire anche un Bumstead Regular, sans dai tratti svasati, che però non riesco a vedere.
Dallo stesso sito viene preso il Nimbus Sans che si usa per i titoli, un normale senza grazie svizzero col punto sulla i quadrato che passa pressoché inosservato.
Da notare l’effetto ordinato che si ottiene con quel Garamond a 18px, circondato da un buon 25% di spazio bianco a destra e un altro 25% sinistra. Il testo è allineato solo a sinistra. A tutto questo si aggiungono due tocchi di stile: un 1.6em di interlinea fissa (senza il quale lo spazio tra una riga e l’altra sarebbe eccessivo) e 0.03em di spazio tra le lettere, che rende il testo molto meno pesante, più arioso.
Il nome dell’autore dell’articolo viene scritto centrato all’inizio, 22.5px, seguito una riga più piccola in grigio: la data (mese spazio giorno virgola spazio anno), il conteggio delle parole e il tempo stimato di lettura.
Questa informazione si può trovare direttamente in home page, sotto il titolo di ogni articolo, così il lettore già sa il tempo che impiegherà a leggerlo tutto. Più o meno calcola 200 parole al minuto, e arrotonda il conteggio delle parole alle decine.
Un altro sito web che si occupa spesso di notizie scientifiche, quello del celebre National Geographic, porta avanti un discorso simile, dal punto di vista grafico, ma sviluppandolo in maniera diversa (questo dettaglio del tempo di lettura però non lo prende in considerazione).
Anche qui si conta su un serif per il testo, circondato da tanto spazio bianco. L’articolo è sempre allineato solo a sinistra, ma non centrato rispetto alla pagina: la larghezza è più o meno la stessa, ma lo spazio bianco a sinistra è poco, quello a destra è tanto.
Il font utilizzato qui è il Georgia, un font comune che può essere tranquillamente caricato dal computer del visitatore anziché da un server centrale (in mancanza, il sito richiede il serif di default).
Qui si specifica anche il colore: #333, un grigio scuro.
La dimensione è 19px, lo spazio tra le lettere 1.632 (chissà perché tutti questi decimali).
In pratica qui lo spazio tra le righe è aumentato rispetto a quello che sarebbe altrimenti con questo font (si ottiene comunque una bella quantità spazio bianco nel testo). Lo spazio tra una lettera e l’altra influisce, ma di meno.
Il nome dell’autore dell’articolo è scritto in un sans che mi ricorda il Futura (lettere appuntite e M trapezoidale. Ma qui la a è a due piani...), che il browser presenta col nome di GeoBrandBold, scaricato dal server della Society: fonts.ngeo.com.
C’è qualche diavoleria strana in azione, per cui Firefox non riesce a visualizzare l’anteprima personalizzabile nell’apposita finestra.
Strane le alternative fornite nel codice: se il GeoBrandBold fosse in accessibile, si cercherebbe, nell’ordine: il CenturyGothic, l’Apple Gothic, il Gill Sans o Gill Sans Mt, prima di passare al sans di default.
Da notare che questo stesso sans geometrico viene scelto per visualizzare anche le prime tre parole dell’articolo, scritte tutte in maiuscolo grassetto così come nome dell’autore del pezzo e nome del fotografo.
In questi tre casi notiamo però un’impostazione diversa: 3px di spazio tra una lettera e l’altra. Insomma, le parole sono in evidenza, ma allo stesso tempo si evita di scurire troppo la pagina.
Per quanto riguarda il titolo dell’articolo, è in un GeoEditBold. Il copytight risulta della Klim Type Foundry.
Come si fa a non far comparire l’anteprima nella scheda di ispezione di Firefox? Questa è strana: di solito sotto il nome del file si trova l’indirizzo a cui lo è andato a pescare. Anche in questo caso funziona così, solo che rivolgendosi a quell’indirizzo il server risponde che non trova nessun file (“File not found”). Eppure per visualizzarlo nella pagina il browser lo trova.
Un ottimo trucco per non farsi rubare i caratteri, ancora non troppo diffuso, a quanto pare. Ma se uno volesse applicarlo sul proprio sito per nascondere meglio i propri font, come dovrebbe fare?
In effetti nel codice c’è qualcosa di strano: nell’html della pagina stessa ci sono tante istruzioni di @font-face, ma nessun riferimento al GeoBrandBold. Per giunta alcuni file elencati lì sono stati tolti dal server (tipo i ttf).
Ok. Ma allora chi chiama questo GeoBrand?
Non si sa. Bisognerebbe studiare il codice, cosa niente affatto semplice, tenuto conto che è un labirinto di file e di regole (decine? Centinaia? Migliaia?) che ne basterebbe una piccola parte per far funzionare decentemente il sito, immagino.
Comunque nella pagina dovrebbe comparire anche un Bumstead Regular, sans dai tratti svasati, che però non riesco a vedere.
Commenti
Posta un commento