Webdesign kwam op de dag dat webfonts wijdverspreid gebruik betraden. Voorafgaand aan dat punt is het betwistbaar dat we minder ontwerpers dan ingenieurs waren.
Het enthousiasme waarmee we de lettertype-opties in webdesign hebben gepakt, heeft echter geleid tot een verbijsterende reeks keuzes; zozeer zelfs dat veel ontwerpers kiezen voor de weg van de minste weerstand, waardoor het verlangen naar een eenvoudige implementatie hun typografie kan dicteren.
Als u weet wat u zoekt, zijn alle opties eenvoudig. In dit artikel zullen we u bewapenen met de kennis die u nodig hebt om weloverwogen beslissingen te nemen bij het kiezen tussen lettertype-technologie.
We gaan deze opties illustreren door ons te concentreren op de beste manier om een klassiek lettertype, Garamond, te leveren.
Na de deugden van webfonts te hebben geprezen, wordt in de eerste optie die we overwegen helemaal geen webfonts gebruikt. Lettertypestapeling is een CSS-techniek waarin u een aantal fallbacks opgeeft beginnend bij uw eerste keuze en eindigend met een catch-all oplossing.
Er zijn veel bronnen voor het stapelen van lettertypen online, maar een van mijn favorieten is cssfontstack.com, het is een goed startpunt voor een lettertypestapel, maar houd er rekening mee dat je vaker wel dan niet wat expertise moet meenemen.
Volgens cssfontstack.com is Garamond beschikbaar als een systeemlettertype op 49,91% van de Macs en 86,47% van de Windows-machines. Dat is best goed, maar niet goed genoeg. Dit is de voorgestelde lettertypestapel die alle basissen omvat:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;De vraag is, hoe kunnen we dit verbeteren?
Welnu, we weten dat er talloze versies van Garamond beschikbaar zijn, dus we kunnen een klein verschil toevoegen in de tweede gokkast.
Ten tweede ben ik het er niet mee eens dat Baskerville of Times een geschikte vervanger zijn voor Garamond, dus laten we ze laten vallen. Hoefler Tekst werkt goed in plaats van Garamond, dus dat kan blijven. We moeten serif als laatste catch-all toevoegen, maar omdat de meeste systemen Times als hun standaardcodif gebruiken, laten we het veel betere Georgia glijden voor iedereen die door de kloven glijdt.
Onze uiteindelijke aangepaste lettertypestapel ziet er als volgt uit:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;De meeste kijkers zullen Garamond zien, een paar anderen zullen een redelijk compromis zien en een kleine minderheid zal gewoon hun standaard serif-lettertype krijgen.
Het stapelen van lettertypen is gratis, verreweg de snelste oplossing, en afhankelijk van het door u gekozen lettertype kan dit zeer effectief zijn; in het geval van Garamond is er een goed argument om dit 'werk gedaan' te noemen.
Er is echter één groot probleem met het stapelen van lettertypen, vooral met een lettertype zoals Garamond: er zijn zoveel piratenversies in omloop dat het onmogelijk is om te weten welk lettertype "Garamond" wordt genoemd op het systeem van de gebruiker. We weten niet alleen niet zeker het ontwerp is in overeenstemming met onze verwachtingen, de schaal van het lettertype kan radicaal verschillen van de versie in ons ontwerp. (Technisch gezien is er niets dat voorkomt dat een exemplaar van Arial wordt hernoemd tot "Garamond", in welk geval onze lettertypestapel dat zou gebruiken.)
Het stapelen van lettertypen is daarom een uitstekende back-up en moet worden overwogen voor gebruik in combinatie met alle onderstaande oplossingen, maar het is minder dan ideaal als primaire oplossing.
Google Fonts is voor veel ontwerpers het moment waarop ze hun zoektocht beëindigen. Voor een totaal van $ 0 kunt u eenvoudig webfonts in uw site laden met behulp van CSS.
Het enige nadeel is dat het aantal aangeboden letterbeelden uiterst beperkt is. Letterbeelden zoals Roboto en PT Sans danken hun populariteit evenzeer aan hun vrije beschikbaarheid op Google Fonts, als aan hun ontwerpkwaliteiten.
Momenteel is de enige variant van Garamond die beschikbaar is op Google Fonts EB Garamond, een poging om het Garamond-lettertype te openen. Maar het probleem met deze versie is dat er maar één gewicht en stijl beschikbaar is; er is geen vet of cursief. De ontwerper Georg Duffner heeft zijn werk in volle gang beschikbaar gemaakt op BitBucket maar het is niet klaar voor productie.
Google Fonts is een fantastische budgetoplossing en ideaal voor situaties waarin u mogelijk de rekening moet betalen in plaats van uw klant. Je lettertypen in CSS kunnen specificeren is zo eenvoudig als het maar kan zijn.
De grote fout met Google Fonts is dat er ondanks hun marketing weinig keus is. Als u op zoek bent naar een webfont van Open Sans, bent u aan het juiste adres, maar als u een lettertype als Garamond wilt - wat nauwelijks te zien is - is het een uitspatting.
Self-hosting is een enorm ondergewaardeerde benadering van webfonts. De belangrijkste aantrekking is de mogelijkheid om lettertypen te subsetten, een optie die zo aantrekkelijk is dat bijna alle streamingdiensten deze proberen na te bootsen.
Als je een desktop-kopie van Garamond op je systeem hebt, open je deze en zie je een verbijsterend aantal tekens. Het plaatsen van een lettertype is het proces waarbij niet-essentiële tekens worden verwijderd, wat resulteert in een kleinere bestandsgrootte en een snellere levering.
Natuurlijk zijn de personages die je nodig hebt afhankelijk van de site die je aan het bouwen bent: als je een toeristische gids voor Dubrovnik aan het bouwen bent, heb je waarschijnlijk Servische cyrillische personages nodig; als je het verzamelde werk van Shakespeare reproduceert, is het onwaarschijnlijk dat je een @ -symbool nodig hebt.
Als u een lettertype wilt subset, heeft u software voor het bewerken van lettertypen nodig. Er zijn veel opties beschikbaar van de gratis fontforge tot de premie FontLab Studio. Om een subset-versie van het lettertype te maken, selecteert u eenvoudigweg een glyph die u niet wilt en verwijdert u deze en slaat u het bestand op in uw projectmap. (Zorg ervoor dat u uw originele lettertypebestand niet overschrijft!)
Het volledige .ttf-bestand voor Adobe Garamond Pro is 606Kb. Door het uit te schuiven naar basis Latijnse tekens en interpunctie wordt het gereduceerd tot 56 Kb. Vermenigvuldig dat over verschillende gewichten en stijlen en u bent een paar Mb aan het sparen voor uw gebruikers.
De meeste lettertype-bestanden die u hebt geïnstalleerd, zullen TrueType (.ttf) zijn met een beetje OpenType (.otf). U kunt deze opslaan op uw server en deze specificeren in uw CSS.
Ondersteuning voor .ttf- en .otf-bestandsindelingen is wijdverspreid in alle moderne browsers behalve IE (zelfs de nieuwste versie) en enkele mobiele browsers (inclusief oudere versies van iOS Safari).
Om je dekking te vergroten, heb je verschillende extra formaten nodig. .eot werkt voor IE, .woff werkt voor de meeste browsers en is het formaat van de W3C, .svg werkt op oudere browsers. Er zijn een aantal webservices die deze indelingen voor u genereren vanuit uw .ttf-bestand, een van de meest populaire Lettertype Squirrel's.
Het nadeel van het converteren van desktoplettertypen voor online gebruik is tweeledig: ten eerste hebt u bijna zeker geen licentie om dit te doen; en ten tweede zijn desktoplettertypen vrijwel altijd geoptimaliseerd voor afdrukken, ze worden gewoon niet goed weergegeven op het scherm.
Lettergieterijen zijn eindelijk gewekt door het feit dat er een enorme markt is voor webfonts. Als gevolg daarvan hebben ze niet alleen hun licentie aangescherpt, maar werken ze ook aan het optimaliseren van hun back-catalogi voor schermen.
Gieterijen die speciale webfonts leveren, bieden alle vereiste formaten, gecontroleerd op kwaliteit en klaar om te worden geüpload naar uw server. Bovendien is het nog steeds gratis om een bestand te subseten en bent u niet afhankelijk van de uptime van een derde partij.
Er zijn talloze plaatsen waar u webfonts kunt kopen, twee van de belangrijkste spelers in het veld zijn FontShop.com en MyFonts.com .
Terugkomend op ons dilemma van Garamond, kunnen we zien dat MyFonts een aantal verschillende versies van Garamond aanbiedt. We kunnen een licentie krijgen Adobe Garamond in verschillende gewichten, beperkt tot 250.000 pageviews, voor ongeveer $ 180.
FontShop heeft ook een aantal webfont-versies van Garamond beschikbaar. URW Garamond Web biedt alle gewenste gewichten en stijlen, allemaal met een royale 500.000 pageviews per maand. Bovendien heeft FontShop een speciale subsetter om uw glimmende nieuwe lettertypeaankopen te optimaliseren. Helaas betaal je hiervoor een premie, ongeveer $ 680 voor de volledige lettertypefamilie.
Self-hosting maakt subsetting mogelijk. Het zorgt ervoor dat u de controle houdt over uw lettertypebesturing en voorkomt elke vorm van afhankelijkheid van servers van derden.
Sterker nog, als u een professioneel webfont koopt, kunt u verwachten dat de kwaliteit extreem hoog is.
Self-hosting spreekt ook mensen aan die liever onze fonts "bezitten" dan ze te verhuren. Natuurlijk is er juridisch gezien heel weinig eigendom, maar een eenmalige vergoeding zit prettiger dan een abonnement voor veel mensen.
Het enige nadeel van self-hosting is de substantiële prijs. U zult niet alleen voor het lettertype moeten betalen, maar het kan ook zijn dat u rekening moet houden met hosting- en bandbreedtekosten in uw cijfers.
Net als Google Fonts leveren webfont-services fonts aan onze browsers via eenvoudige CSS. In tegenstelling tot Google Fonts is er een enorm bereik om uit te kiezen.
Er zijn een aantal verschillende leveranciers om uit te kiezen, en ik hou vooral van Hoefler & Frere-Jones ' cloud.typography service. Net als bij veel kleinere leveranciers is het nut ervan echter volledig afhankelijk van de beschikbaarheid van het lettertype waarnaar u op zoek bent. Het dichtstbijzijnde lettertype dat Hoefler en Frere-Jones kunnen leveren, is Hoefler-tekst, maar als we een premie betalen, hoeven we geen concessies te doen.
De grootste speler in webfont-streaming is Adobe Typekit . De kwaliteit van hun lettertypen is erg hoog, de implementatie is eenvoudig en vooral, ze hebben een enorme catalogus om uit te kiezen.
Typekit biedt een reeks abonnementen variërend van $ 24,99 per jaar voor 50.000 weergaven per maand, tot $ 99,99 per jaar voor 1.000.000 weergaven per maand. Als u echter Creative Cloud-lid bent, is het portfolio-abonnement opgenomen in uw abonnement; wat betekent dat voor de meeste webontwerpers Typekit een gratis oplossing is.
Een snelle zoekopdracht vertelt ons dat er verschillende versies van Garamond zijn, inclusief Adobe's eigen, beschikbaar op Typekit. En er is ook een zeer beperkte subsetfunctie waarmee we de bestandsgrootte een beetje kunnen verkleinen.
Webfont-streamingdiensten bieden een grote variëteit aan uitstekende kwaliteit lettertypen die eenvoudig aan uw site kunnen worden toegevoegd.
In het geval van Typekit, als u al lid bent van Creative Cloud, maakt gratis toegang dit een nog aantrekkelijkere optie. Als u echter geen lid bent, kunt u kiezen tussen een aanzienlijk abonnement betalen en uzelf aan Adobe binden.
Mijn voornaamste zorg bij elke streamingdienst is dat u volledig afhankelijk bent van de prestaties van een derde partij. Als hun server uitvalt, neemt ook een substantieel deel van uw branding.
Zoals met zoveel dingen, is het antwoord: het hangt af van uw project. Maar er zijn enkele beslissingen die we kunnen nemen op basis van onze Garamond-test:
Het stapelen van lettertypen is een gratis back-up, het biedt een on-brand oplossing als lettertypebestanden verloren gaan of streaming-services trager worden. Het moet altijd op elke site worden geïmplementeerd, maar erop vertrouwen, zelfs voor iets dat zo gewoon is als Garamond potentieel gevaarlijk is.
Als het lettertype dat u zoekt beschikbaar is om gratis te streamen, hetzij via Google Fonts, of bijvoorbeeld als u een Creative Cloud-abonnement hebt, dan is dit een goede keuze. Aangezien ik een Creative Cloud-abonnement heb, zou ik op deze route worden verleid, hoewel het ontbreken van echte subsetting een punt van zorg zou zijn.
Als u over het budget beschikt, is het zelf selecteren van een professioneel webadres de beste keuze. De relatief bescheiden kosten - in vergelijking met stock fotografie - worden gemakkelijk gerechtvaardigd door de enorme supersnelle subsetprestaties.
In een industrie waarin we JavaScript-bestanden verkleinen om een paar Kb op te slaan, is het scheren van honderden keren dat hoeveelheid uit een enkel bestand een no-brainer.
Uitgelichte afbeelding / thumbnail, afbeelding downloaden via Shutterstock.