H & FJ-weblettertypen een veldgids

Sinds Hoefler en Frere-Jones hun inval aankondigden in de wereld van weblettertypen, is het internet overstroomd met de vreugde van ontwerpers en typografen overal. Eindelijk heeft een van de meest populaire typegieterijen die er is, zijn langverwachte concurrent op het web gezet!


Je kunt de nieuwe dienst die al in gebruik is al zien op sites zoals Rdio, de website van Jessica Hische en CSS-Tricks. Maar wat betekent dit nieuwe aanbod voor jou en mij? Zowel ontwerpers als ontwikkelaars hebben veel om naar uit te kijken in de service. Laten we dat van dichterbij bekijken.


Een korte geschiedenis van het type

Laten we eerst onze geest opfrissen met een korte les in de evolutie van het type op het web. Terug in de dagen van CSS 2, (OK, dus niet dat ver terug) was onze selectie voor webvriendelijke lettertypen enigszins beperkt. We konden een kleine selectie van webvriendelijke lettertypen gebruiken die zeker op (bijna) elk apparaat stonden waar de pagina werd bekeken - Verdana, Arial, Georgia en Times New Roman - of we hebben een lettertype gekozen, zoals Helvetica, dat zou "best bekeken" kunnen worden op specifieke platforms. Niet ideaal. En dan waren er de technieken voor het vervangen van afbeeldingen, waarbij we afbeeldingen van de tekst creëerden in elk lettertype dat we tot onze beschikking hadden, en tekenreeksen vervangen door CSS. Eindelijk was er Sifr; een techniek die Adobe Flash gebruikte om tekst te vervangen. Beide vervangingstechnieken waren ontoegankelijk, lastig te implementeren en een onprettige ervaring op verschillende platforms.

Weinig wisten we, een specificatie voor echt weblettertypen waren onderweg: @ font-face. Degenen onder u die bekend zijn met @ font-face, weten dat het niet de gemakkelijkste manier is om het te implementeren. Daarom wenden we ons tot hoogwaardige weblettertyperservices zoals Google Web Fonts, Typekit en Fontdeck om het zware werk voor ons te doen. Deze services, samen met de nieuwe service van H & FJ, zorgen voor de hosting, licenties en optimalisaties van weblettertypen. Elke service is echter niet zonder compromis; al deze diensten hebben geen fijnmazige controle over de lettertypen die we krijgen. Dingen zoals ligaturen, kleinkapitalen en andere OpenType-functies zijn vaak moeilijk te implementeren zonder de prestaties van de lettertypen ernstig te beïnvloeden.

Dit is het opwindende deel. H & FJ heeft een weblettertypenservice gemaakt voor typografen en ontwikkelaars.


pricing

Laten we het moeilijke deel uit de weg ruimen. De cloud.typography-service van H & FJ begint bij $ 99 per jaar. Die prijs koopt u elke maand 250.000 pageviews. Voor $ 50 meer krijg je maar liefst 1 miljoen pageviews, en voor $ 299 krijg je dat dubbel.


Elk van deze plannen geeft u ook vijf gratis lettertypefamilies - een koopje als u bedenkt dat deze hoogwaardige lettertypefamilies ongeveer $ 200 alleen kosten - evenals al uw eerdere aankopen uit de gieterij, onbeperkte domeinen, maximaal tien "projecten ", SSL-bezorging en 1 gb ontwikkelingsbandbreedte. Grotere plannen zijn beschikbaar, evenals aanvullende projecten.


Font-aanbiedingen

De bibliotheek van H & FJ is klein vergeleken met die van Typekit, maar ze verhinderen de kwaliteit. De gieterij biedt meer dan dertig families, waarvan er tien volledig opnieuw zijn ontwikkeld, opnieuw ontworpen en geoptimaliseerd voor gebruik op internet en schermapparatuur. Een aanzienlijk aantal van deze families heeft uitgebreide sets, waaronder gecondenseerde en uitgebreide varianten, gewichten van ultra light tot ultra black, small caps, ligaturen, swashes en internationale tekensets. Kortom, je krijgt een paar serieus hoogwaardige lettertypen.

