Share
Bende met Arial? Moe van Times New Roman? Methodes voor het vervangen van lettertypen zijn de afgelopen 2 jaar enorm verbeterd, maar het kan vaak moeilijk zijn om de verschillende methoden uit te zoeken als u er niet voortdurend over leest. Dit artikel bespreekt verschillende technieken voor het vervangen van lettertypen die nu beschikbaar zijn.
Opnieuw gepubliceerde zelfstudieOm de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze zelfstudie is voor het eerst gepubliceerd in november 2010.
We zullen kijken naar de voors en tegens van elk, het probleem van lettertypelicenties en de beste fontbronnen op het web, zodat u ze kunt gaan gebruiken in uw eigen webontwerpen..
"Sinds het begin van het web zijn ontwerpers beperkt tot een beperkt aantal lettertypen"
De mogelijkheden van ontwerp op het web lijken elke dag groter te worden. De toepassing van technologieën zoals HTML5, CSS3 en Javascript heeft geresulteerd in veel opwindende en innovatieve websiteontwerpen. Het web lijkt een lange weg af te leggen sinds de dagen van de alleen-tekstbrowser. Desondanks is er één aspect van webdesign dat relatief stagneert.
Typografie en lettertypeselectie vormen een integraal onderdeel van elk arsenaal van ontwerpers om het uiterlijk en de 'feel' van een website te creëren. Helaas zijn ontwerpers sinds het begin van het web beperkt tot een beperkt aantal lettertypen. Helvetica, Arial en Georgia zijn drie van de weinige aantrekkelijke lettertypen (niet te vergeten Comic Sans) waar ontwerpers veilig op kunnen vertrouwen om voor de meeste internetgebruikers correct te worden weergegeven.
De traditionele methode voor ontwerpers om dergelijke beperkingen te omzeilen en creativiteit met lettertypen uit te drukken, is om tekst op te nemen in afbeeldingen - er zijn echter talloze nadelen aan deze methode. Verschillende toegankelijkheidsproblemen doen zich voor en de prestaties van de website worden ook nadelig beïnvloed door de langere laadtijden.
Dit artikel bespreekt verschillende spannende methoden om niet-standaard lettertypen op te nemen in uw webpagina's zonder afbeeldingen te gebruiken. We zullen kijken naar de voor- en nadelen van elke methode, de problemen rond het gebruik van lettertypen en wat deze technologie echt betekent voor webontwerpers.
Cuf? N is een ongelooflijk eenvoudige en effectieve methode voor het opnemen van niet-standaard lettertypen in een webpagina en een waarin de functionaliteit niet afhankelijk is van de talen aan de server of plug-ins. Cuf? N werkt alleen op enkele regels Javascript-code en gebruikt de combinatie van VML (Vector Mark-up Language) voor Internet Explorer en de Canvas-functie van HTML5 om de lettertypen weer te geven.
Cuf? N biedt op hun homepage een hulpprogramma voor het converteren van lettertypen waarmee u het door u gekozen lettertype naar SVG kunt converteren en een Javascript-bestand maakt dat u in uw HTML kunt gebruiken. Nettuts + redacteur Jeffrey Way heeft eerder een uitstekende stap-voor-stap tutorial geschreven over hoe je Cuf? N in je webpagina kunt integreren.
Cuf? N is een populaire keuze voor veel webontwerpers vanwege de vele voordelen en relatief weinig negatieven. Het niet vertrouwen op andere scriptingtalen of plug-ins betekent dat het toegankelijk is voor een zeer breed publiek en het wordt ook ondersteund door recente versies van alle belangrijke browsers, waaronder IE 9. U kunt CSS-styling ook direct toepassen op Cuf? N vervangen tekst, inclusief nieuwere CSS 3-functies, zoals verlopen. In termen van snelheid is het veel sneller dan sIFR en minder intensief, maar het moet nog steeds niet worden gebruikt voor grote hoeveelheden tekst.
Er zijn echter enkele minpunten voor Cuf? N. Het is nog steeds afhankelijk van Javascript om te functioneren, wat sommige webgebruikers mogelijk hebben uitgeschakeld. Teleurstellend Cuf? N vervangen tekst kan ook niet worden geselecteerd en daarom gekopieerd en geplakt.
Voors:
nadelen:
"@ font-face is in feite de ultieme oplossing voor lettertypen op het web."
@ font-face heeft waarschijnlijk de meeste aandacht gekregen van alle methoden voor het vervangen van lettertypen, maar daar is een zeer goede reden voor. @ font-face is in feite de ultieme oplossing voor lettertypen op het web en een waarin alle anderen hoopten te repliceren voordat het volledig werd gerealiseerd. @ font-face was eigenlijk opgenomen in de CSS2-specificatie, maar het heeft tot nu toe voor wijdverspreide acceptatie genomen.
@ font-face gebruikt geen andere webtechnologie dan CSS om aangepaste lettertypen op een webpagina te implementeren - dit betekent dat er geen afhankelijkheid meer is van Flash, PHP of zelfs Javascript. Het werkelijke type wordt gerenderd bij het gebruik van @ font-face, in plaats van vectorobjecten of afbeeldingen, en daarom kan de tekst worden geselecteerd, geschaald en gestyled met CSS.
Helaas, zoals het geval is met veel andere webgerelateerde problemen, zijn het vooral de browsers (samen met de licentiekwesties die we hieronder zullen bespreken) die de voortgang van @ font-face hebben belemmerd. Elk van de dominante browsers ondersteunt verschillende lettertypeformaten. Internet Explorer gebruikt .EOT (Embedded Open Type) terwijl recente versies van Firefox, Chrome, Safari en Opera allemaal .ttf (True Type Format) ondersteunen. Open Type Format wordt ook ondersteund door een combinatie van browsers en SVG (Scalable Vector Graphics) is nodig voor iPhone en de iPad. Het kan allemaal behoorlijk verwarrend zijn en soms kan het een heleboel mensen ervan weerhouden om het te gebruiken. Gelukkig is er echter licht aan de horizon. Web Open Font Format, of .WOFF, is ingesteld om het standaardformaat voor weblettertypen te worden en wordt momenteel gestandaardiseerd door de W3C. Firefox heeft het formaat sinds versie 3.6 ondersteund, Chrome sinds 5.0 en onlangs is aangekondigd dat Internet Explorer 9 ook het formaat ondersteunt. Laten we hopen dat Opera en Safari binnenkort lid worden van het feest.
Het enige andere kleine probleem met @ font-face is dat omdat het als feitelijk type wordt gepresenteerd, individuele browsers en besturingssystemen het allemaal iets anders zullen weergeven. Sommige weblettertypediensten, die we verder zullen bespreken, hebben tot doel deze kleine variaties te corrigeren met behulp van lettertypehints die de omtrek van het type in browsers afvlakken en een esthetischer type creëren.
Als u meer informatie wilt over het implementeren van @ font-face op uw website, heeft Jeffrey Way wederom een nuttige tutorial geleverd over hoe dit te doen.
Voors:
nadelen:
De volgende handvol oplossingen zijn gebaseerd op @ font-face om de goederen te leveren - elk van deze is min of meer een "service", wat betekent: ze gebruiken allemaal dezelfde basistechnologie, maar ze bieden verschillende lettertype-bibliotheken, licentie-opties en betalingsplannen; Ja, voor de meeste hiervan moet u betalen om ze te gebruiken, maar de kans is groot dat dit de weg van de toekomst is voor alle lettertypen op internet.
Lettertype Squirrel is op dit moment misschien wel de meest populaire bron voor het vervangen van lettertypen. Font Squirrel neemt eventuele zorgen over lettertypelicenties weg, omdat alle beschikbare lettertypen gratis beschikbaar zijn voor commerciële doeleinden. De site heeft honderden lettertypen waaruit je kunt kiezen, van sans-serif tot lettertypen met een nieuw lettertype.
Zoals hierboven besproken, om ervoor te zorgen dat @ font-face in alle browsers werkt, hebt u verschillende indelingen van het lettertype nodig en hiervoor heeft Font Squirrel een oplossing. De site biedt @ font-face kits die u alle formaten bieden die u nodig hebt en die ook de benodigde HTML en CSS bevat. Als u de @ font-face-kit niet kunt vinden voor het lettertype dat u wilt gebruiken, bieden ze ook een generator die uw lettertypebestand converteert naar de meerdere indelingen die u gratis nodig hebt. Wanneer u de generator gebruikt, moet u ervoor zorgen dat u over de juiste licentie beschikt waarmee u het lettertype op uw website kunt gebruiken.
Voors:
nadelen:
De lettertype-API van Google wordt gebruikt in combinatie met hun eigen lettertypemap waarin alle lettertypen open source zijn en beschikbaar zijn voor iedereen. De directory wordt voortdurend uitgebreid en groeit, momenteel zijn er meer dan 200 voorbeelden.
Het kan echt niet eenvoudiger zijn om lettertypen uit de directory op te nemen in uw website. U hoeft alleen het lettertype te selecteren dat u wilt gebruiken, de varianten van het gewenste lettertype te selecteren en Google geeft u de regel JavaScript-code die u nodig hebt. Pas uw CSS aan om het gebruikte lettertype te vermelden en u bent klaar om te gaan. Het is echt zo simpel!
Voors:
nadelen:
Typekit was een van de eerste abonnementsvormen voor weblettertypen en is nog steeds enorm populair. Typekit en andere soortgelijke diensten behandelen het probleem van lettertypelicenties door gebruikers toegang te geven tot een groot aantal aangepaste lettertypen tegen een jaarlijkse abonnementsprijs. Met deze methode kunnen lettergieterijen iets terug ontvangen voor hun harde werk en worden ook tegen piraterij van lettertypen beschermd, omdat alle lettertypen centraal worden gehost op de beschermde servers van Typekit. Gebruikers van de dienst hosten de lettertypen niet op hun eigen webruimte, maar linken er eenvoudigweg naar.
Typekit heeft samengewerkt met enkele van 's werelds grootste lettergieterijen om een breed en gevarieerd aanbod aan lettertypen te bieden. Typekit biedt u veel opties en controle over de lettertypen die u gebruikt. Selecteer verschillende lettertypevarianten, gewichten en glyphs om te gebruiken. U kunt ook CSS-stacks maken en fallback-lettertypen selecteren die u wilt gebruiken wanneer @ font-face niet wordt ondersteund. U moet ook de specifieke HTML-tags of CSS-klassen selecteren om het aangepaste lettertype toe te passen. Zodra u tevreden bent met de selecties die u hebt gemaakt, wordt er een stuk Javascript-code gegenereerd die u op uw site kunt gebruiken.
Een ander voordeel van Typekit is dat het gericht is op het beheersen van de verschillen in hoe verschillende browsers tekst en lettertypen behandelen met behulp van hints.
Typekit biedt verschillende prijspakketten aan voor verschillende behoeften. Er is een gratis pakket beschikbaar met twee lettertypen om te gebruiken in hun Trial Library op één website. De website is toegestaan tot 25.000 pageviews per maand en u moet ook de Typekit-badge op de site weergeven, die verwijst naar informatie over de lettertypen die u gebruikt. Aan de andere kant van de schaal bevindt zich het Performance-pakket dat u toegang geeft tot het volledige bereik van beschikbare lettertypen voor gebruik op een onbeperkt aantal websites zonder dat het aantal paginaweergaven wordt beperkt. De prestaties bieden al deze functies voor een jaarlijkse abonnementsprijs van? 99,99.
Voors:
nadelen:
De populaire fontbron fonts.com heeft ook een gespecialiseerde weblettertypedienst geïntroduceerd, die meer dan 8000 lettertypen bevat die u op uw websites kunt gebruiken. Net als bij Typekit is het een op abonnementen gebaseerde service, behalve dat deze maandelijks wordt geprijsd. In vergelijking met Typekit werkt het weliswaar duurder, maar er zijn veel minder beperkingen aan de lettertypen. Het gratis pakket vergelijkt zeer gunstig, waardoor je onbeperkte toegang hebt tot 8000 lettertypen die je kunt gebruiken op zoveel websites als je wilt. Met het Professional-pakket kunt u tot 50 lettertypen downloaden en op uw computer installeren om in uw ontwerpen te gebruiken.
Fonts.com Web Fonts heeft een aantal echt geweldige lettertypen als onderdeel van zijn collectie - zoals Helvetica, Univers en Franklin Gothic.
Voors:
nadelen:
Het gerenommeerde webontwerpbureau Clear Left, die hebben gewerkt voor enkele van 's werelds grootste bedrijven, hebben hun krachten gebundeld met OmniTI en Font Deck uitgebracht. Font Deck is een andere op abonnementen gebaseerde service, behalve dat u alleen een jaarlijkse vergoeding betaalt voor elk afzonderlijk lettertype dat u gebruikt, perfect voor degenen die slechts één of twee lettertypen willen gebruiken voor hun persoonlijke blog.
Prijzen van lettertypen beginnen bij $ 2,50 per jaar per domein en zijn ongelimiteerd aantal paginaweergaven toegestaan. De volledige lettertypekeuze is ook beschikbaar om gratis gedurende langere tijd te proberen, hoewel slechts twintig unieke IP-adressen deze kunnen bekijken. Dit gratis pakket is bedoeld om te compenseren voor het feit dat u lettertypen niet naar uw lokale computer kunt downloaden en ze tijdens de ontwerpfase kunt gebruiken. Omdat Font Deck slechts relatief nieuw is voor de scène, is de selectie van lettertypen om uit te kiezen momenteel niet erg groot.
Voors:
nadelen:
Lettertype Spring heeft een iets andere benadering dan de op abonnementen gebaseerde diensten en keert terug naar de traditionele manier om lettertypen te kopen. Lettertypen worden afzonderlijk gekocht en vereisen dat u ze downloadt en de lettertypen host op uw eigen webserver. Font Spring suggereert dat 99,9% van de beschikbare lettertypen kan worden gebruikt met @ font-face.
Elk afzonderlijk lettertype kan in prijs variëren en u moet een toeslag betalen voor de licentie om het lettertype te gebruiken met @ font-face. De licentie voor @ font-face omvat de desktop OpenType-versie van het lettertype en de verschillende indelingen die u nodig hebt om het op internet te gebruiken.
Het gebruik van deze methode heeft veel voordelen. Als u echt het hart hebt ingesteld op slechts één bepaald lettertype, is dit wellicht het goedkopere alternatief voor abonnementsdiensten. U kunt het lettertype op zoveel verschillende domeinen gebruiken als u wilt, als u er maar directe controle over hebt en er geen limiet is voor het aantal paginaweergaven.
Als een toegevoegde waarschuwing is het verboden om het lettertype te converteren of in te bedden met andere technologieën zoals sIFR of Cuf? N.
Voors:
nadelen:
Dit zijn slechts een paar van de beschikbare font-services, er zijn er nog veel meer, zoals Typotheque en Webtype. Elk heeft zijn eigen positieve en negatieve kanten en uw keuze moet gebaseerd zijn op uw persoonlijke behoeften. Sommigen kunnen genieten van het gebruiksgemak van een abonnementsservice, terwijl anderen misschien niet graag zien dat ze de controle over hun site aan een derde partij opgeven. Als dat laatste het geval is, bent u wellicht beter af met het downloaden en hosten van uw eigen weblettertypen met behulp van websites zoals Font Squirrel.
De volgende twee (sIFR en FLIR) zijn over het algemeen als "old school" omdat ze een groot aantal problemen hebben, maar ze zijn het waard om te bespreken en te weten over.
sIFR bestaat al een tijdje. Toen het voor het eerst uitkwam, bood het een effectieve methode om niet-standaard lettertypen op te nemen wanneer er echt geen andere optie dan afbeeldingen was. sIFR of Scalable Inman Flash Replacement gebruikt een combinatie van Flash en Javascript om tekst op webpagina's in een Flash-element te wijzigen. sIFR heeft veel voordelen, zoals de tekst die toegankelijk blijft voor schermlezers en die nog steeds kan worden geselecteerd.
De term 'schaalbaar' in de naam kan echter verwarring veroorzaken. sIFR is schaalbaar in die zin dat het Flash-element schalen tot het formaat van de originele browsertekst - dit staat hem toe om alle tekst weer te geven op de grootst mogelijke grootte binnen een gegeven dimensie. Tekst die is vervangen door een flitselement kan echter niet worden aangepast wanneer een gebruiker de grootte van de tekst op een pagina wijzigt; wat uiteraard een probleem met de toegankelijkheid veroorzaakt. sIFR vereist ook dat zowel Flash als Javascript op de computer van een gebruiker wordt ingeschakeld om te kunnen functioneren.
Mike Davidson, een van de makers van sIFR, erkent ook de beperkingen van de technologie. Mike heeft openlijk verklaard dat sIFR niet voor grote hoeveelheden tekst moet worden gebruikt, aangezien dit een merkbaar effect heeft op de prestaties van de website. Mike erkent ook dat zijn technologie niet de definitieve oplossing is voor typografie op het web en verwijst simpelweg naar een 'noodoplossing'.
Voors:
nadelen:
FLIR of Facelift Image Replacement is vergelijkbaar met sIFR, behalve dat het gebruik maakt van Javascript en PHP om afbeeldingen te genereren in plaats van Flash om tekst te vervangen. Deze methode heeft het duidelijke voordeel dat u geen tijd hoeft te besteden aan het maken van afzonderlijke afbeeldingen voor elk stuk tekst waarvoor u een aangepast lettertype wilt gebruiken. Als u besluit een ander lettertype of andere kleur voor uw tekst te gebruiken, is het ook veel gemakkelijker om de tekst op uw website bij te werken.
Helaas biedt het, naast het gebruiksgemak en het tijdbesparende aspect van FLIR, niet veel verbetering ten opzichte van de traditionele methode om tekst als afbeeldingen op te slaan. Het eindresultaat blijft nog steeds als tekst wordt weergegeven als een afbeelding waarin de tekst niet selecteerbaar of schaalbaar is.
Voors:
nadelen:
Het probleem met lettertypelicenties is een voortdurende en een die heeft bijgedragen aan de trage voortgang en acceptatie van methoden voor het vervangen van lettertypen. Net als bij afbeeldingen, hebt u toestemming van de auteur nodig in de vorm van een EULA (End User License Agreement) om een lettertype op uw website te gebruiken. Sommige licenties staan het gratis gebruik van het lettertype toe, zelfs voor commerciële doeleinden, terwijl anderen het alleen toestaan voor persoonlijk gebruik op een lokale computer.
Wanneer u een van de hierboven beschreven methoden voor het vervangen van lettertypen gebruikt, bent u effectief een lettertype aan het insluiten in uw website of een koppeling naar een die is geüpload naar uw webserver en dit is niet toegestaan door veel, zelfs gratis lettertypelicenties. De reden dat veel makers van lettertypen en gieterijen dit niet toestaan, is omdat het gebruikers van de site directe toegang tot het lettertypebestand biedt en zij zich zorgen maken dat hun lettertype illegaal kan worden gedownload en gedistribueerd. Door dit probleem konden veel videomakers hun lettertypen niet beschikbaar maken voor gebruik met methoden zoals @ font-face.
Het is daarom van cruciaal belang dat u bij het gebruik van een van de hierboven beschreven methoden absoluut zeker bent dat de lettertypelicentie dit toestaat.
Gelukkig heeft dit probleem de ontwikkeling van methoden voor het vervangen van lettertypen niet volledig belemmerd en zijn er veel bronnen beschikbaar om aangepaste lettertypen op uw website te gebruiken.
"Perfectie is niet de moeite waard om te wachten, als je dat doet, loop je kans op het missen van spannende nieuwe kansen"
We hebben hierboven veel besproken en het is duidelijk dat er veel opties beschikbaar zijn voor degenen die aangepaste lettertypen willen gebruiken in hun site-ontwerpen. Het goede nieuws is dat al deze methoden nu beschikbaar zijn om te gebruiken. Het is waar; geen van de methoden is perfect, elk heeft zijn eigen goede punten en slechte punten. @ font-face heeft duidelijk de meeste belofte, maar het zal waarschijnlijk nog een paar jaar duren voordat het absoluut bulletproof is. De waarheid is dat de situatie zelden perfect is in de wereld van webdesign, er zullen altijd compromissen en work-arounds zijn die nodig zijn om nieuwe technologieën te implementeren. Perfectie is niet de moeite waard om op te wachten, als je dat doet, loop je het risico nieuwe interessante kansen te missen.
Dit is echt een opwindende tijd voor webdesign, en er lijkt een groeiende waardering en begrip van typografie op het web te zijn. Methodes voor lettertypevervanging bieden een geweldige kans om innovatieve nieuwe ontwerpen te maken en ik geloof dat het niet de bedoeling is om deze technologie te misbruiken. Zorg altijd voor fallbacks voor wanneer er iets fout gaat en gebruik elke methode verstandig (verander niet alles in de tekst op uw site). Neem de tijd om te waarderen en te leren over geweldig type en het web zal er een betere plek voor zijn.
Heb je hier je eigen mening over? Heb je een vraag? Als we een van je favoriete methoden hebben gemist, kun je deze hieronder plaatsen in het gedeelte Opmerkingen en we zullen het zeker opnemen in dit bericht!
Accentsconagua