Republic / Artiklar /

Artikeln uppdaterad 2021-04-14.
Skriven av Christofer Sandin.

Typografi på webben

När man des­ig­nar för webben så använ­der man stil­mal­lar (CSS) för att bestäm­ma vil­ka typ­snitt som skall använ­das. Det­ta funger­ar unge­fär som en stil­mall i Inde­sign eller Word. Den sto­ra skill­naden mel­lan att exportera en typografer­ad PDF och att visa upp en webb­si­da är att man bara kan använ­da typ­snitt som finns på den datorn som vis­ar upp webb­si­dan medan en PDF kan baka in typ­snittsin­for­ma­tio­nen i dokumentet.

Det­ta har gjort att man under mån­ga år var begrän­sad till att använ­da något av de typ­snitt som man vis­ste fanns installer­ade på alla dator­er för att kun­na förut­sä­ga hur resul­tatet skulle bli. Sedan en tid till­ba­ka kan man däre­mot använ­da en rad oli­ka typ­snitt även på webben.

De klas­siska webb­säkra typsnitten

Lis­tan med typ­snitt är gan­s­ka kort och innehåller typ­snitt som mån­ga av er säk­ert kän­ner igen från oli­ka ställen:

  • Ari­al
  • Ver­dana
  • Couri­er
  • Geor­gia
  • Times New Roman
  • Ver­dana

Det­ta var länge en av de all­ra störs­ta skill­nader­na mot att job­ba med analo­ga media där man alltid haft tusen­tals typ­snitt att väl­ja mel­lan och där man kun­nat spela med stor­lekar, kern­ing och vik­ter i mån­ga år. 

Oli­ka metoder för att använ­da andra typsnitt

För att kom­ma runt prob­lemet har det under åren hit­tats på en rad med oli­ka tekniker för att kom­ma runt detta.

Alla rubrik­er (och i viss mån även bröd­text) gjordes som bilder i Pho­to­shop. Den här meto­den ger estis­tiskt bra resul­tat men det krävs en mas­sa manuellt arbete och det går inte att mark­era tex­ten för att exem­pelvis kopiera den. Det är ock­så långt ifrån opti­malt för sök­mo­tor­er som skall index­era materialet.

Det togs fram oli­ka tekniker för att gener­era rubrik­er (anti­n­gen som bilder eller i Flash från rubrik­tex­ten) och sedan byta ut tex­tern när sidan lad­dades. Det­ta var ett bra steg på vägen, men krävde att enheten hade stöd för anti­n­gen Flash eller Javascript och kunde i vis­sa fall även leda till en så kallad Flash of Unstyled Con­tent.

Om ni är intresser­ade av lite webb­his­torik kan ni kol­la upp föl­jande tekniker:

  • Fahrn­er Image Replacement
  • sIFR
  • Cufón

Speciel­la typ­snitts­fil­er. Redan 1997 så lanser­ade Microsoft något som het­er Microsoft Web Embed­ding Fonts Tool (WEFT) som ska­pade typ­snitts­fil­er i for­matet EOT. Pro­gram­met gjorde det möjligt att använ­da spe­cial­la typ­snitt i Inter­net Explor­er, men det­ta funger­ade allt­så endast i IE.

Vis­sa av metoder­na ovan är bät­tre än andra, men alla har även sina nack­de­lar. Som tur är går tekniken framåt och idag är vi på god väg mot att kun­na job­ba med sam­ma typografiska möj­ligheter som vi haft i den analo­ga världen sedan länge… 

Typ­snitt som en webbtjänst

Sedan ett par år till­ba­ka har det var­it tekniskt möjligt att län­ka in typ­snittts­fil­er via CSS för att visa upp andra typ­snitt än de som är installer­ade på den dator som används för tillfäl­let. Däre­mot var det inte för­rän gan­s­ka nyli­gen som det blev möjligt ur licenssyn­punkt att använ­da kvalitet­styp­snitt på sam­ma sätt. 

Först och främst var det tack vare web­baser­ade tjän­ster som Type­kit och Font­Deck som ager­ar som en mel­lan­hand mel­lan typ­snitts­bo­la­gen och webb­si­dor­na. Det­ta innebär att exem­pelvis Type­kit har ett av tal med typ­snittstil­lverkaren och sedan erb­jud­er deras typ­snitt till alla webbpro­du­cen­ter via en abon­ne­mangs­form, du prenu­mer­erar helt enkelt på typ­snitt till din webbplats.

Den störs­ta skill­naden är ock­så att i de fles­ta fall så lig­ger inte typ­snitts­filen på din serv­er utan det är något som lad­das direkt från Type­kit för att kom­ma runt pri­atkopier­ing och licensproblem.

Några typ­snittstjän­ster för webbtypsnitt:

  • Type­kit, nu upp­köpt av Adobe (lad­dar typ­snitt mha både JavaScript och CSS)
  • Font­deck (lad­dar typ­snitt genom endast CSS)
  • Fonts​.com by Mono­type Imaging
  • Google Web Fonts (lad­dar typ­snitt genom CSS eller JavaScript)

Typ­snitts­for­mat för framtiden

Det finns även ett nytt for­mat som het­er Web Open Font For­mat (WOFF) och som är ett öppet for­mat för webb­typ­snitt. Det finns en del typ­snitts­bo­lag som redan nu erb­jud­er sina typ­snitt som WOFF, men både web­bläsarstöd och utbud är fort­farande gan­s­ka magert. WOFF kan även innehål­la meta­da­ta om typ­snit­tet så att det kan anpas­sas för skärm.

