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
Kläppen Ski Resort väljer Toxic för att bygga ny webbplats i Umbraco Cloud
Kläppen Ski Resort satsar på en ny, modern webbplats i Umbraco Cloud för att skapa en mer anpassningsbar digital upplevelse. Webbplatsen ska ge besökarna rätt information i rätt tid, spegla anläggningens utbud och säsongsskiftningar, samt integreras med bokningssystemet för en smidig och sammanhängande kundresa – oavsett om gästen redan är på plats i Kläppen eller planerar sitt besök.
3min
Vårt team har vuxit – träffa våra sex nya medarbetare!
Vi är så glada att få välkomna sex nya medarbetare till Toxic! Möt Peter, Emma B, Josef, Petter, Linus och Emma R – ett härligt gäng som tillsammans stärker vårt team med värdefull kompetens och driv.
7min
Få ut mer av din SEO – enkla justeringar för bättre synlighet
Vill du att fler ska hitta din webbplats? Här är några praktiska SEO-tips som du kan börja med redan idag för att öka din synlighet och ge din digitala närvaro en skjuts.
3min
Toxic inleder nytt samarbete med KABE
Vi har inlett ett spännande samarbete med KABE, en av Sveriges främsta tillverkare av husvagnar och husbilar. Som en del av samarbetet utvecklar vi en ny webbplats i Umbraco – en plattform som ska spegla KABEs premiumkänsla och samtidigt göra det enklare för både besökare och redaktörer att navigera och hantera innehåll.
2min
Effektiv annonsering med Google Ads: Tips för ökad synlighet och försäljning
Digital annonsering förändras snabbt och för att ligga steget före krävs en strategi som kombinerar data, kreativitet och kontinuerlig optimering. Här delar vi med oss av viktiga insikter och strategier för att maximera effekten av din Google Ads-annonsering, som gör att du får ut mesta möjliga av din budget.
3min
Skapa en kraftfull e-handelslösning med Umbraco Storefront och Norce e-handelsplattform
I en tid där e-handeln utvecklas snabbt är det avgörande att ha en flexibel, skalbar och användarvänlig plattform. För företag som hanterar stora produktkataloger och komplexa produktvariationer är kombinationen av Umbraco Storefront och Norces e-handelsmotor en vinnande lösning.
2min
Vi är live med webb för AmpSociety – en del av ChargeNode Group
ChargeNode Group tar ett nytt spännande steg framåt med lanseringen av AmpSociety – ett nytt bolag och varumärke med fokus på framtidens laddlösningar för elbilar. AmpSociety är en del av ChargeNode Group och lanserar det nya laddsystemet Amp5. Tillsammans med oss på Toxic har de nu lanserat en helt ny produkt- och varumärkeswebb, byggd på Litium, som lägger grunden för fortsatt framgång.
2min
7 snabba med Emelie, affärsutvecklare på Toxic
Möt Emelie, affärsutvecklare på Toxic. När hon inte är upptagen med att skapa affärsmöjligheter och bygga relationer med kunder tillbringar hon dagarna med sina tre barn, njuter av lugna stunder i trädgården eller letar efter unika fynd på loppis. På jobbet navigerar hon smidigt mellan möten med kunder och interna diskussioner, alltid redo att skapa skräddarsydda lösningar och utveckla starka, långsiktiga relationer.
3min
Toxic tar nästa steg för ökad kundnöjdhet – stärker organisationen med Customer Success Manager
Den digitala byrån Toxic tillsätter Jessica Holmberg Ludvigsson som Customer Success Manager för att stärka kundupplevelsen och bygga långsiktiga relationer. Jessica kommer ansvara för att skapa en närmare dialog med kunderna och se till att deras feedback blir en central del av företagets utveckling.
2min
Spårbarhet och digitala produktpass – Ekodesignförordningens påverkan på små och medelstora företag
Digitala produktpass (DPP) är på väg att bli en ny standard inom EU, med målet att förbättra hållbarheten hos produkter och öka transparensen i värdekedjan. För små och medelstora företag innebär detta både utmaningar och möjligheter. Här går vi igenom vad digitala produktpass innebär, hur de påverkar företag och hur lösningar som PIM-system kan underlätta omställningen.
2min
Umbraco jämfört med andra CMS – G2-rapporten visar vad användarna säger
Att välja rätt CMS är ett viktigt beslut och att höra vad verkliga användare tycker kan göra valet enklare. G2, en ledande recensionsplattform för mjukvara, har samlat in över 750 recensioner av Umbraco och jämfört det med fem andra populära CMS. I den här rapporten får du insikter i vad som gör Umbraco till ett populärt val.
2min
Pulsen Group väljer Toxic som en av sina digitala partners
Pulsen Group, en familjeägd bolagskoncern där flera av bolagen arbetar inom IT, har ingått ett samarbetsavtal med oss på Toxic för att ta två av sina webbplatser till nästa nivå.
3min
Effektiv mediehantering - få din webbplats att prestera på topp
Har du funderat på hur felaktig filhantering kan påverka både prestanda och användarupplevelse på din webbplats? Mediehantering innebär många utmaningar – från filstorlek och format till tillgänglighet och lagring. Här har vi samlat våra bästa tips för att göra din webbplats snabbare och mer användarvänlig genom bra mediehantering.
4min
Finn fem tillgänglighetsfel - Vinn en gratis tillgänglighetsanalys av din webbplats
Är er webbplats tillgänglig för alla användare? Nu ger vi på Toxic er chansen att ta reda på det – och samtidigt få möjlighet att vinna en tillgänglighetsanalys, helt gratis!
1min
Vi hälsar fyra nya kollegor välkomna till Toxic
Vi är glada att kunna presentera fyra nya stjärnor till vårt team på Toxic - Karl, Hannah, Kristian och Dennis. Läs vidare för att lära känna dem lite bättre och få en inblick i vad de ser fram emot i sina nya roller.
4min
Team Accessibility: Experterna bakom tillgängliga och inkluderande digitala lösningar
På Toxic sätter vi tillgänglighet i fokus. Det är inte bara en del av processen, utan en grundpelare i hur vi skapar lösningar som fungerar för alla, oavsett förutsättningar. Toxic ska vara bäst i branschen och leda utvecklingen framåt. Här spelar Team Accessibility, under ledning av Alice och Linnéa, en central roll.
3min
Därför är Umbraco det smarta CMS-valet för ditt företag
Att välja rätt CMS kan kännas överväldigande med den uppsjö av alternativ som finns på marknaden. Därför har vi gjort det enkelt för dig. Vi har samlat 12 punkter som förklarar varför Umbraco är det bästa CMS:et för ditt företag.
4min
Kom på Sveriges första Umbracokalas
Toxic, i samarbete med Umbraco och Obviuse, arrangerar en heldagskonferens den 23 oktober för att samla utvecklare och umbracofantaster för att utforska och fira allt som Umbraco har att erbjuda. Det blir en dag fylld av inspirerande talare, det senaste inom Umbraco och härlig gemenskap – ett kalas du inte vill missa, och här är din inbjudan!
2min
7 snabba med Tobias, utvecklingschef på Toxic
Med ett brinnande intresse för teknik och en passion för ledarskap, leder han medarbetare på Toxic med precision och engagemang. Utanför arbetet är han en mångsysslare som uppskattar träning och matlagning. Lär känna Tobias, utvecklingschef på Toxic.
4min