Så väljer du typsnitt till företagssidan (och slipper ångra dig)

Typsnittet är en av de första sakerna en besökare uppfattar, långt innan texten faktiskt läses. Det sätter tonen: sakligt, varmt, exklusivt, lekfullt. Samtidigt är det något som ska fungera i åratal, i rubriker, brödtext, knappar och menyer. Därför är det värt att välja med omsorg.

Två typsnitt räcker — ofta ett

Det vanligaste misstaget är att använda för många. Tre eller fyra olika typsnitt på samma sida gör den rörig och tyngre att ladda.

• Ett typsnitt i flera vikter är ofta det tryggaste valet. Rubriker i en fetare vikt och brödtext i en lättare ger tydlig skillnad utan att något krockar. Den här sidan använder bara ett typsnitt, Outfit.
• Två typsnitt fungerar bra när de är tydligt olika: ett med karaktär till rubrikerna och ett neutralt till brödtexten.

Så parar du ihop två typsnitt

Tumregeln är kontrast, inte likhet. Två typsnitt som är nästan lika ser ut som ett misstag.

• Antikva och sanserif. Ett typsnitt med klackar (antikva) till rubrikerna och ett utan (sanserif) till brödtexten, eller tvärtom. Den klassiska kombinationen, och den är klassisk för att den fungerar.
• Olika roller. Låt det ena typsnittet stå för personligheten och det andra för läsbarheten. Rubriktypsnittet får gärna vara ovanligt, eftersom det används i korta stycken.
• Samma proportioner. Typsnitt med liknande x-höjd — höjden på gemena bokstäver — ser ut att höra ihop även när formen skiljer sig.

Pröva alltid kombinationen med riktig text från er egen sida, inte med exempeltext. Långa ord, siffror och å, ä, ö avslöjar mycket.

Vad som gör en sida svårläst

Ett bra typsnitt kan ändå bli svårläst. Det handlar oftare om hur det används:

• För liten text. Brödtext på webben bör vara minst 16 pixlar, gärna 17–18 på större skärmar.
• För långa rader. Runt 60–75 tecken per rad är lagom. Längre rader gör att ögat tappar bort sig på väg tillbaka till nästa rad.
• För tätt radavstånd. Brödtext behöver luft. Ett radavstånd på ungefär 1,5–1,7 gånger textstorleken är en bra utgångspunkt.
• För låg kontrast. Ljusgrå text på vit botten ser elegant ut men är svår att läsa, särskilt i mobilen utomhus. Tillgänglighetskravet är en kontrast på minst 4,5:1 för vanlig text. Verktyget Lighthouse i Chrome och Edge visar om något ligger under.
• För tunna vikter. De tunnaste vikterna ser fina ut i stora rubriker men försvinner i brödtext.
• Versaler i långa stycken. Text med bara stora bokstäver är tyngre att läsa. Spara det till korta etiketter.

Tänk på laddtiden

Varje typsnitt och varje vikt är en egen fil som besökaren behöver hämta. Några saker håller nere vikten:

• Välj bara de vikter ni använder. Två eller tre räcker oftast.
• Variabla typsnitt innehåller alla vikter i en fil, vilket ofta blir mindre än flera separata.
• Dela upp teckenuppsättningen. Den här sidan laddar de vanliga latinska tecknen, inklusive å, ä och ö, i en fil och de ovanligare i en annan som bara hämtas om de behövs.
• Visa texten direkt. Med font-display: swap syns texten i ett reservtypsnitt medan det riktiga laddas, i stället för att sidan är tom.

Ladda typsnitten från er egen server

Många hämtar typsnitt direkt från en extern tjänst, till exempel Google Fonts. Det är enkelt, men det betyder att varje besökares webbläsare kontaktar en tredje part — och därmed skickar med sin IP-adress. En tysk domstol ansåg 2022 att det kräver samtycke och dömde en webbplatsägare att betala skadestånd.

Lösningen är enkel: ladda ned typsnittsfilerna och lägg dem på er egen server. Typsnitten i Google Fonts har öppna licenser som tillåter det, och sidan blir dessutom mindre beroende av andra. Kontrollera alltid licensen för kommersiella typsnitt — de har ofta särskilda villkor för webbanvändning.

Snabbguide

1. Börja med ett typsnitt i två eller tre vikter.
2. Lägg till ett andra bara om det tillför kontrast.
3. Brödtext minst 16 pixlar, 60–75 tecken per rad, radavstånd runt 1,6.
4. Kontrast minst 4,5:1.
5. Ladda typsnitten från er egen server.

Står ni inför en ny sida eller en ny logotyp är typsnittet ett av de beslut som är värda att fatta tidigt — det påverkar allt som kommer efter.