\n H\u00e4r diskuterar vi bara UX och typografil\u00e4nken, utan att n\u00e4mna typografins roll f\u00f6r att forma webbplatsens visuella personlighet, definiera ditt varum\u00e4rke och f\u00e5nga l\u00e4sarens uppm\u00e4rksamhet. Kolla in den h\u00e4r artikeln<\/a> f\u00f6r att l\u00e4ra dig mer.\n<\/p>\n \n Valet av typografi f\u00f6r den h\u00e4r kyrkans webbplats \u00f6kar inte bara UX p\u00e5 webbplatsen, utan hj\u00e4lper ocks\u00e5 till att forma varum\u00e4rkets visuella identitet).\n<\/p>\n \n Hur man \u00f6kar anv\u00e4ndarupplevelsen p\u00e5 din webbplats genom att optimera typografi?\n<\/p>\n \n Det finns flera s\u00e4tt du kan \u00f6ka UX p\u00e5 din webbplats genom att optimera typografin. Eftersom UX och typografi \u00e4r n\u00e4ra sammankopplade, genom att optimera typografi, optimerar du ocks\u00e5 l\u00e4sbarheten f\u00f6r din text, och p\u00e5 s\u00e5 s\u00e4tt \u00f6kar den \u00f6vergripande UX p\u00e5 din webbplats. L\u00e5t oss se vad reglerna f\u00f6r att optimera typografi \u00e4r:\n<\/p>\n \n Om du vill att din webbplats ska se sammanh\u00e4ngande och professionell ut, anv\u00e4nd upp till tre typsnitt (inte fler). Olika typsnitt p\u00e5 en webbplats krockar och distraherar anv\u00e4ndaren fr\u00e5n att l\u00e4sa texten. Anv\u00e4ndning av flera typsnitt som ser liknande ut hj\u00e4lper dig att skapa samst\u00e4mmighet i UX p\u00e5 dina webbsidor och befriar anv\u00e4ndare fr\u00e5n att ta till sig frekventa stil\u00e4ndringar.\n<\/p>\n \n Det \u00e4r precis vad du b\u00f6r undvika p\u00e5 din webbplats.\n<\/p>\n \n Ofta r\u00e4cker det med anv\u00e4ndning av bara ett typsnitt. Om du fortfarande k\u00e4nner att du beh\u00f6ver ett par typsnitt, v\u00e4lj typsnitt som har samma teckenbredd. I det h\u00e4r fallet kommer typsnitten inte att skilja sig alltf\u00f6r mycket fr\u00e5n varandra och distrahera l\u00e4saren.\n<\/p>\n \n Denna ombyggnadswebbplats anv\u00e4nder det okonventionella Six Caps-teckensnittet f\u00f6r att \u00f6ka webbplatsens visuella identitet. Detta teckensnitt kombineras med Roboto Condensed f\u00f6r att ha tv\u00e5 teckensnitt, vars teckenbredd matchar.\n<\/p>\n \n En annan bra id\u00e9 om att kombinera ett par typsnitt \u00e4r att kombinera de typsnitt som imiterar handstil med de vanliga. Handskriven typografi ger en personlig touch till din \u00f6vergripande webbdesign och utvecklar den visuella karakt\u00e4ren p\u00e5 din webbplats.\n<\/p>\n \n Den h\u00e4r webbplatsen har en mjuk och feminin k\u00e4nsla med teckensnittet Caveat Handwriting.\n<\/p>\n \n Seriffer \u00e4r de sm\u00e5 linjerna i \u00e4ndarna av bokstavsdrag. I tryckt typografi hj\u00e4lper seriffer m\u00e4nniskor att k\u00e4nna igen tryckta bokst\u00e4ver snabbare och mer effektivt. Men p\u00e5 sk\u00e4rmen, s\u00e4rskilt p\u00e5 en icke-Retina en, \u00e4r seriffer inte s\u00e5 v\u00e4l skisserade som p\u00e5 papperet, vilket delvis f\u00f6rs\u00e4mrar l\u00e4sningen.\n<\/p>\n \n F\u00f6rutom att s\u00e4kerst\u00e4lla b\u00e4ttre l\u00e4sbarhet talar sans serif-teckensnitt p\u00e5 ett dj\u00e4rvare och mer minimalistiskt s\u00e4tt.\n<\/p>\n \n H\u00e4r argumenterar jag inte f\u00f6r att du helt ska \u00f6verge serif-teckensnitt. Ett b\u00e4ttre r\u00e5d skulle vara att vara mer f\u00f6rsiktig med dem och anv\u00e4nda de som \u00e4r rena och exakta.\n<\/p>\n \n Till exempel anv\u00e4nder den h\u00e4r kreativa fotograferingswebbplatsen Open Sans sans serif-font som hj\u00e4lper webbplatsen att g\u00f6ra ett dj\u00e4rvt, elegant och avg\u00f6rande uttalande.\n<\/p>\n \n Utrymmet p\u00e5 Internet \u00e4r obegr\u00e4nsat. Det \u00e4r d\u00e4rf\u00f6r det inte finns n\u00e5got behov av att spara det och v\u00e4lja sm\u00e5 teckenstorlekar som belastar anv\u00e4ndarna ytterligare. L\u00e4sare med nedsatt syn kan uppleva sv\u00e5righeter att l\u00e4sa liten text, medan \u00e4ven l\u00e4sare med god syn upplever tr\u00f6tthet och m\u00e5ste ta pauser f\u00f6r att komma till slutet av, l\u00e5t oss s\u00e4ga, 10pt text.\n<\/p>\n \n Om du inte vill att dina anv\u00e4ndare ska k\u00e4mpa med att l\u00e4sa texten du presenterar eller zooma in, v\u00e4lj 16 pkt + teckenstorlekar. S\u00e5dana teckensnittsstorlekar minimerar \u00f6gonbelastningen och hj\u00e4lper anv\u00e4ndare att uppn\u00e5 sina m\u00e5l p\u00e5 din webbplats utan visuell utmattning.\n<\/p>\n \n Malcolmys webbplats anv\u00e4nder l\u00e4sbar 16pt typografi f\u00f6r sina hem- och bloggsidor.\n<\/p>\n \n P\u00e5 din webbplats ska du inte fylla p\u00e5 allt tillg\u00e4ngligt utrymme med din text. Genom att ha en optimal radl\u00e4ngd h\u00e5ller du dig till h\u00f6ga l\u00e4supplevelsestandarder. Om raderna \u00e4r f\u00f6r korta m\u00e5ste l\u00e4sarens \u00f6gon g\u00e5 fram och tillbaka n\u00e4r man l\u00e4ser texten, vilket medf\u00f6r ytterligare anstr\u00e4ngning f\u00f6r \u00f6gonen. Om raderna \u00e4r f\u00f6r l\u00e5nga \u00e4r det f\u00f6r sv\u00e5rt att koncentrera sig p\u00e5 exakt det ord du l\u00e4ser och f\u00f6r l\u00e4tt att g\u00e5 vilse.\n<\/p>\n \n F\u00f6r att undvika b\u00e5da ogynnsamma situationerna, h\u00e5ll dig till 60 tecken per rad (f\u00f6r surfplattor\/PC-sk\u00e4rmar).\n<\/p>\n \n Den h\u00e4r bilden illustrerar att texter med f\u00f6r korta eller f\u00f6r l\u00e5nga rader \u00e4r sv\u00e5rare att l\u00e4sa \u00e4n texter som h\u00e5ller sig till en radl\u00e4ngd p\u00e5 ”gyllene mitten” p\u00e5 ~ 60 pkt.\n<\/p>\n \n Den optimala linjel\u00e4ngden f\u00f6r mobila enheter (t.ex. smartphones) \u00e4r kortare. F\u00f6r att texten ska vara l\u00e4sbar p\u00e5 sm\u00e5 sk\u00e4rmar b\u00f6r raden inneh\u00e5lla cirka 30 \u2013 40 tecken.\n<\/p>\n \n Som du vet \u00e4r bokstavsstorleken f\u00f6r rubriker vanligtvis st\u00f6rre \u00e4n f\u00f6r br\u00f6dtext. Rubrikerna skiljer sig ocks\u00e5 \u00e5t i storlek, allt fr\u00e5n den minsta till den st\u00f6rsta. P\u00e5 din webbplats m\u00e5ste du v\u00e4lja olika teckenstorlekar f\u00f6r olika element (t.ex. knappar, bildtexter, navigeringsobjekt, etc.), s\u00e5v\u00e4l som olika teckensnittsvikter f\u00f6r betoning.\n<\/p>\n \n F\u00f6r att s\u00e4kerst\u00e4lla s\u00e4rskiljbarheten av dina webbplatselement, v\u00e4lj ett teckensnitt som finns i olika storlekar och vikter. Om du v\u00e4ljer ett av standardteckensnitten, t.ex. Google Fonts Roboto-typsnitt, kommer du att se alla varianter som det har. Vissa typsnitt finns i 10+ varianter, vissa har bara ett par. V\u00e4lj ett teckensnitt som har en m\u00e4ngd olika varianter f\u00f6r att s\u00e4kerst\u00e4lla en m\u00e5ngsidig inneh\u00e5llsrepresentation p\u00e5 din webbplats.\n<\/p>\n \n Olika teckensnittsstilar av Roboto Google-teckensnitt.\n<\/p>\n \n Tiderna f\u00f6r flerf\u00e4rgade, skrikande webbplatser har passerat. Nu \u00e4r l\u00e4sbarhet och kontrast de styrande krafterna som avg\u00f6r f\u00e4rgvalen. F\u00f6rst och fr\u00e4mst ska ditt inneh\u00e5ll vara l\u00e4sbart, och den kombination som i m\u00e5nga \u00e5r ans\u00e5gs vara den b\u00e4sta \u00e4r svart text p\u00e5 vit bakgrund. Denna kombination s\u00e4kerst\u00e4ller maximal kontrast och g\u00e5r tillbaka till klassisk typografi.\n<\/p>\n \n Men nyligen har det ofta h\u00e4vdats att svart f\u00e4rg p\u00e5f\u00f6r mer \u00f6gonp\u00e5frestning \u00e4n m\u00f6rkgr\u00e5. Nyanserna av m\u00f6rkgr\u00e5 kontrasterar ocks\u00e5 bra med vit bakgrund, men de \u00e4r lite mindre t\u00e4ta och ger en bekv\u00e4mare l\u00e4supplevelse.\n<\/p>\n \n Det h\u00e4r \u00e4r nyanserna av gr\u00e5tt som \u00f6vertr\u00e4ffar svart n\u00e4r det g\u00e4ller att s\u00e4kerst\u00e4lla en bekv\u00e4m l\u00e4supplevelse.\n<\/p>\n \n En webbsida som anv\u00e4nder m\u00f6rkgr\u00e5 som skjutreglagets textf\u00e4rg.\n<\/p>\n \n N\u00e4r du g\u00f6r ditt f\u00e4rgval, se till att du testar det p\u00e5 olika enheter och i olika milj\u00f6er. Texten som \u00e4r bra att l\u00e4sa i en typisk kontorsmilj\u00f6 kan vara sv\u00e5r att urskilja p\u00e5 en smartphone, s\u00e4rskilt n\u00e4r den anv\u00e4nds utomhus. Det \u00e4r sv\u00e5rt att ta h\u00e4nsyn till alla faktorer, men ditt m\u00e5l b\u00f6r vara att ta h\u00e4nsyn till de flesta milj\u00f6er och ge olika anv\u00e4ndargrupper en bekv\u00e4m surfupplevelse.\n<\/p>\n \n Att minimera linjeh\u00f6jden f\u00f6r att f\u00e5 plats med mer inneh\u00e5ll \u00e4r inte en bra praxis. Om raderna \u00e4r f\u00f6r n\u00e4ra varandra \u00e4r det mer sannolikt att en l\u00e4sare hoppar till f\u00f6reg\u00e5ende eller efterf\u00f6ljande rad och fastnar. Avst\u00e5ndet mellan raderna (ledande) b\u00f6r vara 30 % st\u00f6rre \u00e4n h\u00f6jden p\u00e5 de tecken som anv\u00e4nds. En s\u00e5dan ledning s\u00e4kerst\u00e4ller b\u00e4sta l\u00e4sbarhet f\u00f6r inneh\u00e5llet och dess tydliga visuella uppfattning.\n<\/p>\n\n 1: Minimera antalet anv\u00e4nda teckensnitt
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2: V\u00e4lj Sans Serif-teckensnitt f\u00f6r att f\u00f6rb\u00e4ttra l\u00e4sbarheten
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Mind Decent Font Size
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4: Observera optimal linjel\u00e4ngd
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5: V\u00e4lj typsnitt som fungerar bra i olika storlekar
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6: G\u00f6r smarta f\u00e4rgval
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7: Experimentera inte med linjeh\u00f6jd
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n