{"id":265148,"date":"2023-07-10T06:40:00","date_gmt":"2023-07-10T03:40:00","guid":{"rendered":"https:\/\/inform.click\/effekter-av-typografi-pa-anvandarupplevelsen\/"},"modified":"2023-07-10T07:32:00","modified_gmt":"2023-07-10T04:32:00","slug":"effekter-av-typografi-pa-anvandarupplevelsen","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/effekter-av-typografi-pa-anvandarupplevelsen\/","title":{"rendered":"Effekter av typografi p\u00e5 anv\u00e4ndarupplevelsen"},"content":{"rendered":"<p># Typografi \u00e4r en konst och teknik som blir mer och mer popul\u00e4r ju l\u00e4ngre tiden g\u00e5r. Det \u00e4r en avg\u00f6rande f\u00e4rdighet som varje designer m\u00e5ste ha oavsett vad deras fokuserade omr\u00e5de \u00e4r. Om du \u00e4r n\u00e5gon som driver ett f\u00f6retag, vill eller helt enkelt \u00e4r designer, pratas det inte s\u00e5 mycket om typografi utan anledning. Med hj\u00e4lp av typografi kan du g\u00f6ra en best\u00e5ende inverkan p\u00e5 dina l\u00e4sare och anv\u00e4ndare. \u00c4ven om det kanske bara verkar som ett g\u00e4ng ord sammansatta f\u00f6r vissa m\u00e4nniskor, \u00e4r det g\u00e4nget sammansatt p\u00e5 ett mycket logiskt och tekniskt s\u00e4tt, d\u00e4r varje del av det uppm\u00e4rksammas p\u00e5 teet. Det \u00e4r en viktig faktor i designen som inte b\u00f6r och inte f\u00e5r ignoreras. Om du inte \u00e4r s\u00e4ker p\u00e5 varf\u00f6r du ska vara uppm\u00e4rksam p\u00e5 typografi, f\u00f6r att g\u00f6ra det enkelt, \u00e4r det hur du kan h\u00e5lla l\u00e4sarens uppm\u00e4rksamhet p\u00e5 din illustration, varum\u00e4rke eller design. Ja, bilder kan s\u00e4ga mer \u00e4n tusen ord, och det kan \u00e4ven din logotyp och andra illustrationer s\u00e4ga. Men typografi spelar en hel del in i hur l\u00e4nge de tittar p\u00e5 ditt arbete och hur det p\u00e5verkar dem. Betydelse i grafisk design I grafisk design relaterar typografi till teknikerna och resultaten av att arrangera typ p\u00e5 ett s\u00e5dant s\u00e4tt att det representerar varum\u00e4rket och verksamheten du arbetar med s\u00e5 n\u00e4ra som m\u00f6jligt, och ger m\u00e4nniskor en uppfattning om vad det verkligen handlar om. Ju b\u00e4ttre din typografi \u00e4r, desto st\u00f6rre chans har du att bli uppm\u00e4rksammad. S\u00e5 mycket att speciellt med logotyper har vissa f\u00f6retag l\u00e4mnat bilder bakom sig och har gjort sin logotyp med bokst\u00e4ver stiliserade p\u00e5 ett mycket specifikt s\u00e4tt. Detta g\u00f6r varum\u00e4rken l\u00e4ttare att komma ih\u00e5g, ett av de vanligaste exemplen \u00e4r Coca Cola. Det finns en hel [historia](http:\/\/www.coca-cola.co.uk\/stories\/the-logo-story) bakom Coca Cola-logotypen, som visar exakt hur allt kom till och vilken inverkan den hade p\u00e5 alla delar av v\u00e4rlden \u00e4r ganska uppenbar. Coca Cola-logotypen \u00e4r det b\u00e4sta exemplet eftersom du kan se exakt hur mycket av dess element som \u00e4r f\u00f6rknippade med sj\u00e4lva varum\u00e4rket. ![](https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb10b9e54.webp) En smart grafisk designer vet hur man utforskar typografi p\u00e5 ett s\u00e4tt d\u00e4r den kommunicerar b\u00e5de de visuella och verbala aspekterna av designen och varum\u00e4rket tydligt. Nu, exakt vad menas med &#8221; **visuella och verbala aspekter** &#8221;? &#8211; **Visual** \u2013 Den mening som skapas av illustrationens visuella utseende; b\u00e5de text och bild. Karakt\u00e4ren typografin har och hur den f\u00e5r dig att k\u00e4nna bidrar till dess visuella kvalitet. &#8211; **Verbal** \u2013 Bokstavlig betydelse av orden eller frasen som anv\u00e4nds i illustrationen. N\u00e4r de kombineras p\u00e5 r\u00e4tt s\u00e4tt kan de visuella och verbala aspekterna ha en enorm inverkan p\u00e5 anv\u00e4ndarupplevelsen och demonstrera och f\u00f6rmedla en m\u00e4ngd olika budskap. Ett annat exempel p\u00e5 en mycket stark logotyp med balanserade visuella och verbala aspekter \u00e4r [KitKat-logotypen](https:\/\/www.nestle.co.uk\/aboutus\/history\/blog\/posts\/kitkatnohyphen) . ![](https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb12be534.webp) Denna studie, [h\u00e4r](http:\/\/sheltonography.com\/resources\/Articles\/thangaraj.pdf) , visar mycket tydligt hur typografi kan ha en effekt p\u00e5 oss och hur marknadsf\u00f6rare kan anv\u00e4nda den till sin f\u00f6rdel. Det visar att typsnitten som anv\u00e4nds av n\u00e5gra popul\u00e4ra f\u00f6retag som IBM, Mercedes, Nivea och Marlboro \u00e4r erk\u00e4nda internationellt och det \u00e4r exakt varf\u00f6r dessa f\u00f6retag har investerat i design och upphovsr\u00e4tt f\u00f6r varum\u00e4rkesskyddade typsnitt. Om du inte tror det, ta en titt p\u00e5 bilden nedan fr\u00e5n en annonskampanj av Greenpeace: ![](https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb14ec5a7.webp) \u00c4ven om det inte st\u00e5r KitKat, skapar ditt sinne omedelbart en igenk\u00e4nnbar koppling till varum\u00e4rket. ### Effekter av typografi Kevin Larson och Rosalind Picard presenterade sina resultat om hur typografi p\u00e5verkar st\u00e4mningar i deras artikel, The Aesthetics of Reading, som ocks\u00e5 handlade om f\u00f6rdelarna med bra typografi. F\u00f6ljande \u00e4r ett mycket enkelt exempel, det f\u00f6rsta i studien. Vilken tycker du \u00e4r b\u00e4ttre och roligare att l\u00e4sa? ![](https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb16d3e85.webp) Det enda som skiljer sig i b\u00e5da dokumenten \u00e4r layouten och placeringen av texten. Den andra bilden \u00e4r mycket tydligt l\u00e4ttare att l\u00e4sa och de flesta skulle till och med bli glada \u00f6ver att l\u00e4sa den. Det \u00e4r skarpt och tydligt, och layouten \u00e4r att f\u00f6redra framf\u00f6r den andra. Den f\u00f6rsta bilden verkar ganska f\u00f6rvirrande och n\u00e4stan som om den \u00e4r f\u00f6r mycket att bearbeta. Det kan f\u00f6rvirra ditt sinne och \u00e4r helt enkelt inte ens tilltalande att titta p\u00e5. Dessa processer sker hela tiden i v\u00e5ra hj\u00e4rnor och reflekterar i h\u00f6g grad \u00f6ver v\u00e5rt hum\u00f6r och val vi g\u00f6r efter. P\u00e5 samma s\u00e4tt testar uppsatsen ocks\u00e5 s\u00e4ttet p\u00e5 vilket en text \u00e4r skriven, inklusive ligaturer, sm\u00e5 bokst\u00e4ver, siffror, under-\/upph\u00f6jda funktioner och s\u00e5 vidare. \u00c4ven mellanrummen mellan varje bokstav, ord, mening och stycke p\u00e5verkar ditt hum\u00f6r och produktivitet p\u00e5 vissa kognitiva uppgifter. Uppsatsen visar att symmetri \u00e4r mycket mer f\u00f6redraget \u00e4n oj\u00e4mn slagvikt och avst\u00e5nd mellan och inom tecken. Dessa \u00e4r alla faktorer som m\u00e5ste beaktas n\u00e4r du arbetar online s\u00e5v\u00e4l som offline. Som sagt, det \u00e4r en bra tumregel att ha din logotyp, eller illustration optiskt placerad, snarare \u00e4n matematiskt. Bilden nedan visar skillnaden mellan de b\u00e5da. ![](https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb18b90f5.webp) ##### Positivt hum\u00f6r, b\u00e4ttre resultat Det \u00e4r bara uppenbart att ju mer positivitet din illustration framkallar, desto mer kommer de att attraheras av ditt varum\u00e4rke och din verksamhet. Studien ovan bevisar att bra typografi ocks\u00e5 \u00f6kar kognitiva prestationer. Sanningen \u00e4r att typografi ocks\u00e5 kan p\u00e5verka bed\u00f6mningen. New York Times genomf\u00f6rde en studie, &#8221;\u00c4r du optimist eller pessimist?&#8221; \u00c4ven om studien diskuterade k\u00e4nslor hos deltagare av s\u00e4kerhet under katastrofala h\u00e4ndelser, handlade den mer om effekterna typsnitt kan ha p\u00e5 dig. Och eftersom ingen skada orsakades, kanske det ocks\u00e5 skulle kunna kallas etiskt. Typsnitten som anv\u00e4ndes var Comic Sans, Computer Modern, Trebuchet, Helvetica, Georgia och Baskerville. Studien genomf\u00f6rdes p\u00e5 cirka 45 000 deltagare och resultaten visade att m\u00e4nniskor tenderade att h\u00e5lla med typsnittet Baskerville 1,5 % mer \u00e4n resten. 1,5% kan tyckas vara en liten andel, men det \u00e4r tillr\u00e4ckligt betydande f\u00f6r att visa att typsnittet trots allt p\u00e5verkar omd\u00f6met. Ju fler teckensnitt du anv\u00e4nder i samma text, desto mer personifierar du den och desto mer uttrycksfull och kreativ blir den. Helt \u00e4rligt, ditt typsnitt fungerar i stort sett som ditt kroppsspr\u00e5k och vi vet alla hur viktigt kroppsspr\u00e5ket \u00e4r. Det kan antingen skapa en k\u00e4nslom\u00e4ssig koppling mellan dig och kunden eller helt f\u00f6rst\u00f6ra din marknadsf\u00f6ringspitch. Och n\u00e4r det kommer till bra typografi \u00e4r det enkelt att f\u00f6rst\u00e5 men inte s\u00e5 mycket att utf\u00f6ra. Ju l\u00e4ttare din text \u00e4r att f\u00f6rst\u00e5, och s\u00e5 kommer den att utveckla en stark karakt\u00e4rsk\u00e4nsla f\u00f6r din publik att fokusera p\u00e5. ##### Typografi i webbdesign N\u00e4r du designar en webbplats m\u00e5ste du komma ih\u00e5g att du f\u00f6rmodligen kommer att ha mycket information d\u00e4r s\u00e5 det \u00e4r en b\u00e4ttre id\u00e9 att h\u00e5lla typsnittet och stilen konsekventa ist\u00e4llet f\u00f6r att blanda ihop det f\u00f6r mycket, vilket bara ha ont att l\u00e4sa. En bra skrivsida talar om f\u00f6r l\u00e4saren och anv\u00e4ndaren exakt var man ska b\u00f6rja l\u00e4sa och hur man g\u00e5r vidare ner p\u00e5 sidan. Vad som \u00e4r viktigt och vad som inte \u00e4r framg\u00e5r tydligt inte i ord, utan genom hur texten \u00e4r upplagd p\u00e5 sidan p\u00e5 webbplatsen. F\u00e4rger \u00e4r ocks\u00e5 mycket viktiga och b\u00f6r h\u00e5llas till ett minimum eller bara en upps\u00e4ttning b\u00f6r anv\u00e4ndas p\u00e5 hela webbplatsen. Att hoppa runt f\u00f6r mycket kan igen, bara f\u00f6rvirra dina l\u00e4sare och g\u00f6ra po\u00e4ngen med webbplatsen eller sidan sv\u00e5rare att f\u00f6rst\u00e5. P\u00e5 samma s\u00e4tt, h\u00e5ll det inte f\u00f6r enkelt till den grad att det inte finns n\u00e5gon skillnad mellan rubriken och inneh\u00e5llet i den. ##### Typografi i Content Marketing Att p\u00e5verka l\u00e4saren och ringa till ditt f\u00f6retag genom inneh\u00e5ll \u00e4r vad content marketing handlar om. Det \u00e4r n\u00e4stan om\u00f6jligt att l\u00e4sa vilken typ av text som helst utan att den f\u00f6rmedlar en k\u00e4nsla, varf\u00f6r det \u00e4r mycket b\u00e4ttre att veta vilken k\u00e4nsla det \u00e4r som du vill f\u00f6rmedla, det b\u00e4sta typsnittet f\u00f6r att den ska skrivas i och allt annat som kommer att dra. uppm\u00e4rksamhet. Ett annat tips att komma ih\u00e5g \u00e4r att **fetstil drar till sig uppm\u00e4rksamhet** medan kursiv stil inte orsakar n\u00e5gon st\u00f6rre inverkan p\u00e5 l\u00e4saren. Men att kursivera inneh\u00e5llet kan tillf\u00f6ra lite elegans och sofistikering till din text. Information \u00e4r ocks\u00e5 l\u00e4ttare att bearbeta n\u00e4r den st\u00e4lls i punktlistor \u00e4n i stora bitar av stycken som, \u00e4rligt talat, ingen har tid att g\u00e5 igenom. Medan n\u00e4r du anv\u00e4nder &#8221;skarpt&#8221; typsnitt som Calibri, g\u00f6r du din po\u00e4ng mycket best\u00e4md och solid. ### Komma ig\u00e5ng Tja, du m\u00e5ste veta exakt vad det \u00e4r du f\u00f6rs\u00f6ker uppn\u00e5. M\u00e5let med ditt typografiprojekt b\u00f6r vara tydligt. Att veta vad du vill att dina l\u00e4sare ska k\u00e4nna \u00e4r viktigt och att sedan arbeta med den tanken i ditt sinne hj\u00e4lper dig att tydligt betona elementen. Prova olika teckensnitt, storlekar, f\u00e4rger, stryk under texten, g\u00f6r den fetstil, kursiv eller vad du nu beh\u00f6ver g\u00f6ra f\u00f6r att f\u00e5 den att f\u00f6rmedla den exakta st\u00e4mningen som l\u00e5ter folk veta om ditt arbete och inte bara f\u00e5nga deras uppm\u00e4rksamhet vid f\u00f6rsta \u00f6gonkastet, men beh\u00e5ll den d\u00e4r ett tag. Om du \u00e4r en lekman kan du helt enkelt prova ett logotypverktyg sj\u00e4lv och se vad som fungerar f\u00f6r dig och vad som inte g\u00f6r det. Gl\u00f6m inte heller att det \u00e4r v\u00e4ldigt viktigt att din text \u00e4r l\u00e4sbar, \u00e4ven i sm\u00e5 teckensnitt. Karakt\u00e4rerna m\u00e5ste kunna identifieras korrekt och g\u00f6ra processen att l\u00e4sa din text smidigt utan att beh\u00f6va investera en hel massa anstr\u00e4ngning f\u00f6r att bara f\u00f6rst\u00e5 den f\u00f6rsta bokstaven. F\u00f6ljande \u00e4r n\u00e5gra element som du kommer att spika applikationen och f\u00f6rst\u00e5elsen av f\u00f6r att f\u00f6rb\u00e4ttra dina typografiskickligheter. ##### Element av typografi &#8211; **Typsnitt** : Textstil som anv\u00e4nds (till exempel Times New Roman, Calibri, Ariel etc.). &#8211; **Teckensnitt** : Specifik typsnittsstil, s\u00e5v\u00e4l som dess bredd, h\u00f6jd och storlek (till exempel Century, storlek 12, fetstil), anv\u00e4nds ofta synonymt med typsnitt. &#8211; **Sp\u00e5rning** : Mellanrum mellan tecken i en text. &#8211; **Kerning** : Liknar sp\u00e5rning men h\u00e4nvisar ocks\u00e5 till det vita utrymmet mellan bokst\u00e4ver och tecken i en text. &#8211; **Leading** : M\u00e4tning av avst\u00e5ndet mellan en textrad med raderna ovanf\u00f6r och under. &#8211; **Radl\u00e4ngd** : Precis som namnet s\u00e4ger det, l\u00e4ngden p\u00e5 texten p\u00e5 en rad. #### Sammanfattningsvis Typografi \u00e4r en konstform som fokuserar p\u00e5 den visuella komponenten i det skrivna ordet. Bara genom att visualisera det p\u00e5 r\u00e4tt s\u00e4tt f\u00f6r din m\u00e5lgrupp kan du skapa en of\u00f6rgl\u00f6mlig effekt. F\u00f6r alla designer \u00e4r det avg\u00f6rande att vara mycket uppm\u00e4rksam p\u00e5 typografi och arbeta f\u00f6r att bem\u00e4stra sin skicklighet i det om de vill utveckla och f\u00f6rb\u00e4ttra sin karri\u00e4r inom designbranschen. Typografi \u00e4r kroppsspr\u00e5k och g\u00f6r eller bryter det f\u00f6rsta intrycket en anv\u00e4ndare har av ditt varum\u00e4rke. Och v\u00e4l, som Cyrus Highsmith s\u00e4ger det, &#8221;Typografi \u00e4r detaljen och presentationen av en ber\u00e4ttelse. Det representerar r\u00f6sten av en atmosf\u00e4r, eller historisk milj\u00f6 av n\u00e5got slag. Den kan g\u00f6ra m\u00e5nga saker.&#8221;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typografi \u00e4r en konst och teknik som blir mer och mer popul\u00e4r ju l\u00e4ngre tiden g\u00e5r. Det \u00e4r en avg\u00f6rande f\u00e4rdighet som varje designer m\u00e5ste ha oavsett vad deras fokuserade omr\u00e5de \u00e4r. Om du \u00e4r n\u00e5gon som driver ett f\u00f6retag, vill eller helt enkelt \u00e4r designer, pratas det inte s\u00e5 mycket om typografi utan anledning. Med hj\u00e4lp av typografi kan du g\u00f6ra en best\u00e5ende inverkan p\u00e5 dina l\u00e4sare och anv\u00e4ndare. \u00c4ven om det kanske bara verkar som ett g\u00e4ng ord sammansatta f\u00f6r vissa m\u00e4nniskor, \u00e4r det g\u00e4nget sammansatt i en mycket logisk och teknisk &#8230;<\/p>\n","protected":false},"author":1,"featured_media":131571,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[61,204,152],"tags":[],"class_list":["post-265148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-och-wordpress","category-webbdesign","category-webbtips-och-tricks"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/comments?post=265148"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265148\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/131571"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=265148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=265148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=265148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}