H & FJ Web Fonts En Field Guide

Siden Hoefler & Frere-Jones kunngjorde sin foray i verden av webfonter, har internett blitt overfylt med glede av designere og typografer overalt. Endelig har en av de mest populære typegjærene der ute, sluppet sin etterlengtede konkurrent til webtypetjenester sent!


Du kan allerede se den nye tjenesten som brukes på nettsteder som Rdio, Jessica Hieses nettsted og CSS-Tricks. Men hva betyr dette nye tilbudet for deg og meg? Nå, både designere og utviklere har mye å se frem til i tjenesten. La oss ta en nærmere titt.


En kort historie av typen

La oss først oppdatere våre tanker med en kort leksjon i utviklingen av typen på nettet. Tilbake i dagene til CSS 2, (OK, så ikke at langt tilbake) vårt utvalg for nettvennlige skrifttyper var noe begrenset. Vi kunne bruke et lite utvalg av nettvennlige skrifter som var sikker på å være på (nesten) hver enhet siden ble vist på - Verdana, Arial, Georgia og Times New Roman - eller vi valgte en skrift, som Helvetica, det ville være "best viewed" på bestemte plattformer. Ikke ideell. Og så var det bildetes utskiftingsteknikker, hvor vi skapte bilder av teksten i hvilken font vi hadde til disposisjon, og erstattet tekststreng med CSS. Til slutt var det Sifr; en teknikk som brukte Adobe Flash til å erstatte tekst. Begge disse erstatningsteknikkene var utilgjengelige, en smerte å implementere og en ubehagelig opplevelse på tvers av plattformer.

Lite visste vi, en spesifikasjon for ekte Nettfonter var på vei: @ font-face. De av dere som er kjent med @ font-face, vet at det ikke er den enkleste tingen i verden å implementere, så vi vender oss til webkvalitetstjenester av høy kvalitet som Google Web Fonts, Typekit og Fontdeck for å gjøre det tungt løft for oss. Disse tjenestene, sammen med H & FJs nye tjeneste, håndterer hosting, lisensiering og optimalisering av webfonter. Imidlertid er hver tjeneste ikke uten kompromiss; Alle disse tjenestene mangler finkornet kontroll over skriftene vi får. Ting som ligaturer, små caps og andre OpenType-funksjoner er ofte vanskelige å implementere uten å ha alvorlig innvirkning på fontsytelsen.

Dette er den spennende delen. H & FJ har opprettet en webfonttjeneste for både typografer og utviklere.


Priser

La oss få den harde delen ut av veien. H & FJs cloud.typography-tjeneste starter på $ 99 per år. Den prisen kjøper deg 250.000 sidevisninger hver måned. For $ 50 mer får du en svimlende 1 million sidevisninger, og for $ 299 får du det dobbelte.


Hver av disse planene gir deg også fem gratis skriftfamilier som er kastet inn - et godt kjøp når du vurderer at disse fontildfamiliene av høy kvalitet koster rundt $ 200 alene - samt alle dine tidligere kjøp fra støperi, ubegrensede domener, opptil ti "prosjekter ", SSL-levering og 1GB med utviklingsbåndbredde. Større planer er tilgjengelige, samt tilleggsprosjekter.


Font tilbud

H & FJs bibliotek er lite sammenlignet med slike som Typekit, men de øker baren på kvalitet. Støperiet tilbyr over tretti familier, hvorav ti har blitt fullstendig reengineered, redesignet og optimalisert for bruk på nettet og skjermenheter. Et betydelig antall av disse familiene har utvidede sett, inkludert kondenserte og utvidede varianter, vekter fra ultra lys til ultra svart, små caps, ligaturer, swashes og internasjonale tegnsett. I utgangspunktet får du noen seriøst høy kvalitet skrifter.

De fem første familiene du velger er helt gratis, og etter det blir familier priset individuelt. Alle stasjonære lisenser kommer også med et brukslicens, slik at du kan ta med tidligere kjøpte H & FJ-skrifttyper, samt få en god del på desktop og web-lisenser sammen, for enhetlig merkevarebygging. Kanskje den mest spennende skrifttypen er Gotham, som mange anser å være Proxima Nova's mer raffinerte forfader.

Det er noen subtile forskjeller mellom Gotham og Proxima Nova; nemlig Gothams mer generøse brevavstand og bredder, og Proxima Nova's alternativ kursiv "a".

ScreenSmart

Et viktig aspekt av webfonter er hvordan de utfører på skjermenheter. Det krever mye optimalisering for å sikre at fonter - spesielt de som er opprinnelig designet for utskrift, fungerer godt på skjermene. H & FJ har gått allikevel på optimeringen av noen av deres skrifttyper, ofte fullstendig omdanner familier og tegn for å sikre at de ser utestående på skjermen og web.

Sentinel (topp) og Sentinel Screensmart (nederst) begge ved 18px. Den høyere x-høyden og bredere bokstaver i skjermkortversjonen gjør den ideell for mindre størrelser og kroppskopi.

Optimaliseringsprosessen er donned "ScreenSmart" av støperiet. Fra deres hjemmeside:

ScreenSmart-skrifter er bygget for webtekst. Utformet fra starten som fontfamilier for skjermen, er de designet rundt de naturlige egenskapene til piksler, og konstruert for å levere nøyaktige resultater overalt.

