Da quando Hoefler & Frere-Jones hanno annunciato la loro incursione nel mondo dei caratteri web, Internet è stato traboccante di gioia per i designer e i tipografi di tutto il mondo. Infine, una delle più popolari fonderie di tipi là fuori ha rilasciato il loro tanto atteso concorrente per i servizi di font web di recente!
Puoi già vedere il nuovo servizio in uso su siti come Rdio, il sito Web di Jessica Hische e CSS-Tricks. Ma cosa significa questa nuova offerta significa per te e me? Bene, designer e sviluppatori hanno molto da aspettarsi nel servizio. Diamo un'occhiata più da vicino.
Facciamo prima rinfrescare le nostre menti con una breve lezione sull'evoluzione del tipo sul web. Indietro ai tempi del CSS 2, (OK, quindi no quello molto indietro) la nostra selezione di caratteri tipografici web-friendly era piuttosto limitata. Siamo stati in grado di utilizzare una piccola selezione di caratteri web-friendly che erano sicuri di essere su quasi tutti i dispositivi su cui era visualizzata la pagina - Verdana, Arial, Georgia e Times New Roman - o abbiamo selezionato un font, come Helvetica, che sarebbe "meglio visto" su piattaforme specifiche. Non ideale E poi c'erano le tecniche di sostituzione delle immagini, in cui abbiamo creato immagini del testo con qualsiasi font che avessimo a nostra disposizione e sostituito le stringhe di testo usando i CSS. Alla fine, c'era Sifr; una tecnica che utilizzava Adobe Flash per sostituire il testo. Entrambe queste tecniche di sostituzione erano inaccessibili, un dolore da implementare e un'esperienza spiacevole su tutte le piattaforme.
Poco sapevamo, una specifica per vero i font web erano in corso: @ font-face. Quelli di voi che conoscono @ font-face sapranno che non è la cosa più facile da implementare nel mondo, quindi ci rivolgiamo a servizi di carattere web di alta qualità come Google Web Fonts, Typekit e Fontdeck per fare il grande lavoro per noi. Questi servizi, insieme al nuovo servizio di H & FJ, gestiscono l'hosting, le licenze e l'ottimizzazione dei font web. Tuttavia, ogni servizio non è privo di compromessi; tutti questi servizi non hanno un controllo preciso sui caratteri che otteniamo. Cose come legature, maiuscoletto e altre funzionalità di OpenType sono spesso difficili da implementare senza compromettere seriamente le prestazioni dei caratteri.
Questa è la parte eccitante. H & FJ ha creato un servizio di font web per tipografi e sviluppatori.
Tiriamo fuori la parte difficile. Il servizio cloud.typography di H & FJ parte da $ 99 all'anno. Quel prezzo ti compra 250.000 visualizzazioni di pagina ogni mese. Per altri $ 50, ottieni uno strabiliante 1 milione di visualizzazioni di pagina, e per $ 299, ottieni il doppio di quello.
Ognuno di questi piani ti offre anche cinque famiglie di font gratuiti - un affare se consideri che queste famiglie di font di alta qualità costano solo $ 200 da soli - così come tutti gli acquisti passati dalla fonderia, domini illimitati, fino a dieci "progetti ", Consegna SSL e 1 gb di larghezza di banda di sviluppo. Sono disponibili piani più grandi e progetti aggiuntivi.
La libreria di H & FJ è piccola rispetto a quella di Typekit, ma aumenta la qualità. La fonderia offre oltre trenta famiglie, dieci delle quali sono state completamente riprogettate, ridisegnate e ottimizzate per l'utilizzo su dispositivi web e schermo. Un numero considerevole di queste famiglie ha serie estese, comprese varianti condensate ed espanse, pesi da ultra leggero a ultra nero, maiuscoletto, legature, swash e set di caratteri internazionali. Fondamentalmente, ottieni font seriamente di alta qualità.
Le prime cinque famiglie che scegli sono completamente gratuite e, successivamente, le famiglie hanno un prezzo individuale. Tutte le licenze desktop sono inoltre dotate di una licenza d'uso web, in modo da poter portare con sé i caratteri H & FJ precedentemente acquistati, oltre ad ottenere un grande affare sulle licenze desktop e web insieme, per un marchio unificato. Forse il tipo di carattere più eccitante disponibile è Gotham, che è considerato da molti l'antenato più raffinato di Proxima Nova.
Ci sono alcune sottili differenze tra Gotham e Proxima Nova; vale a dire, la larghezza e le larghezze delle lettere più generose di Gotham e l'alfabeto corsivo "a" di Proxima Nova.Un aspetto importante dei caratteri Web è il loro rendimento sui dispositivi dello schermo. Ci vuole molta ottimizzazione per assicurarsi che i caratteri, in particolare quelli originariamente progettati per l'uso di stampa, funzionino bene sugli schermi. H & FJ sono andati a tutto campo sull'ottimizzazione di alcuni dei loro caratteri tipografici, spesso completamente ridisegnando famiglie e personaggi per assicurarsi che risultino eccezionali sullo schermo e sul web.
Sentinel (in alto) e Sentinel Screensmart (in basso) entrambi a 18px. Le lettere dell'altezza x più alte e più larghe nella versione screenmart lo rendono ideale per le taglie più piccole e la copia del corpo.Il processo di ottimizzazione è stato indossato "ScreenSmart" dalla fonderia. Dal loro sito web:
I font ScreenSmart sono creati per il testo web. Concepiti sin dall'inizio come famiglie di font per lo schermo, sono progettati intorno alle proprietà naturali dei pixel e progettati per fornire risultati precisi ovunque.
Questo sta sottolineando il loro lavoro. La fonderia ha ridisegnato i loro caratteri nel browser, utilizzando una suite di strumenti basati su Webkit. Nuovi pesi sono stati progettati appositamente per l'uso su schermo e ogni font è ottimizzato su una varietà di browser e piattaforme per una leggibilità "pixel-perfect".
Considerando la qualità - e di conseguenza la dimensione del file - dei caratteri, questa cosa è veloce. Cloud.typography utilizza un agente di consegna per gestire le richieste dei propri caratteri Web, rilevando i requisiti del browser e consegnando solo i caratteri necessari per quel browser. Inoltre memorizza nella cache tutti i file richiesti, distribuendoli attraverso un CDN globale, il che significa che la consegna di questi file è sempre rapida.
L'agente di consegna opera in modo diverso a seconda dello stato del progetto e dei suoi caratteri. In modalità sviluppo, i file dei font sono ospitati sui server di H & FJ e distribuiti dalla CDN. Per ognuno dei tuoi progetti, ottieni 1gb di larghezza di banda di sviluppo al mese; un assegno abbastanza consistente. Quando si passa alla modalità di produzione, si consente a H & FJ di sapere dove si troveranno i font sul proprio server, scaricare un file zip di grandi dimensioni e incollarlo sul server. Dopodiché, non è necessario cambiare il collegamento CSS o fare altro; il file CSS punta ai caratteri sul proprio server, ma la rete di consegna fa ancora il pesante sollevamento nel determinare quali caratteri sono richiesti, risparmiando all'utente tempo di attesa serio.
Dopo il passaggio alla modalità di produzione, l'unico limite è l'assegno di visualizzazione della pagina per il tuo piano.
Un'altra cosa da notare sulle prestazioni di Cloud.typography è il fatto che non utilizza un loader JavaScript come Typekit e Google Web Fonts. Un caricatore JavaScript presenta alcuni ovvi vantaggi quando si tratta di adeguarsi dinamicamente alle esigenze del browser, ma ha anche alcuni costi; richieste HTTP aggiuntive, alcuni sniffer di browser di basso livello e un ulteriore ritardo mentre lo script aggiunge il CSS al documento.
Una cosa che mi interessava davvero è stata un miglioramento delle prestazioni piuttosto sottile. Quando date un'occhiata alle regole CSS per aggiungere i caratteri al vostro sito, Cloud.typography specifica non uno, ma Due nomi di caratteri. Ad esempio, la regola CSS di Hoefler Text si presenta così:
famiglia di caratteri: "Hoefler Text A", "Hoefler Text B";
Richiedendo due file di font, i font possono essere scaricati contemporaneamente (anche se questo non è il caso in tutti i browser). In teoria, è più veloce scaricare contemporaneamente due file da 200kb piuttosto che scaricare un singolo file da 400kb. Entrambi i font A e B contengono metà dei set di caratteri, quindi i caratteri mancanti nel file A si riducono e utilizzano il file B. Smart o cosa?
La vera intenzione di dividere i file in questo modo (dice Reed Reeder di H & FJ) è di "prevenire l'uso improprio dei caratteri", ma è tutto assolutamente niente meno.
Detto questo, i file dei font possono diventare rapidamente piuttosto grandi. I caratteri vengono aggiunti al progetto in base al peso / stile, con un peso o uno stile in media di circa 40kb. Questo significa che se vuoi una singola famiglia di font con pesi regolari e in grassetto, con corsivo e maiuscoletto per ognuno di essi, puoi aspettarti una dimensione totale di 320kb.
Cloud.typography offre un livello altamente competitivo di controllo sui tipi di carattere selezionati. Queste opzioni indicano chiaramente un servizio di font web non solo per designer e sviluppatori, ma per tipografi. Per impostazione predefinita, qualsiasi famiglia di font aggiunta a un progetto ottiene i caratteri corsivi regolari, corsivi, grassetti e grassetti, con punteggiatura e crenatura standard.
Ecco dove diventa interessante (o ossessivo borderline). Una volta aggiunta una famiglia di font al progetto, puoi anche aggiungere tutti gli altri pesi disponibili (fino a nove) e stili, veri maiuscoletti, legature contestuali e discrezionali, swash, stili numerici diversi, set di caratteri estesi e punteggiatura e caratteri matematici.
Non solo, ma puoi anche definire set di caratteri personalizzati. Ad esempio, se utilizzi solo un determinato carattere per il logo del tuo sito, puoi dire a Cloud.typography di fornire solo i caratteri necessari, salvando alcuni download importanti per gli utenti.
Vale la pena ricordare che ciascuna delle funzionalità tipografiche aggiuntive aggiunte aggiungerà più peso ai caratteri e che il supporto del browser potrebbe essere un po 'irregolare, in particolare sul vecchio IE.
Si spera che H & FJ abbia fatto il miglio supplementare, offrendo un controllo impareggiabile su tutti i tipi di carattere che scegli per i tuoi siti. Mentre le dimensioni dei file continueranno a crescere, questo livello di controllo ha entusiasmato i designer ovunque (inclusi i tuoi veramente inclusi). Se non altro, il lancio di Cloud.typography potrebbe dare il via ad un'evoluzione negli altri servizi di font web attualmente disponibili: possiamo solo aspettare e vedere! Non dimenticare di saperne di più sul nuovo servizio direttamente dalla bocca del cavallo.