Däre­mot är det­ta något som säk­ert kom­mer få stort genom­slag under den kom­mande tiden då det­ta gör det möjligt att både köpa loss rik­tigt bra typ­snitt som är anpas­sade för skärm från ser­iösa tillverkare och ha alla fil­er på en egen serv­er (och därigenom då ta bort tred­jeparts­beroen­det). WOFF har allt­så inbyg­gd licen­shanter­ing så att säga, så även om du lad­dar hem typ­snitts­filen så funger­ar den bara på den webb­plat­sen som den är licen­sier­ad för.

Rent tekniskt så är en font i WOFF en True­Type eller Open­Type font paketer­ad i ett kom­primer­at format.

En av de typ­snittstil­lverkare som legat långt fram länge vad det gäller WOFF är Font Shop som har mån­ga webb­typ­snitt i sin kat­a­log men även lanser­at typ­snitt speciellt gjor­da för mobil­skär­mar med en licens­mod­ell som gör det möjligt att använ­da typ­snit­ten i appar som dis­tribueras via App Store och lik­nande scenarios.

Fritt fram?

Njea, det finns fort­farande ett par oli­ka fak­tor­er som gör att det inte går att blan­da hur mån­ga oli­ka typ­snitt som helst på sam­ma sida. Den störs­ta anled­nin­gen är pre­stan­da, både vad det gäller laddningstider och hur snabbt sidan ritas upp.

Var­je typ­snitt som inklud­eras måste lad­das hem till web­bläsaren innan det kan använ­das, pré­cis som var­je bild måste lad­das hem innan den kan visas upp i sin hel­het. Fler typ­snitt ger allt­så län­gre laddningstider och segare webbsidor.

Äldre dator­er kan ock­så ha pre­standaprob­lem vad det gäller att köra myck­et JavaScript på en gång och lad­dar man en mas­sa typ­snitts­fil­er via JavaScript så kan det påver­ka den tota­la pre­stan­dan på webb­plat­sen. Så, pré­cis som men så myck­et annat, är det alltid en avvägn­ing mel­lan utseende och pre­stan­da där man kom­mer långt med sunt för­nuft (och genom att tes­ta resul­tatet i oli­ka webbläsare).

“Ver­tikal rytm”

Det är gan­s­ka van­ligt att man använ­der en gemen­sam baslin­je när man job­bar med typografi, så att rubrik­er, kolum­n­er och tabeller alla håller sam­ma baslin­je. (En rubrik kanske läg­ger beslag på 1,5 rad­er bröd­text och har 0,5 rad­er mar­gin­al så att rubrik­er och bröd­tex­ten alltid ham­nar på sam­ma baslinje).

Det­ta går även att åstad­kom­ma på webben, även om det ställer lite högra krav på både design­er och utveck­lare. Det­ta tror jag per­son­li­gen är sak­er som kom­mer spela allt större roll ju mer vi läs­er på skär­men då det är något vi är vana vid från böck­er och tidningar.

Effek­ter

Det finns så kallade JavaScript-lös­ningar som gör det möjligt att gan­s­ka enkelt kon­trollera mån­ga oli­ka typer av effek­ter på typ­snit­ten. Den mest kän­da är troli­gen lettering.js som är en plug-in för jQuery.

Förhöjd läsup­plevelse

Det finns även tjän­ster som förhö­jer läsup­plevelsen på webben genom att ta innehål­let på sajten och visa upp det i en min­i­mal­is­tisk vy med stort fokus på typografi och avsak­nad av reklam och andra störande ele­ment. Kol­la in Instapa­per och Read­abil­i­ty för två bra exem­pel. (Båda finns även som app för en skönare läsup­plevelse på din iPhone eller iPad.)

E‑böcker och tidningar

Föru­tom dessa tjän­ster sat­sas det stort på oli­ka typer av e‑böcker, mag­a­sin och tid­ningar just nu.

I USA har Ama­zon släppt en läs­plat­ta som het­er Kin­dle och som helt enkelt är en dig­i­tal plat­ta som kan visa upp oli­ka e‑böcker som man köpt på Ama​zon​.com. Den sto­ra förde­len med Kin­dle jäm­fört med exem­pelvis en iPad är att skär­men är matt, vilket bety­der att den upplevs myck­et mer likt en pap­pers­bok och funger­ar myck­et bät­tre att läsa på i solljus.

Mag­a­sin och inter­ak­ti­va tid­ningar på iPad och Android-plat­tor är ock­så något som skju­tit i höj­den på sis­tone. Kol­la exem­pelvis in tidgnin­gen Wired på iPad för ett bra exem­pel på hur man kan kom­bin­era ett mag­a­sin och inter­ak­ti­va kom­po­nen­ter som ett kom­ple­ment till papperstidningen.

Tips

Kol­la hur det typ­snit­tet som du valt ser ut i oli­ka stor­lekar i oli­ka web­bläsare, det kan vara väldigt stor skill­nad på 12px och 13px i exem­pelvis Inter­net Explor­er 8 — så det kan vara värt att dubbelkol­la och labor­era lite med oli­ka stor­lekar för att få fram bäs­ta tänkbara resultat.

Det är skill­nad på ett typ­snitt i webb­for­mat och ett typ­snitt som är anpas­sat för webben. De mest läm­pade typ­snit­ten är omgjor­da för att se extra bra ut på skär­mar, och dessa är givetvis att före­dra om möj­ligheten finns jäm­fört med ett typ­snitt som bara är omkon­vert­er­at till webbformat.

Länkar

His­torik

Typ­snittslever­an­tör­er

Andra tjän­ster och lite inspiration

Relaterade artiklar