Att använda typsnitt för webben
Blogg
5 min
Blogg
5 min
När det gäller design för webb så är typsnitt verkligen en av grundstenarna.
Det är inte alltid lätt att hitta rätt när det gäller känsla och form och det finns tyvärr många hemsidor idag som har så dålig typografi att det sticker i ögonen. Nedan följer några tips på vad man ska tänka på när man designar en webbsida, vad det finns för alternativ för att använda typsnitt på webben samt några typsnitt som jag gillar lite extra.
Design
Det finns väl egentligen inga rätt och fel när det kommer till design men det är ändå bra att ha lite riktlinjer om man inte är en erfaren designer eller har ett tränat öga.
Det allra enklaste felet som man kan göra tycker jag är att blanda för många olika typsnitt på samma webbsida. Det ger lätt ett rörigt intryck och innehållet känns inte som det hör ihop riktigt. Det krävs mycket för att få en webbsida att se bra ut med många typsnitt (lite som att blanda många starka färger på en hemsida) men det kan vara fräscht och snyggt men det krävs att designern vet vad hen gör. Så ett tips är att hålla sig till ett eller två typsnitt. Två stycken typsnitt kan ge mer karaktär/identitet åt hemsidan/företaget, förslagsvis ett typsnitt för rubriker och ett annat för brödtext.
Fontstorlekar, radavstånd och marginaler
Fontstorlekar och marginaler beror mycket på designen och vad det är för typsnitt. Men målet är att få en harmoni i layouten och att budskapen/texten kommer fram. Att tänka på är att vara konsekvent i användandet av marginaler och radavstånd på webbsidan. Jag själv föredrar en mer luftig text med lite mer radavstånd. Om man vill ha någon sorts grund att utgå ifrån kan man kika på Google´s design guidelines.
Annars gäller det att ha tålamod och hitta balansen/harmonin men det är värt tiden då en dålig balans i layouten ger ett oproffsigt intryck.
Läsbarhet
Testa gärna din hemsida så att den är lättläst och att innehållet kommer fram. Det är exempelvis väldigt lätt att ljusa upp en mörk text på vitt för att det blir snyggare i designen men det är antagligen lättare att läsa den med mer kontrast och det är ju innehållet/budskapet som är det viktiga. Designen ska framhäva innehållet. Detsamma gäller med text på bilder - var noga med kontrasten så att texten blir lättläst.
Något som är modernt och snyggt är väldigt tunn text. Det passar jättebra på rubriker och större text men blir ofta svårläst i mindre storlek.
Det kan även bli jobbigt att läsa om man har ett väldigt brett textfält, då kan det vara värt att dela upp texten i två kolumner eller att smala ner textfältet.
Designar eller utvecklar du en responsiv webbplats som de flesta webbsidor är idag så är det en självklarhet att testa och justera din sida i de olika enheterna så att textstorlekarna och marginalerna ser bra ut där också. Här på kontoret har vi ett så kallat devicelab med iphones, android telefoner och ett gäng olika läsplattor där vi kan kolla så att allt står rätt till.
Använda typsnitt på webben
När du ska använda typsnitt på en hemsida finns det flera alternativ. Det finns bl.a. ett antal säkra fonter som finns i de flesta system, du behöver alltså inte ladda upp ett nytt typsnitt för användaren utan det finns redan på deras dator. Exempel på dessa är Arial, Verdana, Georgia och Times New Roman. Dock är det inte så vanligt att man har någon av dessa som sin primära font utan de används mer att falla tillbaka på om det skulle vara problem för användaren att hämta/visa din primära font.
Ett annat alternativ är att helt enkelt skicka med ditt typsnitt som en fil och sedan länka till den i en @font-face variabel. Font squirrel har en väldigt bra generator som både konverterar typsnittet du laddar upp till rätt format och ger dig en kodsnippet med @font-face variabler. Du får sedan en zipfil som innehåller dina typsnitt och kodsnippets, smidigt! Du hittar sidan här.
Det som jag använder mest är font-tjänster som exempel Typekit, Fonts.com eller Google fonts. Det är bra dokumenterat på respektive tjänst hur du gör för att använda deras fonter. Det är dessutom gratis att använda Google fonts och det finns många bra typsnitt där idag. Men tänk på laddningstiden för din hemsida, det kan bli ganska tungt om du använder flera olika fonter och tjocklekar.
Om du designar statiskt i ex. Photoshop är det suveränt att du nu kan synka fonterna på Typekit till din dator, dock måste du ha Creative Cloud för att göra det. Ett annat synk-verktyg som även är gratis är SkyFonts. Med SkyFonts kan du synka fonter från Google fonts och Fonts.com.
Några utvalda typsnitt
Här är några typsnitt som jag fastnat för:
Futura
Typsnitt som designades redan 1927! Gammalt men uppenbarligen tidlöst och funkar bra även idag. Tycker det passar extra bra i en kantig design. Du hittar detta typsnitt på Typekit. Dock är det ”Futura pt” där det är tillagt ett antal olika tjocklekar.
Ex. AtranVelo
Open Sans
Ett sans-serif som känns lite snällare än det populära och smått överanvända Proxima Nova. Är optimerat för att vara så lättläst som möjligt. Passar bra som brödtext. Beställt av Google och du hittar det på Google fonts.
Ex. Islandscapes
Source Sans
Adobe´s typsnitt som finns i väldigt tunna tjocklekar. Ett fräscht sans-serif som känns ytterst lite mer kondenserat än de övriga sans-serif som jag tar upp. Du hittar typsnittet på både Typekit eller Google fonts.
Ex. Cast83
Gotham
Ett otroligt stiligt och förtroendegivande typsnitt som bl.a. användes på Barack Obamas presidentkampanj 2008 men som nu finns optimerat för webb. Vill man använda Gotham på sin hemsida får man köpa typsnittet då det inte finns att använda gratis eller i någon webbtjänst.
Caslon Graphique
Caslon är ursprungligen designat 1725 men finns nu i flera olika varianter. Denna variant har tunnare anslutningar vilket gör det mer karaktäristiskt.
Ex. Glasvasen
Lato
Elegant sans-serif. “Male and female, serious but friendly. With the feeling of the Summer,” enligt skaparen Łukasz Dziedzic.
Finns på Typekit och Google fonts.
Ex. Iconic Furniture
Kostnadsfria alternativ till fonter
Gillar du ett speciellt typsnitt men vill inte betala för det? Typewolf har en väldigt bra blogg om webbfonter och där kan du även hitta en lista som ger närmsta gratisalternativ från 354 olika fonter.
Typekit visar också alternativ till fonter om man letar efter något specifikt.
Fler relaterade blogginlägg:
Stärk den digitala identiteten
Var kan jag hitta gratis bilder som fritt får användas?
Är du ute efter att uppdatera din grafiska identitet?
Vi hjälper dig gärna, läs mer här.
Läs mer
Stärk varumärkesidentiteten
Idag lever vi i en digital värld där tekniken ibland kan vara ganska fyrkantig. Det är ett ständigt brus med många olika budskap i våra kanaler.
2min
Var kan jag hitta gratis bilder som fritt får användas?
Här har vi samlat sidor där du kan hämta gratis bilder som fritt får lov att användas i kommersiellt syfte, exempelvis på din företagshemsida eller blogg.
3min
Därför bör du sluta stressa över din AI-ranking
Frågan dyker upp överallt: “Hur rankar vi i ChatGPT?” Det är en bra fråga eftersom AI-sök börjar bli en viktig kanal för digital marknadsföring och ingen vill riskera att halka efter. Men innan du anlitar någon som lovar att “optimera din AI-ranking” behöver du veta något. Det finns ingen riktig ranking.
2min
När behöver organisationer bygga om eller göra om sin webbplats?
Många organisationer använder sin webbplats i många år utan större förändringar. Det är sällan ett problem i sig – en webbplats behöver inte byggas om bara för att den är gammal. Problemet uppstår när tekniken, innehållet eller besökarnas behov har förändrats mer än webbplatsen har hunnit med. Det är inte alltid lätt att själv se var gränsen går mellan "det här kan vi laga" och "det här kräver att vi bygger om från grunden". Här är fyra tecken värda att ta på allvar.
3min
Vanliga problem på stora webbplatser och hur de kan lösas
Ju mer en webbplats växer, ju svårare blir den att hantera – både för de som besöker den och de som arbetar i den varje dag. Det som en gång var en tydlig struktur med några få sektioner blir med tiden hundratals sidor, otaliga underkategorier och innehåll som lagts till i omgångar under flera år utan en gemensam plan. Resultatet märks sällan på en gång, utan det smyger sig in tills en dag besökaren inte längre hittar det den söker, medan redaktören inte längre vet var något ska ligga. Nu ska vi gå igenom några av de vanligaste problemen på stora webbplatser och vad som faktiskt brukar lösa dem.
4min
Därför väljer många organisationer att byta CMS
Ett CMS, ett content management-system, är verktyget en organisation använder för att publicera och uppdatera innehåll på sin webbplats. De flesta organisationer valde sitt CMS för länge sedan (ofta för fem, tio eller femton år sedan) och har sedan byggt vidare på det år efter år. Med tiden blir det svårare att leva med valet man en gång gjorde. Licenser blir dyrare, redaktörer får allt svårare att jobba i systemet och det som en gång kändes flexibelt börjar kännas som ett hinder. Låt oss gå igenom några av de vanligaste anledningarna till att organisationer väljer att byta CMS och vad de oftast vill uppnå med bytet.
3min
Vad krävs av en bra IR-webb?
Förtroende är det som avgör hur ett börsnoterat bolag uppfattas av investerare, analytiker och aktieägare. Mycket av det förtroendet byggs eller tappas på webben. En IR-webb (Investor Relations), är den plats dit investerare, analytiker och aktieägare vänder sig när de vill förstå hur bolaget mår och vart det är på väg. För ett börsnoterat bolag är webbplatsen inte bara en kommunikationskanal, det är en del av hur bolaget lever upp till sin informationsplikt gentemot marknaden. Om en IR-webb är svår att navigera eller saknar rätt information kostar det mer förtroende än man tror. I detta blogginlägg går vi därför igenom vad en IR-webb faktiskt behöver innehålla och vad som skiljer en bra IR-webb från en som bara finns där av plikt.
4min
Annonstexter som konverterar: vad som faktiskt gör skillnad
De flesta som vill förbättra sina annonser börjar fel. De skriver om rubriker, byter bilder, testar nya CTA. Och visst, det kan ge effekt men det är sällan där den stora skillnaden ligger. När en annons inte konverterar handlar det oftare om att något i kedjan efter klicket inte fungerar. Annonsen är bara början. Det här är vad som faktiskt avgör om en annons konverterar.
3min
Fyra svenskar utsågs till Umbraco MVP 2026. En av dem är vår kollega Daniel Andersson!
Förra veckan reste vi till Köpenhamn för årets upplaga av Codegarden, Umbracos årliga konferens och den naturliga samlingspunkten för hela det globala Umbraco-communityt. Två dagar av talks, Umbraco Awards och den där speciella stämningen som uppstår när folk som brinner för samma sak befinner sig i samma rum. Det var där nyheten kom: vår kollega Daniel Andersson utsågs till Umbraco MVP för 2026.
2min
Toxic firar 30 år med stark tillväxt, god lönsamhet och högt förtroende från både kunder och medarbetare
I år firar Toxic 30 år som digital partner till företag med behov av webb, e-handel, kundportaler, systemintegrationer och digitala affärslösningar. Efter tre decennier i en bransch som ständigt förändras fortsätter vi att växa, med starka resultat, god lönsamhet och ett högt förtroende från både kunder och medarbetare.
3min
Det självspelande pianot inom B2B – Läs mer om rapporten Nordic Digital Commerce in B2B 2026
Nordens B2B-företag har passerat en tydlig vändpunkt. Litiums tionde upplaga av Nordic Digital Commerce in B2B 2026 visar att 81 procent av Nordens B2B-bolag idag möjliggör försäljning genom digitala kanaler, att digital försäljning i snitt står för 31 procent av intäkterna och att 58 procent planerar att öka sin budget för digital handel under det kommande året. Diskussionen handlar inte längre om huruvida man ska digitalisera sin försäljning – utan om hur man tar nästa steg.
10min
Markvaruhuset väljer Toxic för ny e-handelsplattform i Litium
Att bygga e-handel för en aktör som säljer till både företag och privatpersoner – med olika flöden, olika logik och höga krav på integration mot affärssystem – är ett projekt som ställer höga krav på rätt teknisk partner. Markvaruhuset har valt Toxic för det uppdraget.
2min
Femte gången gillt – vi är nominerade till Umbraco Awards 2026!
Vi är väldigt glada över att ännu en gång vara nominerade till Umbraco Awards. I år är vi nominerade i kategorin Best Cloud Solution med vår lösning för KABE AB.
3min
Vad är Meta Andromeda och hur påverkar det din annonsering?
Annonserar du på Instagram och Facebook? Då har du säkert märkt att annonserna inte riktigt fungerar som förut. Plötsligt verkar vissa annonser nå rätt personer medan andra försvinner i flödet. Vad ligger bakom förändringen och vad innebär det för dig som annonserar? Vi reder ut det.
4min
Fyra webbplatser i en lösning – ny digital plattform för Atle
För att skapa en mer flexibel, skalbar och redaktörsvänlig webbmiljö har Atle valt Toxic som digital partner. Tillsammans utvecklar vi nu en ny webbplattform i Umbraco som samlar flera bolag i en gemensam lösning ochskapar skalfördelar i linje med bolagets tillväxtstrategi.
3min
Toxic utses till Umbraco Contributing Platinum Partner 2025
Toxic fortsätter att stärka sin position inom Umbraco och har nu utsetts till Umbraco Contributing Platinum Partner 2025 – en internationell utmärkelse som lyfter fram partners som aktivt bidrar till att utveckla och stärka hela Umbraco-ekosystemet.
3min
Toxic inleder långsiktigt samarbete med Qvalify inom SEO och Google Ads
Qvalify är ett av Sveriges ledande företag inom ISO-certifieringar, inspektioner och besiktningar. Med över 30 års erfarenhet hjälper de organisationer att stärka kvalitet, effektivitet och trygghet genom certifiering av ledningssystem, utbildningar samt olika typer av granskningar. För att öka synligheten och skapa tydligare resultat kring sina utbildningar och certifieringar har Qvalify valt Toxic som långsiktig partner inom SEO och Google Ads.
3min
SEO för B2B – så når du rätt beslutsfattare i sökresultaten
Att arbeta med SEO för B2B är en helt annan spelplan än att optimera för konsumenter. Beslutsprocessen är längre, fler personer är inblandade och varje affär är ofta värd mycket mer. Det betyder att varje klick från rätt person kan vara ovärderligt, medan fel trafik riskerar att bli bortkastad tid. På Toxic jobbar vi dagligen med B2B-företag och vet hur man anpassar strategin för att nå just de beslutsfattare som kan fatta beslut.
2min
Sebastian Pierre tillbaka på Toxic – i rollen som utvecklare och konsultchef
Med lång erfarenhet inom programmering och ett tydligt intresse för ledarskap är Sebastian nu tillbaka på Toxic i rollen som utvecklare och konsultchef. I denna intervju får du lära känna honom bättre, höra om hans resa in i IT-branschen och hur det känns att vara tillbaka på Toxic igen.
4min
Toxic inleder samarbete med Meson Group kring webb och PIM på Litium
Meson Group, som är en del av Indutrade, är en ledande leverantör av ventiler och flödeskontrollprodukter till den globala marina industrin. Med huvudkontor i Laholm, säljkontor i Europa och Asien och ett stort nätverk av distributörer arbetar Meson med tekniskt avancerade produkter och omfattande informationsflöden. För att stärka sin digitala närvaro och skapa en mer skalbar hantering av produktdata har de valt Toxic som partner för att ta fram en ny global webbplats och implementera Litium PIM.
3min
Så gör du en SEO-hälsokontroll av din webbplats
Precis som en bil behöver service för att prestera på topp behöver din webbplats regelbundet ses över. En SEO-hälsokontroll avslöjar både tekniska och innehållsmässiga hinder som kan hindra dig från att nå topplaceringarna i Google och hjälper dig prioritera rätt insatser för bättre synlighet.
2min