Typsnitt och typografi på webben

Typografi idag skiljer sig egentligen inte nämnvärt från Gutenbergs tid. Vi försöker fortfarande omsätta figurer på en platt yta till koncept i läsarens huvud.

Människans ögon och hjärna har inte förändrats på den korta tid som typografi har funnits. Så hur många tecken man bör högst ha per rad i en textmassa är de samma nu som då.

Varför använder vi så många olika typsnitt då? Jo, man vill ju förmedla identitet och ge ett visst intryck för läsaren, men man bör också välja typsnitt efter vad som är lättast att läsa i en given situation. Nyckeln är dock att inte använda för många olika typsnitt samtidigt. Max två, i värsta fall tre är en god tumregel. Särskilt på webben, då varje kilobyte räknas.

UI/UX

Ett juste typsnitt slår världen med häpnad, men är det rätt för just din webbsida? Även om du har rätt typsnitt, har du en god och konsekvent typografi?

Precis som med bra bilder så ger god typografi ett omedelbart intryck på besökaren. Tillsammans, i samverkan är de mäktiga! Men det är ju inte bara viktigt att det ska se snyggt ut, en lättläst webb drar in besökaren och underlättar för de med funktionshinder. Tänk alltid på storlekar, vikter och god kontrast mot bakgrunden.

Teknik

Responsiv typografi

Ett bra sätt för att säkra att textmassorna alltid har samma mängd tecken per rad är att göra typsnitten responsiva gentemot webbläsarfönstret. På så vis bevarar man typografin och upplevelsen blir den samma för alla besökare (vissa avkall kan kanske behövas på mobiler). 

Med det sagt så är det något man behöver ha i åtanke när man funderar på designen för en ny sajt. Det är svårare att få ett gott resultat om man försöker implementera det i efterhand.

Variabla fonter

På senare tid har man börjat gå över till att paketera olika skärningar av typsnitt så att alla vikter finns i en och samma fil. Och inte nog med det, vikterna kan justeras steglöst mellan exempelvis normal och fet. Det gör det enkelt att finjustera så att man får samma intryck på webben jämfört med i tryck, t.ex.

Vad det även gör är att man kan justera vikten på sina typsnitt responsivt så att exempelvis rubriker kan vara tyngre på mobilen och lättare på stora skärmar. På så vis bevarar man läsligheten på mobil utan att rubrikerna blir överväldigande tunga på större skärmar.

Att det blir färre filer att ladda ned för besökaren kan också ge bättre prestanda och en rappare upplevelse. 

Google Fonts

En leverantör som började tidigt med variabla typsnitt är Google. De har också ett stort urval av typsnitt att använda. Perfekt, gratis! Då kan alla bara använda Googles typsnitt, allting klart.

Sakta i backarna, så enkelt är det dessvärre inte. Google hostar ju gärna typsnitten på sina servrar och där finns två problem. Delvis så kan det innebära prestandaproblem om man inte är noga med hur och när man laddar sina typsnitt.

Än värre är att Google sparar användardata när hen laddar typsnittet till sin webbläsare. Detta har redan lett till ett prejudikat där man konstaterat att detta bryter mot GDPR. Datat sparas dessutom på servrar utanför EU vilket är ett stort problem.

Men OK, då installerar vi typsnittet på hemsidan och hämtar det därifrån? Det kan man göra, men man bör tänka på att få rätt format på filerna så att de är anpassade för webb, särskilt om det är ett variabelt typsnitt. Det kan vara lite klurigt att få till. De filerna man får kan vara tänkta för att installera lokalt på din dator.

Betalda typsnitt

Google är långt ifrån den enda leverantören av typsnitt för webben, inte ens den första för den delen. Traditionella leverantörer som Adobe tillhandahåller licenser för bruk av sina typsnitt för webben. Det är jättebra när man har en designer som vill använda samma typ för tryck och webb.

Dock innebär licensmodellen att de håller hårt i sina typsnitt och inte vill att installerar dem direkt på sin hemsida, utan hämtar dem från deras servrar. Det innebär samma problem som med Google plus några nya. I regel måste man berätta för leverantören vilka webbsidor som man licensierar typsnittet till.

Det kan snabbt bli komplicerat eftersom det i regel är begränsat till ett visst antal webbsidor. Så har man sin sajt och kanske en utvecklingsserver eller två så finns det potentiellt inte licenser till alla. Sen vill säkert utvecklarna ha möjlighet att använda typsnittet medan de sätter upp stylingen.

Utöver det så kan det också vara så att de servrarna som typsnitten ligger på inte svarar supersnabbt heller vilket kan dra ned hela hemsidan.

Möjligheter

Som ni kanske förstått så är typsnitt och typografi väldigt viktigt för en god, funktionell webb. Men man kan samtidigt plocka rätt enkla vinster genom att se över vilka typsnitt man använder, hur man implementerat dem och så vidare.

Vill man ranka högre på Google? Då ska man kanske kika på vilka prestandavinster det finns att hämta genom att se över hur man laddar sina typsnitt. Man vill kanske dra ned på antalet filer, eller välja att prioritera ned dem så att de inte agerar flaskhals för resten av innehållet på sidan.

Vill man ha bättre tillgänglighet så bör man se över storlekar, vikter och kontraster. Man vill kanske prova på en responsiv typografi.

Oavsett vilket problem som ni upplever så finns det en lösning och vi älskar som känt lösningar :) Vi pratar gärna mer!