Oggi scopriremo cos'è il nuovo Carattere Google e come implementarlo subito nei tuoi progetti.
È gratuito da usare e può essere installato in meno di un minuto, una volta capito!
introduzione
Nell'ultimo anno, c'è stata abbastanza esplosione di opzioni per l'implementazione di caratteri personalizzati sul web. Tutti sanno che il futuro della web tipografia è brillante, ma nessuno sa esattamente quale sarà il risultato.
Diverse aziende hanno giustamente visto questa tecnologia in erba come un modo per guadagnare denaro. Di recente abbiamo avuto uno sguardo approfondito su alcune delle opzioni disponibili in questa arena. I nostri articoli su TypeKit e FontDeck mostrano che queste soluzioni sono rapide, facili e non del tutto così diverse. Questi tipi di servizi continueranno senza dubbio a fornire tonnellate di font premium a prezzi accessibili per qualche tempo.
Tuttavia, se dai un'occhiata alla tecnologia molto popolare sul web, vedrai una tendenza emergere: gratis. HTML, CSS, JavaScript, PHP, questi non costano un centesimo da usare. È quindi ragionevole pensare che il vero futuro della tipografia del web risieda in una soluzione gratuita che può essere utilizzata dalle masse senza vincoli.
Un cambio di gioco?
Ovviamente, quando Google lancia il suo cappello in qualsiasi anello, ha la tendenza a cambiare tutto. Recentemente, Google (in concomitanza con Typekit) ha lanciato tranquillamente un'API webfont che potrebbe comportare un tale spostamento a lungo termine. Mentre altre aziende stanno creando iscrizioni, piani di pagamento e abbonamenti, Google ha deciso di rinunciare a un servizio riservato ai membri completamente a favore di fornire un modo semplice e gratuito per qualsiasi sviluppatore web di caricare rapidamente caratteri personalizzati in un web design.
Per vedere come funziona tutto, tuffiamoci in un rapido esempio. Prima di iniziare, ecco un'anteprima rapida e una dimostrazione dal vivo di ciò che costruiremo.
L'HTML
Per aumentare il divertimento, utilizziamo HTML5 e CSS3 insieme all'API dei font di Google. In questo modo avremo davvero uno sguardo decente sul possibile futuro del web design! Tieni presente che vi sono ancora alcuni problemi di compatibilità del browser con queste tecnologie. Quindi, se stai utilizzando un browser malevolo, sappi che la tua esperienza sarà ridotta di un po ', ma dovrebbe degradarsi alla perfezione.
The Starter Code
Per iniziare, incolla uno snippet di codice HTML5 vuoto.
Questa è una versione modificata di un file di avvio che ho trovato su Snipplr che contiene un hack JavaScript per aiutare il vecchio IE con HTML5.
The Divs
Manterremo la pagina super semplice e includeremo solo un titolo, una copia di sottotitoli e un semplice piè di pagina. Questo ci darà tre aree uniche con cui giocare. Utilizzeremo queste aree per implementare due diversi tipi di carattere dall'API di Google.
Come puoi vedere, ho usato un tag h1 per il titolo, un tag p per il sottotitolo e il tag footer HTML5 per il footer. Per quest'ultimo ho gettato in una lista non ordinata di link solo per avere qualcosa laggiù. Sentiti libero di cambiare completamente tutto ciò se stai seguendo, dato che non importa ciò che inserisci finché ne hai una copia.
A questo punto, dovresti avere qualcosa di semplice e di brutto nello screenshot qui sotto.
Questo è tutto l'HTML di cui avremo bisogno! Passiamo al CSS.
Il CSS
Per il CSS, ho scelto di implementare un bel effetto tipografico ispirato a questo tutorial di Line25 CSS3. Sui browser che non supportano text-shadow, il testo sarà comunque perfettamente leggibile e dovrebbe mantenere il webfont di Google.
Stili di base
Per prima cosa implementeremo un reset CSS di base super e gettiamo un colore di sfondo.
Il titolo
Successivamente, inserisci alcuni stili per il titolo. Vogliamo un colore del carattere più scuro dello sfondo e un colore dell'ombra più chiaro dello sfondo per creare quella bella illusione tipografica.
Si noti che abbiamo anche centrato il div e il testo. Io di solito evito i layout web centrati per diversi motivi, ma questo è semplicemente per mostrare del testo in modo che un div centrato funzioni perfettamente. Se non ti piace, sentiti libero di allineare il testo.
Il sottotitolo
Il prossimo è la copia sottotitoli o di paragrafo. Lo stile sarà essenzialmente lo stesso del titolo solo più piccolo.
Nota che abbiamo anche inserito alcuni stili di link e di passaggio del mouse. Quando l'utente passa sopra un collegamento, diventerà un colore più chiaro e l'effetto tipografico diventerà un'ombra normale.
Il piè di pagina
Infine, trasformeremo la nostra lista non ordinata in una linea orizzontale di copia equidistante.
Qui ho applicato gli stili link e hover simili a quelli della copia del paragrafo e ho aggiunto del padding per distanziare i collegamenti.
Anteprima pre-font
Si noti che ho intenzionalmente omesso qualsiasi riferimento alla famiglia di caratteri. Questo perché nel prossimo passaggio inseriremo alcuni caratteri dall'API di Google. Per ora la tua pagina dovrebbe apparire come lo screenshot qui sotto. Ricorda che i tuoi font probabilmente differiranno in base ai valori predefiniti nel tuo browser.
Come puoi vedere, il nostro effetto tipografico sta funzionando bene. È sottile ma rende il testo un po 'più bello.
Aggiunta di caratteri con l'API di Google Font
Ora che abbiamo una pagina di base con cui giocare, è il momento di caricare alcuni tipi di carattere! Per prima cosa fermati sulla pagina API di Google Font e fai clic sulla Directory dei caratteri di Google.
Qui vedrai una breve lista (attualmente 18) di caratteri tra cui scegliere. Ogni font ha diverse varianti e sottofamiglie tra cui scegliere. Quando ne trovi uno che ti piace, fai clic su di esso per vedere le opzioni aggiuntive. Vado a scegliere? IM Fell? e la prima famiglia con questo tipo di carattere (IM Fell DW Pica).
Quando si arriva alla schermata sopra, fare clic su? Ottieni codice? scheda. Sotto questa scheda troverai i frammenti di codice necessari per inserire il carattere nella tua pagina web. Ci sono due modi per importare il font: collegando la sezione head del tuo HTML o usando una dichiarazione @import. Useremo entrambi per avere un'idea di come funzionano.
Metodo 1: Head Link
Innanzitutto, prendi lo snippet di codice simile a quello riportato di seguito e incollalo nella parte principale della pagina HTML.
Ora copia lo snippet CSS e incollalo nelle sezioni headhead e subhead del tuo foglio di stile.
Questo è tutto! Solo due azioni di copia e incolla e hai un fantastico nuovo webfont.
Metodo 2: @Import
Ora per il carattere del piè di pagina, ripeteremo lo stesso processo con una modifica. Trova il carattere? Inconsolata? dall'elenco dei caratteri di Google, vai al? Ottieni codice? scheda e guarda sotto le varianti dei font e le tecniche avanzate? sezione per il seguente snippet:
Basta incollarlo nella parte superiore della pagina CSS, quindi copiare lo snippet CSS della famiglia di caratteri e incollarlo nella sezione del piè di pagina.
Ecco! Ora il tuo footer dovrebbe contenere il font Inconsolata.
Anteprima finale
Ora che abbiamo finito, dai un'occhiata all'anteprima finale per vederlo in azione. Clicca l'immagine per vedere la demo dal vivo.
Per un controllo più avanzato sul caricamento dei font, controlla il WebFont Loader, una libreria JavaScript fornita da Google per aiutarti a modificare il processo.
Professionisti
Inutile dire che questa è la soluzione webfont più veloce e semplice che abbia mai visto. So che l'ho detto negli articoli precedenti, ma queste cose continuano a migliorare sempre di più! La mancanza di una procedura di iscrizione è un risparmio in tempo reale per il sistema Google. Inoltre, dal momento che non è necessario passare attraverso il caos di registrare nomi di dominio specifici per la licenza dei caratteri, è possibile anche testarli localmente nel processo di sviluppo! Questa integrazione perfetta nel mio attuale flusso di lavoro è stata per me un enorme kicker perché odiavo sviluppare localmente con il font sbagliato e applicare il carattere personalizzato sulla pagina live.
Come quasi tutte le famose soluzioni webfont, il sistema di Google utilizza @ font-face per portare a termine il lavoro. Quindi, perché non farlo da solo? Chris Coyier sottolinea tre vantaggi principali nel suo articolo sull'API di Google Font:? Risparmio di larghezza di banda (il peso è su Google), Caching speed (lo stesso font utilizzato su più siti, cache del browser) e Speed in generale (il CDN di Google è più veloce del tuo sito).?
Quindi essenzialmente si riduce a velocità e velocità! Solo una nota tecnica laterale nel caso ve lo stiate chiedendo: tutto il testo è completamente selezionabile e copia / incolla molto bene. Lo odio quando i caratteri personalizzati sono selezionabili su un sito ma non vengono copiati correttamente!
Contro
Uno dei maggiori svantaggi è che attualmente ci sono pochissimi tipi di carattere tra cui scegliere, il che può davvero limitare i tuoi progetti. Ad esempio, originariamente avrei usato una bella sceneggiatura fluida, ma odiavo le due scelte che Google mi ha dato.
Tieni presente che questo sistema è ancora molto nuovo, quindi puoi aspettarti di vederlo crescere molto più a mano a mano che vengono aggiunti nuovi font gratuiti. Tuttavia, probabilmente non vedrai mai la qualità e la diversità che otterrai da un'opzione premium come FontDeck o TypeKit.
Inoltre, come hanno sottolineato i ragazzi di FontSquirrel in un recente tweet, non è disponibile una versione SVG del font, il che significa che dovrai farne uno se vuoi il supporto per iPhone / iPad.
La mia ultima lamentela è che ci sono sicuramente alcuni problemi di kerning evidenti con alcuni dei font disponibili (di nuovo, tenete presente che sono gratuiti). Sono un tipografo quindi questi mi fanno davvero rabbrividire. Probabilmente sono possibili da risolvere con i CSS, sarà solo un po 'noioso e fastidioso.
Conclusione
L'API di Google Font rappresenta un altro capitolo della storia dei metodi @ font-face per la creazione di una tipografia più diversificata sul web. Anche se le scelte dei font sono attualmente limitate, questa è sicuramente la migliore implementazione che ho già provato in quanto è così semplice e veloce.
La possibilità di rinunciare a un processo di registrazione e testare localmente senza i grattacapi della registrazione specifica del dominio sono per me caratteristiche vincenti, ma mi piacerebbe sapere cosa ne pensi? Ti piace il sistema di Google e in tal caso lo userai? Usa la sezione commenti qui sotto per condividere i tuoi pensieri.