Hej, vi använder oss av cookies. Det finns olika typer av cookies med olika syfte. Vi använder cookies för analys och för att webbplatsen överhuvudtaget ska fungera.

Om du vill ställa in vilka typer du tillåter gå till vår sida för cookie-inställningar. Om du tycker alla våra cookies är ok, klicka på okej (duh).

Du är här: Hem > Artiklar >

Att leverera typsnitt för webb

Publicerad:

Den utveckling vi har gått igenom för webbtypsnitt under de år jag jobbat med webb har varit omvälvande. Steget från att välja mellan Times New Roman, Arial, Georgia eller Verdana till den värld av webbtypsnitt som finns idag har gjort webben till en vackrare plats. Men mitt i allt överflöd finns det som alltid fällor och det här är en liten guide för att göra genomtänkta typografiska vägval för dina digitala produkter.

1. Välj ett bra typsnitt

Ett bra typsnitt kan vara många saker. På ett designplan handlar det om att välja ett typsnitt med rätt röst och tonläge som förstärker det budskap du vill få fram. På ett mer tekniskt plan handlar det om att välja ett typsnitt som funkar. Det ska rendera bra i alla olika webbläsare och på alla olika enheter. Det kan vara väldigt stor skillnad på hur ditt typsnitt ser ut i Photoshop och hur det sen funkar i en webbläsare. En telefon, en mac och en windows-burk kommer att visa typsnittet olika beroende på sina olika renderingsmotorer.

Vissa typsnittstjänster som till exempel Typekit låter dig testa hur typsnittet renderas i olika webbläsare. Där kan du få en känsla för hur, om och var det funkar och inte funkar och kan sålla bort de värsta alternativen.

Internet Explorer 7 i Windows Vista, Safari i Windows 7, Internet Explorer i Windows Vista.

2. Olika typsnittstjänster funkar olika bra

Det kan vara väldigt stor skillnad på ett typsnitt från exempelvis Fonts.com och något som ser liknande ut från Google web-fonts. Samma font kan även finnas i olika varianter från olika leverantörer. Alla typsnittsföretag har till exempel sin variant av Garamond och de kan rendera väldigt olika på mac, på PC, på retinaskärmar, eller i Windows 8 kontra Windows XP. Ta en stund och gå igenom dina alternativ från olika leverantörer.

3. Testa ditt typsnitt

Innan du bestämt dig för ett typsnitt och kör igång med en hel design baserat på det bör du göra en prototyp och testa. I verktyg som Typecast kan du använda typsnitt från Fonts.com, Typekit, Fontdeck eller Google Web Fonts och göra en prototyp med dina olika rubriknivåer, brödtext och länkar i olika spaltbredder och testa dina olika typsnittsalternativ i olika webbläsare och på olika skärmar för att få en känsla för vilken som renderar bäst över hela spektrat.

4. Testa med riktigt innehåll

Det funkar inte att testa ett typsnitts läsbarhet med Lorem Ipsum. Du måste kunna ta till dig innehållet för att kunna avgöra om det är lättläst. Finns inget innehåll på plats i projektet när det är dags att ta beslut om typografin så ta ett kapitel ur en bok eller något blogginlägg, huvudsaken är att det går att avgöra om det är läsbart på riktigt.

5. Håll koll på prestandan

Att använda webbtypsnitt med @font-face innebär att typsnittet först laddas ner till besökarens dator för att det ska kunna visas i webbläsaren, därför måste du hålla koll på hur många fonter du använder. De flesta typsnitt innehåller ett antal fonter, eller varianter; regular, bold, italic med flera. Varje font laddas ner när du använder den på en sida. Håll dig till ett eller två typsnitt med några få varianter för att inte straffa dina besökare med långa laddtider.

6. Olika typsnitt, olika filstorlekar

Kort förklarat så är ett typsnitts vikt beroende av antalet punkter som krävs för att bygga upp varje bokstav. Ett typsnitt med många detaljer och runda ändar är vanligtvis tyngre än en rak fyrkantig sans-serif, men det skiljer även mellan olika typsnittsleverantörer.

Ta en liten stund och kolla på vikten på samma typsnitt hos olika leverantörer. Man kan till exempel hitta en skärning av ett typsnitt som väger 40k och en annan som väger 160k, beroende på hur mycket jobb man lagt ner på att gå in och finslipa typsnittet för webben och ta bort onödiga ankarpunkter.

7. Ta bort glappet

Olika webbläsare hanterar inladdningen av webbtypsnitt via @font-face på lite olika sätt; Vissa webbläsare (Chrome och Firefox) väntar 3 sekunder på att webb-typsnittet ska laddas innan de ger upp och visar texten med fallback-typsnittet. Andra webbläsare (Safari , Android, Blackberry) väntar en evighet och visar ingenting förrän nedladdningen är klar. För din genomsnittlige besökare som stannar max 5 sekunder på en webbsida är tre sekunder eller mer en lång tid att sitta och titta på en sida utan text. Och potentiellt kan ditt typsnittsval göra att webbsidan inte kan visas alls.

För att ha bättre kontroll över hur din sida visas medan typsnittet laddas finns en uppsättning font-events i CSS och Javascript. Specificera vilket typsnitt som ska användas innan @font-face typsnittet laddats och använd något smart sätt att visa din fallback innan webbtypsnittet så visas innehållet från start och sen uppdateras texten till ditt riktiga webbtypsnitt när det laddats in.

Utvecklare har olika sätt att minimera glappet på. Filament group gör så här. Google Developers gör så här. Opera gör så här för att optimera inladdningen av @font-face typsnitt.

8. Fixa dina fallback-fonter

För att minimera skillnaderna mellan ditt fallback-typsnitt och det webbtypsnitt du laddar in kan du lägga en stund på att välja rätt fallback som bäst matchar det typsnitt du valt och justera font-storlek, radavstånd och mellanrum mellan bokstäverna på fallback-typsnittet. Får du en hyffsad likhet så håller du paragraferna intakta och undviker att radbrytningar ändras eller att hela sidan bryter om när webbtypsnittet sen laddas in.

9. Proportioner

Små skärmar behöver en mindre skala. En H1a som är 3 gånger så stor som brödtexten i en stor skärm blir oproportionerligt stor i en mindre skärm och gör att man ser mindre av kommande innehåll i små skärmar. Det kan vara en idé att se över rubrikstorlekarna för de minsta brytpunkterna och kanske låta en h1a vara exempelvis 2em (2 ggr brödtexten) i stället för 3em. Jason Pamental har beskrivit det fint på Typecast.com.

10. Detaljer

Den senaste standarden för font-format är WOFF (Web Open Font Format). WOFF möjliggör bättre kvalitet på typsnitt på webben och tillåter OpenType-funktioner. Det innebär att kan du lägga till det lilla extra för att ge dina sidor kärlek på detaljnivå med ligaturer, kapitäler eller versala och gemena siffror.

Du kan också lägga lite kärlek på dina rader så att de inte blir så långa att ögat tappar bort sig i läsningen. Någonstans runt 45-55 tecken per rad på en större skärm och 35-40 tecken per rad på en liten skärm kan vara lagom. Sätt ett min och max för radlängder med media queries i CSS3. Använd också flexibla måttenheter som em eller procent, så att det går att att påverka storleken på texten med webbläsarens inbyggda funktionalitet.