Skriften på nettet - font embedding

Fontembedding giver for omkring blot 5-10 k mulighed for at få typografisk identitet til en hel website – omend med lidt besvær.
Frustrationerne over at mangle typografiske værktøjer til webdesign er formentlig velkendt. Hvordan laver man typografi i grafisk forstand til websider. Cascading stylesheets giver en vis typografisk styring blandt andet ved at kunne definere vilkårlig skriftstørrelse, linieafstand og spatiering. Men trods cascading stylesheets mange kvaliteter løser det ikke problemet med de manglende fonte.
Skriftvalget er begrænset til hvad man kan regne med der i forvejen er installeret på brugerens computer for eksempel Arial, Helvetica, Verdana, Times og Georgia. Nogle af dem er endog meget læsbare på skærmen og dermed meget anvendelige til webdesign. Andre kan være at foretrække fordi brugerne kender krusedullerne i forvejen og derfor kan læse dem. Men det er altså svært at opnå en særegen typografisk identitet med så lille et udvalg.
Man skal imidlertid ikke bevæge sig meget rundt på nettet for at opfange at der findes mange vellykkede typografier på nettet. Det er typisk logotyper, overskrifter, menupunkter og nogle gange endda hele sider som er blevet lavet om til billeder. Den umiddelbare fordel er at man får styr på sidens proportioner (i hvert fald tilsyneladende), og især at man ikke er afhængig af fonten findes på modtagerens computer. Og så kan man lave grafik, typografisk grafik som man kender fra magasiner og reklamer. Ulemperne har vi vænnet os til i en årrække, men de burde imidlertid ikke være sådan lige til at se bort fra:

	Dårlig printkvalitet
	Teksten kan vanskeligt redigeres
	Teksten kan ikke skaleres

Og så er der jo lige det der med hvor meget grafik fylder som bitmap, men det er (også) en helt anden diskussion.
Løsningen på disse problemer er at bruge vektorbaserede fontbeskrivelser i stedet for bitmap format i billeder. Og så bruge et format som lader teksten være tekst – omend ikke nødvendigvis redigerbar direkte i HTML, men i hvert fald i en teksteditor. Med dagens standarder vil dette være enten grafik i SVG-formatet (scalable vector graphics) eller embeddede fonte.
Den væsentligste tekniske indvending mod SVG er at det kræver plug-in til browseren og dermed bundet til den usmidige »bounding box« . Hvis man vil vide mere om SVG-formatet, er Adobe’s website et godt sted at starte.
Font-embedding kan man derimod bruge umiddelbart. Eller rettere: de nyeste browsere kan forstå og vise embeddede fonte. Man skal blot acceptere at ældre browsere ikke viser de rigtige fonte, eller at brugerne kan have slået »allow page to specify fonts« fra. Disse vil stadig kunne se og læse teksten, men blot ikke i sin rigtige indpakning.

ufReguleBold embedding
	If necessary, get the SVG-viewer:
Tre muligheder for at få fonte ud til modtagerens computer: Der er ikke meget forskel i filstørrelsen når dette billede laves som enten bitmap (her: gif), vektorgrafik (svg) eller fontembedding (som også er vektorbaseret). Men gif-filen tåler dårligt at blive printet eller forstørret – faktisk kan den ikke forstørres i browseren. Font embedding filen kan bruges til al tekst på en hel website og skal kun downloades en gang til browserens cache. Teksten er – som en hvilken som helst HTML tekst – til at redigere i ens sædvanlige HTML-editor. SVG-filen kan åbnes i en tekst-editor og umiddelbart rettes. Selve fontbeskrivelsen bør man nok holde sig fra, men de øvrige parametre er nemmere at gennemskue, og i hvert fald den konkrete tekst er hurtigt rettet (under forudsætning af at tegnbeskrivelserne til rettelsen er embeddede i filen). Tag et kik på SVG-koden her.

Med et lille program skrives fontspecifikationerne, blandt andet de enkelte tegns vektorkurver, ned i en fil som HTML- eller stylesheet dokumentet kan linke til. Fontfilens størrelse afhænger af skriftdesignet og hvor mange tegn der skal med i filen. Et enkelt skrift-design vil med de ca 100 gængse tegn (store og små bogstaver, tal og tegn) komme til at fylde 5-8 kilobytes. Og det er jo ikke meget for at lave typografisk identitet til en hel website.
Desværre er det typisk for nettet at plages af konkurrerende standarder. I dag findes der ingen teknologi, der dækker hele markedet. Nærmest er Bitstreams PFR-format (portable font resource), og programmet hertil, , er nok også nemmest at bruge. Formatet kan bruges på Windows både i Explorer og Netscape, men for eksempel ikke til Explorer til Macintosh. Microsofts program laver et EOT-format (embedded open type), som kun kan vises i Explorer, men til gengæld både på Windows og Macintosh.

Eot-filen bruges af Microsoft Internet Explorer (th), pfr-filen i Netscape Navigator (tv). Explorer til Windows kan også bringes til at forstå pfr-filen, men eftersom blandt andet antialiaseringen af teksten er bedre i eot-filen, vil man nok foretrække at denne vises i Explorer på begge platforme.

Og så kunne det se ud som om vi har den gammelkendte ballade med at skulle lave browserafhængige versioner af websiderne. Så galt står det ikke til. Hvis du hører til typen der absolut vil have tingene adskilt, kan det sagtens gøres. På dynamiske websites kaldes siderne i forvejen af forespørgsler (queries) der blot kan udvides med oplysninger om browsertypen. Og på statiske sider kan det klares med et javascript.
Men det er strengt taget ikke nødvendigt, fordi man godt kan linke til begge slags font-filer i samme dokument. Browseren ignorerer nemlig de koder som den ikke forstår, så der er egentlig ingen grund til at benytte sig af den Active-X komponent der får Explorer til Windows til at forstå PFR-filerne. Eneste krav er at fonten hedder det samme inden i de to font-filer. Og det kan godt være et problem hvis man har Webfontmaker til Macintosh og WEFT som kun findes til Windows, fordi navngivningskonventionerne er forskellige. Det er mere alvorligt at man naturligvis selv skal have fontene installeret på computeren, også til Windows, for at kunne generere pfr- og eot-filerne – det er næppe de standardinstallerede fonte som man vil bruge til font-embedding. For ikke at skulle købe fonte til begge platforme, kan man bruge konverteringsprogrammet TransType fra FontLab til 50 US$ (og så skal jeg undlade at komme ind på licensproblematikken).

<html> <head> <link rel=fontdef src="thefont.pfr"> <style type="text/css"> @font-face { font-family: thefont; font-style: normal; font-weight: normal; src: url("thefont.eot") } p { font-family: thefont, verdana, sans serif; font-size: 11px; line-height: 15px; color: black; } </style> </head> <body> <p> This text is set with the font "thefont". </p> </body> </html>

The code you need in your HTML document to have the font »thefont« embedded. The red codes are what you need for the pfr-file and eot-file respectively. The grey code is the needed CSS, to make the <p> tagged text appear with the font (in this case black, 11px/15px thefont). No need to write this down. Get the HTML-source here.