\n Varje f\u00f6retagare vet vikten av en tydlig, korrekt designad och v\u00e4l underh\u00e5llen webbplats. I denna tid, om du misslyckas med att ge dina kunder en webbplats som verkligen kommer att imponera p\u00e5 dem, kommer du att f\u00f6rlora dem mycket snabbare \u00e4n det tog dig att vinna deras f\u00f6rtroende.\n<\/p>\n
\n Tyv\u00e4rr anstr\u00e4nger sig de flesta entrepren\u00f6rer och anst\u00e4ller designers som \u00e4r bra p\u00e5 utveckling, de f\u00f6rbiser ofta en avg\u00f6rande egenskap \u2013 typsnitt.\n<\/p>\n
\n Fr\u00e5n typsnittet du anv\u00e4nder, till storleken p\u00e5 texten som var och en av dina inre webbsidor har, detta \u00e4r en av de saker som kommer att vara den avg\u00f6rande faktorn f\u00f6r huruvida dina kunder stannar eller inte, interagerar och slutligen konverterar.\n<\/p>\n
\n Sanningen \u00e4r att \u00e4ven om typsnitt inte verkar s\u00e5 effektfulla, har de kraften att ta ditt f\u00f6retag h\u00f6gt \u00f6ver eller ner\u00e5t. Det \u00e4r enkelt egentligen, om din webbplatsbes\u00f6kare \u00e4r ovillig eller of\u00f6rm\u00f6gen att l\u00e4sa inneh\u00e5llet som du har publicerat, kommer ditt meddelande inte att g\u00e5 vidare till dem och d\u00e4rf\u00f6r kommer du inte att kunna konvertera. Flera unders\u00f6kningar har visat att den typ av typsnitt som anv\u00e4nds p\u00e5 en webbplats inte bara p\u00e5verkar l\u00e4sbarheten utan ocks\u00e5 hum\u00f6ret, anv\u00e4ndarupplevelsen och till och med den upplevda artikell\u00e4ngden. Det \u00e4r d\u00e4rf\u00f6r det \u00e4r viktigt att din designer f\u00f6rst\u00e5r skillnaden mellan att bara skapa en webbplats med en hel del inneh\u00e5ll och att utveckla en som har en tilltalande och effektfull design som f\u00f6rb\u00e4ttrar l\u00e4sarens hum\u00f6r.\n<\/p>\n
\n\n ”Typ \u00e4r en vacker grupp bokst\u00e4ver, inte en grupp vackra bokst\u00e4ver.”\n <\/p>\n
\n – Mathew Carter\n <\/p>\n<\/blockquote>\n
\n N\u00e4r du t\u00e4nker p\u00e5 typsnitt, vad \u00e4r det f\u00f6rsta du t\u00e4nker p\u00e5? Om du \u00e4r som de flesta m\u00e4nniskor som \u00e4nnu inte f\u00f6rst\u00e5r deras betydelse, t\u00e4nker du f\u00f6rmodligen p\u00e5 typsnitt som Calibri, Comic Sans, Arial, Times New Roman och andra. Men vad du beh\u00f6ver veta \u00e4r att detta bara \u00e4r grunderna. N\u00e4r du pratar om typografi som m\u00e5ste implementeras p\u00e5 din webbplats beh\u00f6ver du inte bara t\u00e4nka p\u00e5 typsnitten, utan \u00e4ven deras storlekar, f\u00e4rger, kerning och avst\u00e5nd.\n<\/p>\n
\n I den h\u00e4r artikeln \u00e4r v\u00e5rt m\u00e5l att inte bara ber\u00e4tta om effekterna av viktiga funktioner i typsnitt, utan ocks\u00e5 att ge dig praktiska f\u00f6rslag som du kan anv\u00e4nda f\u00f6r att \u00f6ka din egen webbplatss omvandlingsfrekvens. S\u00e5, f\u00f6rbered dig med en penna och anteckningsblock eftersom det h\u00e4r \u00e4r den typen av information du inte vill missa.\n<\/p>\n
\n Typsnitt och deras inverkan
\n<\/h5>\n\n Om du har l\u00e4st n\u00e5gra artiklar om typsnitt och typografi vet du att det finns flera typsnitt som anses v\u00e4rda att publiceras p\u00e5 n\u00e4tet. Medan vissa \u00e4r \u00f6verens om att Georgia ger flest resultat, tror andra att Baskerville tar hem den vinnande \u00e4ran. Men innan vi b\u00f6rjar prata om det, l\u00e5t oss diskutera den \u00f6vergripande effekten av typsnitt p\u00e5 din webbplats varum\u00e4rke. S\u00e5 h\u00e4r \u00e4r det; om ditt inneh\u00e5ll \u00e4r sv\u00e5rt att l\u00e4sa p\u00e5 grund av att bokst\u00e4verna \u00e4r f\u00f6r n\u00e4ra varandra eller storleken \u00e4r f\u00f6r liten, kommer de antingen att l\u00e4mna direkt eller f\u00f6rs\u00f6ka l\u00e4sa n\u00e5gra sekunder till och s\u00e5 sm\u00e5ningom l\u00e4mna om de fortfarande tycker att det \u00e4r sv\u00e5rt. \u00c4ven om du har mycket lojala kunder som tog sig tid och faktiskt l\u00e4ste hela exemplaret, kommer de att komma ih\u00e5g att det tog dem f\u00f6r l\u00e5ng tid och du kommer att f\u00f6rlora dem.\n<\/p>\n
\n Typsnittet\/typsnitten du v\u00e4ljer f\u00f6r din webbplats \u00e4r avg\u00f6rande eftersom det kommer att g\u00f6ra hela processen att l\u00e4sa, f\u00f6rst\u00e5 och f\u00f6rst\u00e5 ditt budskap enkel. Om du v\u00e4ljer typsnitt som \u00f6verensst\u00e4mmer med dina l\u00e4sare, kommer deras uppm\u00e4rksamhet att f\u00f6rbli p\u00e5 informationen du tillhandah\u00e5ller och inte hur l\u00e5ng tid det tog att l\u00e4sa.\n<\/p>\n
\n Praktiskt tips:<\/strong> Alla typsnitt fungerar inte f\u00f6r varje webbplats. Typsnitt har olika personligheter och den du best\u00e4mmer dig f\u00f6r beror helt p\u00e5 ditt f\u00f6retag, vilken typ av kunder du v\u00e4nder dig till och vilket budskap du vill gestalta. Det b\u00e4sta man kan g\u00f6ra skulle vara att unders\u00f6ka utf\u00f6rligt och titta p\u00e5 typsnitten som anv\u00e4nds av andra i samma bransch. Prova och testa flera typer p\u00e5 olika plattformar s\u00e5 att du vet att du fattar r\u00e4tt beslut. Kom ih\u00e5g att det tar lite tid att v\u00e4lja r\u00e4tt typsnitt, men det kommer att vara v\u00e4rt det n\u00e4r du ser dina omvandlingsfrekvenser \u00f6ka.\n<\/p>\n
\n Teckenstorlekar och deras inverkan
\n<\/h5>\n\n N\u00e4r du pratar om storleken p\u00e5 ditt teckensnitt \u00e4r en av de viktigaste fr\u00e5gorna du b\u00f6r ha l\u00e4sbarheten. L\u00e4sbarhet blir s\u00e5 mycket viktigare eftersom du vill vara s\u00e4ker p\u00e5 att ditt budskap kommer fram. \u00c4ven om ditt teckensnittsval inte \u00e4r perfekt, kommer den r\u00e4tta storleken att r\u00e4dda dig eftersom bes\u00f6karen \u00e5tminstone inte beh\u00f6ver anstr\u00e4nga \u00f6gonen f\u00f6r att l\u00e4sa inneh\u00e5llet du presenterar. Om du har r\u00e4tt teckenstorlek kommer dina kunder att vara mycket mer ben\u00e4gna att l\u00e4sa ditt meddelande, interagera och till och med sprida ordet. N\u00e4r du kan kommunicera b\u00e4ttre med dina kunder kommer ditt varum\u00e4rke att p\u00e5verkas positivt och detta kommer i sin tur att \u00f6ka ditt f\u00f6retags anseende.\n<\/p>\n
\n Praktiskt tips:<\/strong> Storleken du v\u00e4ljer att ditt teckensnitt ska presenteras i beror p\u00e5 designkontexten f\u00f6r webbplatsen. Medan ett visitkort kan kr\u00e4va mycket liten storlek, kommer en evenemangsaffisch att kr\u00e4va en mycket st\u00f6rre. Men eftersom vi specifikt pratar om webbdesign m\u00e5ste du \u00f6verv\u00e4ga om du publicerar f\u00f6r mobila enheter eller allm\u00e4nna sk\u00e4rmar. Som en tumregel rekommenderar experter att du anv\u00e4nder fr\u00e5n 10px till 14px f\u00f6r kroppens inneh\u00e5ll och 16px till 20px f\u00f6r rubriker eller titlar. F\u00f6r b\u00e4sta resultat kan du k\u00f6ra en \u00f6vningskontroll p\u00e5 de storlekar som k\u00e4nns r\u00e4tt f\u00f6r dig och sedan justera d\u00e4refter om de inte verkar fungera bra. Dessutom, om du tillgodoser olika sk\u00e4rmstorlekar (vilket du borde), se till att teckensnittet ocks\u00e5 fungerar bra n\u00e4r storleken minskas p\u00e5 mobila enheter.\n<\/p>\n
\n Teckenf\u00e4rg och din webbplats
\n<\/h5>\n\n Om du vill f\u00f6rmedla ditt budskap till dina bes\u00f6kare p\u00e5 b\u00e4sta m\u00f6jliga s\u00e4tt beh\u00f6ver du inte bara \u00f6verv\u00e4ga ordvalet utan \u00e4ven hur det presenteras. Nu \u00e4ven om teckensnittsf\u00e4rgen kanske inte verkar vara en s\u00e5 stor sak, \u00e4r det n\u00e5got som har stor inverkan, speciellt om du har en s\u00e4rskilt chirpy webbplats. F\u00e4rgpsykologi \u00e4r ett helt studieomr\u00e5de och man kan l\u00e4ra sig ganska mycket av det. Men n\u00e4r du implementerar f\u00e4rg, s\u00e4rskilt i typsnitt, kom ih\u00e5g att inte g\u00e5 \u00f6verbord eftersom det bara kommer att se roligt ut. F\u00e4rgerna som du v\u00e4ljer b\u00f6r inte bara st\u00e4rka ditt f\u00f6retags k\u00e4rnv\u00e4rden utan ocks\u00e5 ge ett lyft till den underliggande personlighet som kunderna ansluter till. Om det slutar med att du v\u00e4ljer fel f\u00e4rg f\u00f6r ditt teckensnitt kommer de att motarbeta dig och ditt f\u00f6retag.\n<\/p>\n
\n En annan funktion som \u00e4r v\u00e4rd att n\u00e4mna h\u00e4r \u00e4r kontrast. Kontrasten p\u00e5 din text eller sida \u00e4r skillnaden i m\u00f6rker som finns mellan bakgrunden och texten. \u00c4ven om du inte vill anv\u00e4nda gamla tekniker som att s\u00e4tta r\u00f6d text p\u00e5 gr\u00f6n bakgrund, b\u00f6r du se till att det finns god kontrast mellan text och bakgrund s\u00e5 att l\u00e4sbarheten \u00f6kar.\n<\/p>\n
\n Praktiskt tips:<\/strong> F\u00f6rst, innan du best\u00e4mmer dig f\u00f6r teckensnittsf\u00e4rgen, m\u00e5ste du t\u00e4nka mycket noga p\u00e5 f\u00e4rgerna och typsnittet som ska vara eller redan har integrerats i ditt varum\u00e4rke och dess logotyp. N\u00e4r du till exempel t\u00e4nker p\u00e5 Coca-Cola, trollar du f\u00f6rmodligen fram det mycket distinkta lockiga typsnittet tillsammans med den r\u00f6da f\u00e4rgen. N\u00e4r du v\u00e4ljer f\u00e4rg rekommenderar experter att du t\u00e4nker p\u00e5 det som att f\u00e4rgl\u00e4gga ett rum i ditt hus. Om du vill att dina bes\u00f6kare ska k\u00e4nna sig varma och mysiga n\u00e4r de l\u00e4ser bloggen, anv\u00e4nd dova r\u00f6da och apelsiner eftersom dessa \u00e4r t\u00e4nkta att slappna av och lugna sinnena. Men \u00e5terigen, kom ih\u00e5g att inte g\u00e5 \u00f6verbord eftersom det mesta inneh\u00e5llet ser bra ut och l\u00e4sbart i svart, beroende p\u00e5 bakgrundsf\u00e4rgen.\n<\/p>\n
\n Rubrikteckensnitt och vad du b\u00f6r veta
\n<\/h5>\n\n Rubrikerna du anv\u00e4nder f\u00f6r ditt inneh\u00e5ll \u00e4r extremt avg\u00f6rande, inte bara n\u00e4r det g\u00e4ller de faktiska orden utan ocks\u00e5 hur det presenteras. Flera unders\u00f6kningar har visat att om du inte anv\u00e4nder catchy och uppseendev\u00e4ckande rubriker, kommer dina bes\u00f6kare att g\u00e5 vidare och leta efter n\u00e5got lite mer intressant att l\u00e4sa. Det finns s\u00e4rskilda m\u00f6nster f\u00f6r hur m\u00e4nniskor l\u00e4ser webben och genom detta kommer du att uppt\u00e4cka att det mesta inneh\u00e5llet helt enkelt skannas igenom. S\u00e5 om du inte f\u00e5ngar din bes\u00f6kares uppm\u00e4rksamhet med rubriken, kommer deras chanser att l\u00e4sa att minska ytterligare. T\u00e4nk nu p\u00e5 att b\u00e5de typsnittet och f\u00e4rgen du anv\u00e4nder f\u00f6r din rubrik avg\u00f6r om din bes\u00f6kare vill l\u00e4sa den eller inte. S\u00e5 \u00e4ven om du inte vill b\u00f6rja anv\u00e4nda Comic Sans bara f\u00f6r att f\u00e5nga uppm\u00e4rksamhet, b\u00f6r du h\u00e5lla den l\u00e4sbar.\n<\/p>\n
\n Praktiskt tips:<\/strong> Om du parar typsnitt (anv\u00e4nder ett f\u00f6r rubriken och det andra f\u00f6r huvudinneh\u00e5llet), se till att de faktiskt ser bra ut tillsammans. Parning kan ibland vara knepigt eftersom du m\u00e5ste se till att de flesta element i typsnitten matchar s\u00e5 att de inte ser v\u00e4ldigt olika ut. I ett s\u00e5dant fall m\u00e5ste rubrikfonten komplettera br\u00f6dtexten. \u00c5 andra sidan, om du anv\u00e4nder samma typsnitt kan du experimentera med olika storlekar och radavst\u00e5nd f\u00f6r att f\u00f6rb\u00e4ttra rubriken. Samma typsnitt ger inte bara visuell harmoni f\u00f6r din l\u00e4sare, utan kommer ocks\u00e5 att minska antalet teckensnitt som beh\u00f6ver laddas, vilket \u00f6kar den totala laddningstiden och prestanda.\n<\/p>\n
\n Linjel\u00e4ngd och dess betydelse
\n<\/h5>\n\n De flesta som g\u00f6r en webbplats kommer att \u00f6verv\u00e4ga typsnitt, storlek, f\u00e4rg och kontrast p\u00e5 den text som anv\u00e4nds. Det de d\u00e4remot missar \u00e4r linjel\u00e4ngden. Radl\u00e4ngden \u00e4r ansvarig f\u00f6r att \u00f6ka eller minska den totala l\u00e4sbarheten och h\u00e4nvisar till antalet ord eller tecken som finns i varje horisontell linje. Vad som p\u00e5verkar l\u00e4sbarheten \u00e4r meningarnas korta eller l\u00e5nga mening. Om typsnittet du v\u00e4ljer g\u00f6r att raderna ser f\u00f6r l\u00e5nga ut, kommer dina bes\u00f6kares \u00f6gon att beh\u00f6va resa en l\u00e5ng str\u00e4cka, vilket kommer att avskr\u00e4cka deras l\u00e4sning eftersom det kommer att kr\u00e4va mycket anstr\u00e4ngning. \u00c5 andra sidan, om raderna \u00e4r f\u00f6r korta kommer fl\u00f6det av meningar att bryta och bes\u00f6karen kommer att sluta tappa intresset.\n<\/p>\n
\n Praktiskt tips:<\/strong> En teori som f\u00f6reslogs av Usability Institute Baymard \u00e4r att du ska v\u00e4lja ett typsnitt som anv\u00e4nder 50-75 tecken (mellanslag ing\u00e5r) per rad eftersom detta ger optimal l\u00e4sbarhet. Du kan ocks\u00e5 anv\u00e4nda Golden Ratio Typography Calculator f\u00f6r att best\u00e4mma den perfekta radl\u00e4ngden beroende p\u00e5 sk\u00e4rmen som anv\u00e4nds f\u00f6r att l\u00e4sa inneh\u00e5llet.\n<\/p>\n
\n Kerning & Why It Matters
\n<\/h5>\n\n Enligt Wikipedia \u00e4r ”Kerning processen att justera avst\u00e5ndet mellan tecken i ett proportionellt teckensnitt, vanligtvis f\u00f6r att uppn\u00e5 ett visuellt tilltalande resultat.” Om du anv\u00e4nder ett bra typsnitt kommer det att vara v\u00e4lk\u00e4rnat och utrymmet mellan varje teckenpar blir likadant. Om du har en designer som st\u00e4ller in typsnittet i ett grafiskt program som Photoshop, kommer han att ha m\u00f6jlighet att \u00e4ndra avst\u00e5ndet mellan bokst\u00e4verna och g\u00f6ra justeringar tills teckensnittet och kerningen ser perfekta ut. Att inte fokusera p\u00e5 kerning kommer att kosta dig eftersom det ofta \u00e4r det enskilt st\u00f6rsta som skiljer professionellt arbete fr\u00e5n ett som har utf\u00f6rts av amat\u00f6rer eller wannabe-designers.\n<\/p>\n
\n Praktiskt tips:<\/strong> M\u00e4ngden utrymme som du har mellan varje bokstav m\u00e5ste vara lika om du vill att din webbplats ska se professionell ut. Om du designar ett typsnitt, kom ih\u00e5g att integrera kerning eftersom l\u00e4sbarheten \u00f6kar om det finns rumslig kontinuitet mellan bokst\u00e4verna. \u00c5 andra sidan, om du anv\u00e4nder de typsnitt som redan finns beh\u00f6ver du inte oroa dig f\u00f6r detta eftersom alla dessa typsnitt kommer att inneh\u00e5lla information om avst\u00e5ndet.\n<\/p>\n
\n Slutsats
\n<\/h4>\n\n F\u00f6r f\u00f6retags\u00e4gare som vill f\u00f6rb\u00e4ttra sitt varum\u00e4rke och f\u00e5 in fler kunder \u00e4r en viktig aspekt att komma ih\u00e5g att anv\u00e4nda typsnitt som kompletterar kopian. Om du g\u00f6r saker r\u00e4tt kommer det ocks\u00e5 att p\u00e5verka l\u00e4sarens k\u00e4nslor, hum\u00f6r och handling. Detta i sin tur kommer att g\u00f6ra det mer sannolikt f\u00f6r dem att konvertera till en lojal kund. Kom ih\u00e5g att ett av de b\u00e4sta s\u00e4tten att testa typsnittet, dess storlek, f\u00e4rg etc. \u00e4r att testk\u00f6ra det och se vad resultaten ger. Ge ocks\u00e5 hela processen lite tid och din odelade uppm\u00e4rksamhet f\u00f6r om du vill ha perfektion m\u00e5ste jobba f\u00f6r det.\n<\/p>\n
\n I slut\u00e4ndan l\u00e4mnar jag er med detta inspirerande citat fr\u00e5n Steve Jobs, som \u00e4r prim\u00e4rt ansvarig f\u00f6r varf\u00f6r vi \u00e4gnar s\u00e5 mycket uppm\u00e4rksamhet \u00e5t typsnitt idag.\n<\/p>\n
\n\n ”Jag best\u00e4mde mig f\u00f6r att ta en kalligrafikurs f\u00f6r att l\u00e4ra mig hur man g\u00f6r (l\u00e4ra mig kalligrafi). Jag l\u00e4rde mig om Serif och Sans-Serif typsnitt, om att variera utrymmet mellan olika bokstavskombinationer, om vad som g\u00f6r bra typografi bra. Det var vackert. Historisk. Konstn\u00e4rligt subtilt p\u00e5 ett s\u00e4tt som vetenskapen aldrig kan f\u00e5nga.”\n <\/p>\n
\n -Steve Jobs\n <\/p>\n<\/blockquote>\n