De eerste vijf gezinnen die u kiest, zijn volledig gratis en daarna worden gezinnen individueel geprijsd. Alle desktoplicenties worden ook geleverd met een gebruikslicentie voor het gebruik van het web, zodat u eerder gekochte H & FJ-lettertypen kunt meenemen en een geweldige deal kunt krijgen voor desktop- en weblicenties samen voor uniforme branding. Misschien is het meest opwindende lettertype dat beschikbaar is Gotham, dat door velen wordt beschouwd als de meer verfijnde voorouder van Proxima Nova.

Er zijn enkele subtiele verschillen tussen Gotham en Proxima Nova; namelijk Gotham's genereuze letterafstand en breedte, en Proxima Nova's alternatieve cursieve "a".

ScreenSmart

Een belangrijk aspect van weblettertypen is hoe ze presteren op schermapparaten. Er is veel optimalisatie voor nodig om ervoor te zorgen dat lettertypen - met name die lettertypen die oorspronkelijk zijn ontworpen voor drukgebruik - goed presteren op schermen. H & FJ hebben veel gedaan aan de optimalisaties van sommige van hun lettertypen, waarbij ze hun families en personages vaak opnieuw hebben getekend om er zeker van te zijn dat ze er geweldig uitzien op het scherm en op het web.

Sentinel (boven) en Sentinel Screensmart (onder) beide op 18px. De langere x-hoogte en bredere letters in de slimsmart-versie maken hem ideaal voor kleinere formaten en body-copy.

Het optimalisatieproces is door de gieterij 'ScreenSmart' opgezet. Van hun website:

ScreenSmart-lettertypen zijn gemaakt voor webtekst. Ze werden van meet af aan opgevat als lettertypefamilies voor het scherm en zijn ontworpen rond de natuurlijke eigenschappen van pixels en ontworpen om overal nauwkeurige resultaten te leveren.

Dat is hun werk onderbieding. De gieterij herontworpen hun lettertypen in de browser, een reeks tools gebruiken op basis van Webkit. Volledige nieuwe gewichten zijn speciaal ontworpen voor gebruik op het scherm, en elk lettertype is geoptimaliseerd op een verscheidenheid aan browsers en platforms voor "pixel-perfecte" leesbaarheid.


Prestatie

Gezien de kwaliteit - en daarmee de bestandsgrootte - van de lettertypen, is dit ding snel. Cloud.typography gebruikt een bezorgingsagent om verzoeken voor hun weblettertypen af ​​te handelen, de browservereisten te detecteren en alleen de lettertypen te leveren die voor die browser nodig zijn. Het cacheert ook alle aangevraagde bestanden en verspreidt ze over een wereldwijd CDN, wat betekent dat de bezorging van deze bestanden altijd snel gaat.


De bezorgingsagent werkt anders, afhankelijk van de status van uw project en de bijbehorende lettertypen. In de ontwikkelingsmodus worden de lettertypebestanden gehost op de servers van H & FJ en gedistribueerd vanaf het CDN. Voor elk van uw projecten krijgt u 1 gb ontwikkelingsbandbreedte per maand; een vrij aanzienlijke uitkering. Wanneer u overschakelt naar de productiemodus, laat u H & FJ weten waar de lettertypen zich op uw eigen server bevinden, downloadt u een omvangrijk zipbestand en plakt u het op uw server. Daarna is het niet nodig om de CSS-link te wijzigen of iets anders te doen; het CSS-bestand verwijst naar de lettertypen op uw eigen server, maar het bezorgnetwerk doet nog steeds het zware werk om te bepalen welke lettertypen vereist zijn, wat uw gebruiker een serieuze wachttijd bespaart.


Na het overschakelen naar de productiemodus, is de enige limiet de paginaweergave voor uw plan.

