Share
In dit artikel zullen we een paar van de meest populaire weblettertypediensten bekijken, waarbij we de functies onderling vergelijken en praten over enkele van de rode vlaggen die betrokken zijn bij het werken met echte lettertypen op het web..
We zijn een geluksbrenger, wij webontwerpers van het heden. De webontwerpers van weleer hebben lang worstelden met een frustrerend kleine selectie van lettertypen - de webveilige systeemlettertypen die werden getest en getest voor gebruik op het scherm. Je kent hun namen. Georgia, Times New Roman, Arial, Verdana - bijna allemaal sturen ze een lichte rilling door onze ruggengraat.
Maar nu niet meer. Het weblettertype is hier! CSS3 heeft echte weblettertypen naar onze hulpprogramma-riem gebracht, met de kracht van @ font-face. Maar met deze nieuwe technologie komt een overweldigende verantwoordelijkheid - de hoofdpijn die een licentie voor lettertypen voor gebruik op het web. Meer en meer gieterijen leveren lettertypen met een licentie voor online gebruik, maar vervolgens hosten ze de lettertypen zelf en zorgen ze ervoor dat compatibiliteit tussen apparaten en browsers op zichzelf een wereld van pijn is.
Dat is waar weblettertyperservices binnenkomen. Zij verwerken het grootste deel van het licentie- en hostingwerk en laten u doen waar u goed in bent - bouw fantastische en mooie websites.
Ik zal het hier hebben over drie van de meest populaire weblettertypediensten. Namelijk, Typekit
Fontdeck
en Google Web Fonts.
Al deze services hosten uw lettertypen op hun eigen servers en beheren alle bijbehorende onzin-licenties - zodat u zonder zorgen kunt pluggen en spelen.
Deze services gebruiken niet allemaal dezelfde techniek voor het insluiten van lettertypen. Met Fontdeck en Google Web Fonts kunt u beide een tag gebruiken om de lettertypen rechtstreeks te pakken om ze op uw site te gebruiken, terwijl Typekit een andere aanpak heeft. Typekit vereist dat u een JavaScript-fragment opneemt in uw site die bij de uitvoering de nodige middelen voor u grijpt.
Het gebruik van een tag heeft een aantal duidelijke voordelen. Om te beginnen vereist deze methode niet dat de gebruiker JavaScript heeft ingeschakeld. Bovendien zal het script dat de Typekit-code genereert resulteren in minstens 2 extra http-verzoeken - één voor een ander script en een seconde voor het CSS-bestand dat door dat script wordt gegrepen. Dit is iets waar Fontdeck en Google niet doorheen hoeven te lijden.
Typekit heeft echter één belangrijk voordeel door een script te gebruiken in plaats van gewone oude CSS - de wf- * klassen.
Accentsconagua
wf- * klassenWanneer uw site lettertypen van de servers van Typekit via hun JavaScript-code opvraagt, gebeurt er iets wonderbaarlijks: het script voegt klassen toe aan het html-element van uw site, afhankelijk van de status van het verzoek om lettertypen.
De klassen zijn wf-loading, wf-actief, en wf-inactief. Wat betekent dit voor ons? Welnu, deze klassen kunnen ons helpen om FOUT te voorkomen - de flits van niet-gestileerde tekst die wordt weergegeven terwijl onze weblettertypen worden geladen. Door onze pagina's op de juiste manier in te delen wanneer de lettertypen worden geladen, kunnen we het schokkende effect voorkomen dat FOUT voor onze gebruiker kan hebben. Bekijk deze pagina voor een voorbeeld - terwijl de lettertypen worden geladen, wordt een klasse van wf-laden op de html-tag toegepast.
Met CSS kunnen we alle inhoud verbergen en een laadanimatie weergeven om de gebruiker duidelijk te maken dat er iets aan de hand is. Zodra de lettertypen klaar zijn met laden, kunnen we geleidelijk onze inhoud weer zichtbaar maken. Met Google Web Fonts kunt u ook een script gebruiken als u van het voordeel van deze klassen wilt genieten. In feite was het script achter deze klassen een samenwerking tussen Google en Typekit.
Elk van deze services hanteert een ander prijsmodel. Google Web Fonts is helemaal gratis. U kunt de lettertypen zelfs downloaden voor lokaal gebruik op uw computers, wat handig is als u consistente merknamen probeert op te bouwen met typografie.
Typekit heeft verschillende prijsniveaus, variërend van een gratis abonnement tot $ 99 per jaar. Het gratis abonnement heeft een beperkt aantal lettertypen, is toegestaan op slechts één website en vereist dat u een Typekit-badge op uw website weergeeft. Met alle betaalde abonnementen kunt u deze badge verwijderen en kunt u meer websites maken en meer lettertypen gebruiken naarmate u meer betaalt. Raadpleeg hun website voor meer informatie over hun tariefplannen.
Fontdeck hanteert een andere prijsmethode. Ze rekenen per lettertype, met lettertypen (op het moment van schrijven), variërend in prijs van $ 2,50 per jaar, maar kosten doorgaans ongeveer $ 7,50 per jaar.
Een belangrijk punt van zorg bij het gebruik van weblettertypen is hoe ze verschijnen op de grote verscheidenheid aan apparaten, browsers en platforms. Helaas is er geen manier om ervoor te zorgen dat onze websites er op het ene apparaat precies hetzelfde uitzien als op het andere, maar we weten dat dat oké is. Toch kunnen we geruststellen hoe goed de lettertypen zullen worden weergegeven.
Gelukkig weten onze weblettertype-services dat dit een groot probleem is. Ze bieden allemaal screenshots van hoe het lettertype wordt weergegeven in alle populaire browsers, waaronder IE6 en hoger, Google Chrome, Safari, Firefox en Opera. Over het algemeen worden weblettertypen in alle gevallen prima weergegeven. Sommige lichtere gezichten kunnen gekarteld in Windows verschijnen, maar dat is slechts een kwestie van de Windows-engine voor het renderen van lettertypen - niet veel wat we daar kunnen doen.
Een ding om op te letten bij het gebruik van weblettertypen op uw sites is de CSS-functie voor het renderen van tekst. Met deze eigenschap kunt u OpenType-functies gebruiken, zoals ligaturen en afspatiëring, maar voor hoge kosten. In WebKit-browsers op Linux-distributies, en in Chrome op Windows met sommige lettertypen, kan het gebruik van deze eigenschap tot enkele vreemde bijwerkingen leiden bij het verwerken van inline-tekstelementen.
Met dit in gedachten is het waarschijnlijk een goed idee om dit (momenteel experimentele) eigendom weg te sturen. Plus van de goede kant, Firefox implementeert niet alleen de eigenschap correct, maar heeft ook ligaturen en kerning standaard ingeschakeld.
We zijn dus op de hoogte van de verschillende services en de verschillen tussen hoe ze werken, evenals enkele van de rode vlaggen die betrokken zijn bij het gebruik van weblettertypen op onze sites - maar hoe kunnen we er daadwerkelijk mee beginnen??
Een bijzonder handig hulpmiddel om uw handen vuil te maken met weblettertypen is Typecast.
Met Typecast kunt u alle weblettertypen uit al deze services testen in een real-webomgeving, waar u ook aangepaste CSS kunt toevoegen, breedten kunt definiëren voor elementen - de hele set en caboodle. De CSS die Typecast produceert voor gebruik op uw eigen site is minder dan wenselijk: tekengrootten, regelhoogten en marges ingesteld in pixels, niet in ems. Maar het is nog steeds een ongelooflijk handig hulpmiddel om te zien hoe deze lettertypen eruitzien op het echte internet.
Als je merkt dat je geen inspiratie hebt voor het gebruik van weblettertypen, staat de Typekit-blog altijd vol met inspirerende sites, evenals een aantal fascinerende inzichten in de technologie achter weblettertypen. Er zijn ook websites zoals de Lost World's Fairs, Just My Type (van de jouwe) en Good Web Fonts waar je de ware kracht en schoonheid van echte lettertypen op het web kunt zien. De website van Elliot Jay Stocks is altijd een echt inspirerende website die weblettertypen ook weergeeft. (Je zou kunnen vertellen - ik ben dol op dit spul.)
Als het gaat om het daadwerkelijk gebruiken van de services, kunnen ze niet eenvoudiger zijn. Google Web Fonts is heel gewoon plug and play - vind een lettertype dat je leuk vindt, klik op 'snel gebruik' en selecteer vervolgens de lettertypen en variaties die je nodig hebt. U krijgt een link die u kunt gebruiken in uw website of in uw CSS-bestand via @import, of een JavaScript-fragment dat u kunt gebruiken om te profiteren van de "wf- *" -klassen.
Met Fontdeck kunt u het lettertype testen op een paar computers voordat u het aanschaft voor een groot gebruik op uw website. Selecteer eenvoudig het gewenste lettertype en ze geven u een link die u op de websites kunt gebruiken. Test het op een paar computers door hun IP-adressen toe te voegen aan de site op Fontdeck. Koop het lettertype vervolgens voor onbeperkt gebruik zodra u tevreden bent..
Typekit heeft een gratis abonnement waarmee u een vrij uitgebreide bibliotheek met lettertypen gratis kunt gebruiken, op voorwaarde dat u een badge op uw site weergeeft die adverteert over het feit dat u Typekit gebruikt. Het is eigenlijk geen slecht uitziende kleine badge, maar als je het weg wilt, moet je een plan betalen.
Het Portfolioplan is ongelooflijk uitgebreid, met enkele beperkingen, en het is geprijsd voor een redelijke $ 49,99 per jaar, of als u Adobe Creative Cloud hebt, krijgt u het portfolioplan inbegrepen. Om Typekit op uw site te gebruiken, maakt u eenvoudig een "kit" - een verzameling lettertypen voor gebruik op domeinen die u opgeeft. Kopieer het javascript-fragment naar uw websites, voeg enkele lettertypen aan de set toe, selecteer de gewenste gewichten en variaties en klik vervolgens op 'publicatiekit'. Soms kunnen de servers van Typekit een tijdje duren om wijzigingen weer te geven, dus geef het een paar minuten voordat je je site vernieuwt.
Sinds juli 2012 biedt Typekit een verbeterde JavaScript-insluiting.
Deze nieuwe inbeddingsmethode verhoogt de prestaties, biedt protocol-relatieve URL's en optionele (officiële) asynchrone belasting. Met asynchroon laden kunnen lettertypen naar een pagina worden getrokken zonder dat de wachtrij voor andere items wordt geblokkeerd als zich problemen voordoen.
Met een beetje geluk ben je nu gewapend met genoeg informatie over weblettertypediensten om in te duiken en een besluit te nemen. Welke van deze systemen en functies heeft uw voorkeur? Heb je ervaring met een van de services? Advies en tips die u wilt delen? Laat het ons weten in de comments!
