Så väljer du det bästa typsnittet för din webbplats

Att välja rätt typsnitt för din webbplats är en mindre lätt uppgift än det vid första anblicken verkar.

Välja några typsnitt som du tycker ser bra ut och slänga dem på din sida? Inte så snabbt.

Långt ifrån alla typsnitt är lämpliga för webbplatser. Och det handlar inte bara om det visuella: att använda typsnitt på måfå för din sajt kan också leda till tekniska problem (mer om detta senare).

Efter att ha utvecklat 30+ webbplatser har jag en ganska bra uppfattning om vad som kommer med när man väljer typsnitt för en webbplats. I denna kortfattade artikel lär du dig allt du behöver veta.

7 tips för att välja ett typsnitt för din webbplats

Här är mina viktigaste tips för att välja typsnitt för din sajt.

1. Läsbarhet framför allt

Detta kanske verkar självklart. Men ändå stöter man förvånansvärt ofta på webbplatser med ett typsnitt som inte är särskilt lättläst.

Kreativa, svepande typsnitt kan ge din sajt en unik karaktär. Men så fort läsbarheten äventyras är det klokt att välja något mindre äventyrligt.

Se dessutom till att ditt typsnitt är minst 16 pixlar stort (18 pixlar, eller ännu mer, fungerar ofta bättre).

Och att typsnittet är läsbart på alla skärmstorlekar (kolla även din sajt på din telefon) är också mycket viktigt.

2. Välj högst två typsnitt

Att välja mer än två typsnitt medför några problem:

• Din sajt kommer att se rörig ut
• Du kommer att märka en negativ påverkan på laddningstiderna för din webbplats

Välj ett typsnitt för dina rubriker och ett för “body” text (det som används i dina stycken etc.).

På många av mina webbplatser håller jag mig till bara ett enda typsnitt. Till stor del väljer jag detta på grund av laddningstider. Ett andra typsnitt kommer inte att ha någon märkbar effekt på din sidas hastighet, men för en hastighetsentusiast som mig själv räknas varje millisekund.

3. Välj ett typsnitt som ansluter till ditt varumärke

Är ditt varumärke:

• Modernt och minimalistiskt? Välj då ett sans-serif typsnitt (till exempel Lato, Open Sans).
• Elegant och professionellt? Då passar serif bättre (till exempel Merriweather, Playfair Display).
• Kreativt och lätt? Display- eller skripttypsnitt kan fungera (men, som sagt ovan, tänk på läsbarheten!).

Du förväntar dig ett annat typsnitt på en yogasajt än på en advokatbyråsida. 

4. Skapa kontrast genom att kombinera typsnitt

Här är ett exempel på en webbplats jag hanterar där jag har valt två typsnitt som starkt kontrasterar med varandra:

PT Serif för brödtexten och Montserrat för rubrikerna.

Stilkollisionen av dessa typsnitt fungerar mycket bra. När du väljer två typsnitt vill du inte att de ska likna varandra för mycket.

Sedan i denna artikel hittar du fler exempel på typsnitt som matchar varandra bra.

EXTRA TIPS: Varje professionellt designad webbplats håller ett fast förhållande när det gäller de olika rubriktexterna (H1, H2, H3, etc) och standardtexten. Välj inte storleken på dina olika texttyper utifrån vad som “känns bra”. Ett verktyg som Typescale kan hjälpa till att säkerställa att storleken på dina olika texttyper är väl matchade.

5. Se ditt typsnitt i olika webbläsare och på olika enheter

Ibland kanske ett typsnitt inte går bra mot en viss webbläsare eller enhet. Därför är det viktigt att testa detta ordentligt.

6. Anpassa dig till prestandakraven

Använd så kallade web safe typsnitt eller typsnitt som är optimerade för snabba laddningstider.

Både Google Fonts och Adobe Fonts erbjuder gratis, för webben optimerade typsnitt (du kan läsa mer om Google Fonts nedan).

7. Tänk på tillgänglighet

Anslutande till första punkten: internet används naturligtvis också av synskadade och äldre.

Framför allt för dessa grupper är tillgängligheten av din webbplats mycket tillgänglig.

Se till att färgen på ditt typsnitt kontrasterar starkt mot bakgrunden på din sida. Och se till att din text inte blir för tunn eller svängande.

Mitt råd: använd Google Fonts

Som webbplatsägare skulle jag om det är möjligt alltid använda Google Fonts. Detta är varför:

• Utbudet är enormt. Eftersom det finns mer än 1.000 typsnitt, bör du hitta ett lämpligt typsnitt för varje projekt.
• Fungerar bra i alla webbläsare och enheter. Google Fonts är web-safe vilket innebär att du inte behöver oroa dig för att det inte ser bra ut i en viss webbläsare eller gadget.
• Snabba laddningstider. Google Fonts hostas på Googles blixtrande snabba servrar.
• Enkelt att integrera. Google erbjuder lättfattliga instruktioner som gör att du enkelt får deras typsnitt att fungera på din sajt.
• Det är gratis. Du har inga licensavgifter som med vissa andra typsnitt.

Använder du WordPress? Då har du tur. Många populära WordPress-teman som Kadence och GeneratePress har en Google Fonts-integration.

Jag använder själv Google Fonts på alla mina webbplatser.

Ta reda på vilket typsnitt en webbplats använder

Har du hamnat på en webbplats vars typsnitt du gillar? Så här kan du (i Chrome) se vilket typsnitt som används.

Välj textstycket, högerklicka och välj Inspektera. Scrolla ner i skärmen som nu visas vid avsnittet Styles, och snart kommer du till typsnittet som används.

Exempel på typsnitt som fungerar bra tillsammans

Om du vill använda flera typsnitt kan du prova något av de nedanstående paren.

Via Google Fonts kan du skapa ännu fler teckensnittskombinationer.