Det er underselling deres arbeid. Støperiet omformet deres skrifttyper i nettleseren, bruker en pakke med verktøy basert på Webkit. Hele nye vekter ble designet spesielt for skjermbruk, og hver skrift er optimalisert på en rekke nettlesere og plattformer for "piksel-perfekt" lesbarhet.


Opptreden

Tatt i betraktning kvaliteten - og dermed filstørrelsen - av skriftene, er denne tingen rask. Cloud.typography bruker et leveringsagent til å håndtere forespørsler for deres webfonter, oppdager nettleserkravene og leverer bare skriftene som trengs for nettleseren. Den caches også alle filene som er forespurt, distribuerer dem over en global CDN, noe som betyr at leveransen av disse filene alltid er lynrask.


Leverandøren handler annerledes avhengig av status for prosjektet og dets skrifter. I utviklingsmodus er fontfilene vert på H & FJs servere og distribuert fra CDN. For hver av dine prosjekter får du 1 GB utviklingsbåndbredde per måned; en ganske betydelig godtgjørelse. Når du bytter til produksjonsmodus, lar du H & FJ vite hvor skrifttypene vil bli plassert på din egen server, last ned en stor zip-fil, og hold den på serveren din. Etter det er det ikke nødvendig å endre CSS-lenken eller gjøre noe annet; CSS-filen peker på skrifter på din egen server, men leveringsnettverket løfter fortsatt tungt for å avgjøre hvilke skrifter som kreves, og sparer brukeren din for alvor ventetid.


Etter å ha byttet til produksjonsmodus, er den eneste grensen sidevisningen for planen din.

En annen ting å merke seg om Cloud.typographys ytelse er at det ikke bruker en JavaScript-laster som Typekit og Google Web Fonts. En JavaScript-laster har noen åpenbare fordeler når det gjelder å tilpasse dynamisk til nettleserens behov, men det kommer også til noen kostnader; ekstra HTTP-forespørsler, noe nettleser på lavt nivå, og en ekstra forsinkelse mens skriptet legger til CSS i dokumentet.

En ting som virkelig interesserte meg, virket som en delikat ytelsesforbedring. Når du tar en titt på CSS-reglene for å legge til skrifter på nettstedet ditt, spesifiserer Cloud.typography ikke en, men to skriftnavn. For eksempel ser Hoefler Texts CSS-regel slik ut:

font-familie: "Hoefler Text A", "Hoefler Text B";

Ved å be om to skrifttypefiler, kan skriftene lastes ned samtidig (selv om dette ikke er tilfelle i alle nettlesere). I teorien er det raskere å laste ned to 200kb filer samtidig enn det er å laste ned en enkelt 400kb fil. Både A- og B-skriftene inneholder halvt tegnsett, så tegnene som mangler fra fil A, faller tilbake og bruker fil B. Smart eller hva?

Den faktiske hensikten med å dele filer på denne måten (sier H & FJs Reed Reeder) er å "forhindre tilfeldig misbruk av skriftene", men det er alt interessant, ikke-mindre.

Alt dette sa, skriftfiler kan raskt bli ganske store. Skriftene legges til prosjektet ditt per vekt / stil, med hver vekt eller stil som gjennomsnittlig rundt 40kb. Dette betyr at hvis du vil ha en enkelt skrifttypefamilie i vanlige og dristige vekter, med kursiv og små caps for hver av disse, kan du forvente en total størrelse på 320kb.


Styre

Cloud.typography tilbyr et svært konkurransedyktig nivå av kontroll over skriftene du velger. Disse alternativene tydelig viser en web skrifttype tjeneste ikke bare for designere og utviklere, men for typografer. Som standard legger en hvilken som helst skriftfamilie du legger til i et prosjekt, de vanlige, kursiv, fet og dype kursiv skriftene med standard tegnsetting og kerning.

Her er hvor det blir interessant (eller borderline obsessive). Når du har lagt til en skriftfamilie i prosjektet ditt, kan du også legge til alle andre tilgjengelige vekter (opptil ni) og stiler, ekte små caps, kontekstuelle og diskretionære ligaturer, swashes, forskjellige tallstiler, utvidede tegnsett og tegnsetting og matte tegn.


Ikke bare det, men du kan også definere egendefinerte tegnsett. Hvis du for eksempel bare bruker et bestemt skrift for nettstedets logo, kan du fortelle Cloud.typography å bare levere de nødvendige tegnene, og lagre noen alvorlige nedlastinger for brukere.

Det er verdt å huske at hver av de ekstra typografiske funksjonene du legger til, vil legge til mer vekt på skriftene, og at nettleserens støtte kan være litt usammenhengende, særlig på gamle IE.


Wrapping Up

Forhåpentligvis kan du se at H & FJ har gått den ekstra mile, og tilbyr uovertruffen finkornskontroll over de skriftene du velger for nettstedene dine. Mens filstørrelsene vil fortsette å øke, har dette nivået av kontroll designere overalt (inkludert med deg) utrolig spennende. Hvis det er noe, kan lanseringen av Cloud.typography kickstart en evolusjon i de andre webfonten tjenestene som er tilgjengelige for øyeblikket - vi kan bare vente og se! Ikke glem å lære mer om den nye tjenesten rett fra hestens munn.