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
Automatisera publiceringen av rapporter och pressmeddelanden
Många bolag publicerar fortfarande rapporter och pressmeddelanden genom att ladda upp och kopiera in dem för hand på webben. Det tar tid och i ett flöde där både klockslag och siffror räknas ökar risken för fel. Här förklarar vi hur en integration mellan webben och systemet för finansiell information fungerar och vad den gör för IR-arbetet.
3min
Ett bolag i taget: så flyttar ni koncernens webbar till en plattform stegvis
Att flytta alla bolag till en ny plattform samtidigt kan kännas som ett övermäktigt projekt. Många koncerner gör det därför stegvis. Här beskriver vi hur en stegvis flytt kan planeras och vad som är viktigt att tänka på.
3min
Listbyte till huvudlistan: vad betyder det för webbplatsen?
När ett bolag flyttar från en tillväxtmarknad som First North eller Spotlight till Nasdaq Stockholms huvudlista ökar kraven på transparens, rapportering och bolagsstyrning. Det märks även på webben. Här beskriver vi vad som förändras och hur ni kan förbereda webbplatsen inför ett listbyte.
4min
Dags att byta plattform? Tecken på att destinationens webb har gjort sitt
Många destinationer har en webbplats som byggdes för flera år sedan. Den fungerar men varje förändring tar tid och kostar pengar. Här går vi igenom vanliga tecken på att det är dags att byta plattform och vad ett byte kan ge.
3min
Därför ska bokningssystemet och webben prata med varandra
En destination använder ofta flera system samtidigt. Boende bokas i ett system, biljettköp eller aktiviteter i ett annat och uppgifterna om gästerna finns i ett tredje. När systemen inte är kopplade till varandra blir informationen på webben fel eller måste flyttas för hand. Här förklarar vi vad en integration innebär och vad den gör för både gästen och personalen.
4min
Från vinter till sommar: en webbplats som anpassas för rätt säsong
För många destinationer vänder verksamheten flera gånger per år. Skidbacken blir cykelpark och badsäsongen övergår i konferenssäsong. Webbplatsen behöver hänga med i varje omställning utan att en utvecklare måste kopplas in varje gång. Här går vi igenom vad som brukar ändras mellan säsongerna och hur en flexibel webb gör bytet enklare för redaktörerna.
4min
Därför tappar ni besökare på vägen till bokning och hur ni får fler att boka direkt
Många som besöker en destinations webbplats har redan bestämt sig för att åka dit. De har läst om aktiviteterna och jämfört boenden men lämnar ändå sidan utan att boka. Ofta beror det på att vägen till bokning har för många steg eller känns osäker. I det här inlägget går vi igenom vanliga orsaker till att besökare hoppar av och hur ett tydligare bokningsflöde får fler att boka direkt hos er.
4min
Central styrning, lokal frihet: vem bestämmer vad på koncernens webbar?
När många bolag delar plattform uppstår nya frågor. Vem får ändra vad och vilket innehåll ska styras centralt? Här beskriver vi hur koncerner kan organisera redaktörsarbetet så att det blir både effektivt och tryggt.
3min
Mall eller skräddarsytt? Två vägar för koncernens webbplatser
Alla bolag i en koncern har inte samma behov. Ett mindre dotterbolag behöver kanske en enkel webbplats som snabbt kommer på plats medan ett större bolag kan behöva en helt egen lösning. I detta blogginlägget beskriver vi hur koncerner kan kombinera en gemensam mall med skräddarsydda lösningar.
2min
Efter noteringen: så förvaltar du IR-webben i vardagen
Noteringsdagen är bara början. Sedan följer kvartalsrapporter, årsstämmor, pressmeddelanden och förändringar i ledningen, år efter år. En IR-webb som var klar i tid men är krånglig att förvalta blir snabbt en belastning. I detta blogginlägg går vi igenom hur IR-året brukar se ut och vad som gör förvaltningen enkel.
3min
Nytt bolag i koncernen: så kommer webben på plats utan att börja om
Varje förvärv väcker samma fråga: vad gör vi med webbplatsen? Utan en gemensam grund blir svaret ofta ett nytt webbprojekt från början. Här beskriver vi hur en gemensam plattform gör det snabbare och billigare att ansluta nya bolag.
3min
IR-webb på två språk: därför behöver investerarinformationen finnas på engelska
Utländska investerare äger en stor del av aktierna på den svenska börsen. För dem är den engelska IR-webben bolagets ansikte utåt. Ändå är den engelska versionen ofta tunnare eller sämre uppdaterad än den svenska. Här går vi igenom varför språket spelar roll och hur ni får båda versionerna att hänga med.
3min
Kan koncernens bolag dela webbplattform och ändå behålla sina varumärken?
När en koncern vill samla sina webbplatser är en vanlig oro att bolagen ska tappa sin identitet. En gemensam plattform betyder dock inte att alla webbplatser måste se likadana ut. Här förklarar vi hur flera varumärken kan dela teknik och funktioner och ändå ha var sitt uttryck.
3min
Så håller ni bolagsstyrningsdelen av IR-webben aktuell: Innehåll och rutiner för uppdatering
Bolagsstyrningsdelen av IR-webben är ofta den som uppdateras mest sällan och därför lättast blir inaktuell. Samtidigt är det här investerare och analytiker letar efter information om vem som styr bolaget och hur. Här går vi igenom vilket innehåll som brukar finnas och hur det kan hållas uppdaterat.
4min
Tio bolag, tio webbplatser: när är det dags att samla koncernens webbar?
I många koncerner har varje bolag sin egen webbplats, byggd vid olika tidpunkter av olika byråer i olika system. Det fungerar ett tag men med tiden blir webbarna dyra att förvalta och svåra att överblicka. Här går vi igenom tecknen på att det är dags att samla webbplatserna och vad koncernen vinner på det. Som exempel berättar vi hur Toxic och Industrireklam samlade Welandkoncernens bolag i Weland Light, en gemensam mall i Umbraco där ändringar rullas ut till flera webbplatser samtidigt.
3min
På väg mot börsen: det här behöver finnas på webben till noteringsdagen
Inför en notering är listan över saker att hålla koll på lång. Webbplatsen hamnar ofta långt ner, trots att den måste vara klar och korrekt samma dag som aktien börjar handlas. Här går vi igenom vad webben behöver klara vid noteringen och hur ni kan planera arbetet så att den inte blir en flaskhals.
4min
Flera anläggningar, en webbplattform: så förenklar du vardagen för redaktörerna
Hos många destinationer har hotellet, restaurangen, skidanläggningen och campingen fått var sin webbplats som vuxit fram i sin egen takt. Resultatet blir dubbelt arbete för redaktörerna och ett spretigt intryck för gästen. I det här inlägget går vi igenom vad som händer när flera webbplatser samlas i en gemensam plattform och hur Isaberg Mountain Resort gjorde.
4min
5 anledningar till att stora organisationer och förbund väljer Umbraco som CMS
Många stora organisationer och förbund sitter i CMS-lösningar som blivit för dyra, för komplexa eller helt enkelt inte längre passar verksamheten. Redaktörer får kämpa med sådant som borde vara enkelt och tekniken börjar sätta gränser för vad organisationen kan göra. Efter att ha jobbat med organisationer som LRF, Hyresgästföreningen och flera idrottsförbund ser vi några återkommande skäl till varför valet ofta landar på Umbraco CMS.
4min
Varför allt fler företag digitaliserar sin B2B-försäljning och hur det fungerar
Många B2B-företag tar fortfarande emot beställningar via mejl, telefon eller genom sina säljare. Det fungerar oftast bra i början men i takt med att kundantalet och ordervolymerna växer blir det svårt att hålla informationen uppdaterad och processen blir för tidsomfattande. Det är en av de vanligaste anledningarna till att fler B2B-företag nu tar steget mot en egen e-handelsplattform. I det här inlägget går vi igenom hur beställningar ofta hanteras idag, vilka problem det skapar och hur en digital plattform förändrar bilden.
4min