Een ander ding om op te merken over de prestaties van Cloud.typography is het feit dat het geen JavaScript-loader zoals Typekit en Google Web Fonts gebruikt. Een JavaScript-loader heeft enkele duidelijke voordelen als het gaat om het dynamisch aanpassen aan de behoeften van de browser, maar het kost ook wat; extra HTTP-verzoeken, enkele browsernuiken op een laag niveau en een extra vertraging terwijl het script de CSS aan het document toevoegt.

Eén ding dat me echt interesseerde, fungeerde als een vrij subtiele prestatieverbetering. Wanneer u de CSS-regels bekijkt voor het toevoegen van de lettertypen aan uw site, specificeert Cloud.typography er niet één, maar twee namen van lettertypen. De CSS-regel van Hoefler Text ziet er bijvoorbeeld als volgt uit:

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

Door twee lettertypebestanden aan te vragen, kunnen de lettertypen tegelijkertijd worden gedownload (hoewel dit niet in alle browsers het geval is). In theorie is het sneller om twee 200kb-bestanden tegelijk te downloaden dan om een ​​enkel 400kb-bestand te downloaden. Zowel de A- als de B-lettertypen bevatten de helft van de tekensets, dus de tekens die ontbreken in bestand A vallen terug en gebruiken bestand B. Slim of wat?

De werkelijke bedoeling om op deze manier bestanden te splitsen (zegt Reed Reeder van H & FJ) is "om oneigenlijk misbruik van de lettertypen te voorkomen", maar het is allemaal interessant, niet de minst.

Dit alles gezegd, de lettertypebestanden kunnen snel behoorlijk groot worden. De lettertypen worden per gewicht / stijl aan uw project toegevoegd, waarbij elk gewicht of elke stijl gemiddeld ongeveer 40 kb is. Dit betekent dat als u een enkele lettertypefamilie wilt in gewone en dikke gewichten, met cursieve letters en kleine kapjes voor elk van deze, u een totale grootte van 320 kb kunt verwachten.


Controle

Cloud.typography biedt een zeer concurrerend niveau van controle over de lettertypen die u selecteert. Deze opties duiden duidelijk op een weblettertype-service, niet alleen voor ontwerpers en ontwikkelaars, maar voor typografen. Standaard krijgt elke lettertypefamilie die u toevoegt aan een project de gewone, cursieve, vetgedrukte en vet cursieve lettertypen, met standaard interpunctie en kerning.

Hier wordt het interessant (of borderline obsessief). Zodra u een lettertypefamilie aan uw project toevoegt, kunt u ook alle andere beschikbare gewichten (maximaal negen) en stijlen, ware smallcaps, contextuele en discretionaire ligaturen, swashes, verschillende nummerstijlen, uitgebreide tekensets en interpunctie en wiskundige tekens toevoegen..


Niet alleen dat, maar u kunt ook aangepaste tekensets definiëren. Als u bijvoorbeeld alleen een bepaald lettertype voor het logo van uw site gebruikt, kunt u aangeven dat Cloud.typography alleen de benodigde tekens moet leveren, wat serieuze downloads voor gebruikers kan besparen.

Het is de moeite waard eraan te denken dat elk van de extra typografische functies die u toevoegt meer gewicht zal toevoegen aan de lettertypen en dat de ondersteuning van de browser mogelijk een beetje fragmentarisch is, met name op oude IE.


Afsluiten

Hopelijk zie je dat H & FJ extra inspanningen heeft geleverd en ongeëvenaarde fijnkorrelige controle heeft over de lettertypen die je kiest voor je sites. Hoewel de bestandsgroottes blijven stijgen, heeft dit niveau van controle ontwerpers overal (waaronder de echte) ongelooflijk enthousiast. Als er iets is, kan de lancering van Cloud.typography een begin maken met een evolutie in de andere weblettertypediensten die momenteel beschikbaar zijn - we kunnen alleen maar afwachten! Vergeet niet om meer te leren over de nieuwe service rechtstreeks uit de mond van het paard.