Typografie op het web is een lastig onderwerp omdat het gebruik van lettertypen om allerlei redenen enorm beperkt is. Onmogelijk is het gebruik van afwijkende fonts echter niet. Zo blijkt Typekit een redelijk eenvoudige manier om een website van fraaie lettertypen te voorzien.
De eenvoudigste manier om speciale lettertypen op een website te gebruiken, is om ze op de webserver te plaatsen. Helaas zijn hiervoor dure licenties nodig. Het Amerikaanse bedrijf Small Batch heeft een elegante manier gevonden om dit probleem te omzeilen. Op strategische punten op alle continenten staan krachtige servers met daarop een indrukwekkende hoeveelheid lettertypen. Als een website gebruikmaakt van de fonts van Typekit, leveren deze servers een link naar de lettertypen op het moment dat iemand die website bezoekt. De fonts zelf blijven dus gewoon bij de vestigingen van Small Batch staan. De eigenaar van de website hoeft ze daarom niet in licentie te nemen.
Tot zover het theoretische gedeelte van Typekit. De praktijk begint minstens zo eenvoudig met het aanmaken van een account op de site van Typekit door e-mailadres en wachtwoord op te geven. Hierna kun je direct aan de slag. Er zijn vier soorten accounts. De gratis account biedt de mogelijkheid om op één websites twee fonts te gebruiken en de site mag niet meer dan 25.000 pageviews per maand hebben. Ook is het aantal fonts dat gebruikt mag worden redelijk klein. Te beperkt voor het echte werk, maar meer dan voldoende voor het testen van Typekit. De drie overige accounts zijn overigens alleszins redelijk geprijsd. Het overgrote deel der bloggers kan voor 24 dollar per jaar 2 websites en voor iedere website 5 lettertypen gebruiken, twee keer zoveel pageviews trekken en heeft een ruimere keuze uit fonts. De meest verwende grootverbruiker betaalt 99 dollar per jaar. Small Batch is dus zeker geen geldwolf.
Als de account is aangemaakt, is opgeven van het internetadres van de website voldoende om van Typekit twee regels javascript te krijgen. Deze code zorgt ervoor dat de website contact onderhoudt met de servers van Typekit om de fonts te laten zien wanneer iemand de website bezoekt. De code moet in de ‘header’ worden geplaatst van de webpagina’s. Dat kan handmatig, maar het is ook mogelijk om hiervoor een plug-in te gebruiken zoals ‘Typekit Fonts’ voor WordPress. Het handige van deze oplossing is dat je niet langs alle templates hoeft om deze te voorzien van de code.
Stap twee is het uitzoeken van een lettertype. Dat is een feest op zich. De lettertypen zijn ingedeeld in bekende categorieën als schreefloos, met schreef, script en decoratief. Van alle fonts is een voorvertoning te zien en het is bovendien mogelijk om een eigen tekst te gebruiken voor de voorvertoning, te spelen met de corpsgrootte, gewicht, enzovoort. Echt heel goed.
Als je het juiste lettertype eenmaal hebt gevonden, voeg je het toe aan de account en opent de website de Typekit Editor. De belangrijkste functie van de editor is dat je kunt instellen dat de website niet alle familieleden van het lettertype nodig heeft. Wie zeker weet dat hij alleen de vette en normale varianten van een font gaat gebruiken, schakelt de andere varianten gewoon uit. Dat kan soms de helft of meer van de bestandsgrootte schelen en dat bevordert de laadsnelheid van de website natuurlijk weer. Wanneer alles goed is ingesteld, brengt Typekit al zijn servers op de hoogte van het lettertype dat de nieuwe site gaat gebruiken.
Nog een belangrijke stap is te bepalen waar de lettertypen zichtbaar moeten zijn. Twee logische keuzes zijn de titel van de website en de koppen van de artikelen, al staat het iedereen vrij om de fonts op iedere andere plek in te zetten natuurlijk. Ook hier heeft iedereen de keuze de stylesheets (css) handmatig aan te passen, of hiervoor een plug-in te gebruiken. Laatstgenoemde optie lijkt handig voor leken, maar helaas voor hen blijft enige basale kennis van css noodzakelijk. De koppen op deze website bijvoorbeeld bevatten de h2-tag, maar dat geldt voor nog veel meer objecten op de site. De koppen van de widgets in de rechterkolom zijn voorzien van de h2-tag, maar ook diverse koppen in de footer van de site.
Speur daarom eerst naar de exacte css-code voor het object dat in het Typekit-font getoond moet worden. Een plug-in als ‘WebDeveloper’ voor Firefox is hiervoor heel geschikt. Pas de stylesheet vervolgens zo aan dat niet de standaard attributen van de h2-tag op die plek komen te staan, maar die van het Typekit-lettertype. Op deze website is dat de volgende code:
.post-content h2 {
font-family: “orbitron-1″,”orbitron-2″,sans-serif;
font-size: 22px;
}
Ook hier is het mogelijk de stylesheet handmatig aan te passen, of hiervoor een plug-in te gebruiken. Het voordeel van de plug-in is dat alles vanuit een centrale plek aangepast kan worden.
Tot slot nog enkele praktische opmerkingen. Typekit doet het tot nu toe goed op Safari en Firefox op de Mac, Firefox op de pc vindt het ook allemaal best wat Typekit met de koppen op de site uitspookt, maar Safari op mijn iPhone ging ervan over zijn nek. Typekit lijkt het in eerste instantie gewoon te doen op de iPhone, soms komen de fonts na een tijdje ook in beeld, maar uiteindelijk klapt Safari eruit. Dat is jammer natuurlijk. Al met al lijkt Typekit een heel praktische en bruikbare manier te zijn om websites te voorzien van speciale lettertypen tegen een alleszins redelijke prijs. Hier gaan we vast meer van horen.
Misschien is deze site inmiddels in originele staat hersteld. Om toch een idee te krijgen van de mogelijkheden van Typekit, is dit artikel voorzien van vier afbeeldingen. De eerste is het originele ontwerp, de overige drie met de koppen in andere lettertypen gezet. Het zijn alle drie schermafbeeldingen van een echt werkende situatie.
Reacties