Detta \u00e4r n\u00e5got som ofta kan f\u00f6rekomma p\u00e5 hemsidor. J\u00e4mf\u00f6r dessa tv\u00e5 texter, vilka anser du l\u00e4ttast att l\u00e4sa?<\/p>\n\n\n\n En rekommendation \u00e4r att h\u00e5lla sig till max 75 tecken i bredd. Allt l\u00e4ngre \u00e4n det blir sv\u00e5rt att l\u00e4sa och orsakar on\u00f6dig belastning p\u00e5 \u00f6gonen p\u00e5 grund av avst\u00e5ndet \u00f6gat m\u00e5ste resa fr\u00e5n v\u00e4nster till h\u00f6ger och tillbaka igen. Hur g\u00f6r vi detta med css? Jo, s\u00e4tt en max-width p\u00e5 elementet paragrafen \u00e4r i. Sj\u00e4lv rekommenderar jag att st\u00e4lla in en max-width separat i en container eller en grid-klass ist\u00e4llet f\u00f6r p\u00e5 paragraf-elementet i din css f\u00f6r om man i framtiden vill \u00e4ndra p\u00e5 textens bredd eller storlek blir det d\u00e5 l\u00e4ttare att korrigera.<\/p>\n\n\n\n Tips nr 2: R\u00e4tt radavst\u00e5nd<\/strong>.<\/p>\n\n\n\n Titta p\u00e5 dessa tre paragrafer. Vilken tycker du \u00e4r l\u00e4ttast att l\u00e4sa?<\/p>\n\n\n\n Felaktig radavst\u00e5nd bidrar till en sv\u00e5rl\u00e4st text. Avst\u00e5ndet mellan raderna skall vara s\u00e5 stort att det bildas ett tydligt ljusrum. En bra tumregel \u00e4r att h\u00e5lla radavst\u00e5ndet mellan 140% till 180% av grundstorleken p\u00e5 fonten. Mindre g\u00f6r det sv\u00e5rl\u00e4st och k\u00e4nns tr\u00e5ngt medans st\u00f6rre g\u00f6r att \u00f6gat kan f\u00f6rlora sin fokus och man blir vilsen i texten. Hur till\u00e4mpar vi detta med css d\u00e5? Jo s\u00e4g att du har en font-size p\u00e5 18pixlar och du siktar p\u00e5 att ha ett radavst\u00e5nd p\u00e5 150% s\u00e5 multiplicerar du helt enkelt din font med 1.5 f\u00f6r att f\u00e5 r\u00e4tt radavst\u00e5nd: 27 pixlar.<\/p>\n\n\n\n <\/p>\n\n\n\n Typsnittet sj\u00e4lv kan avg\u00f6ra vilket radavst\u00e5nd som kr\u00e4vs. Ett typsnitt med l\u00e5nga upp- och nerstaplar beh\u00f6ver mycket luft f\u00f6r att staplarna inte skall kollidera. Titta p\u00e5 bilden nedan:<\/p>\n\n\n\n Tips nr 3: Undvik tunn font om inte designen kr\u00e4ver det. <\/strong><\/p>\n\n\n\n Kanske ett av de vanligare problemen p\u00e5 n\u00e4tet n\u00e4r det g\u00e4ller typografi p\u00e5 webben. N\u00e4mligen anv\u00e4ndandet av extremt tunna sans-serif typsnitt f\u00f6r stycketext. Detta g\u00f6r texten sv\u00e5rl\u00e4st eftersom texten b\u00f6rjar blekna mot bakgrunden p\u00e5 grund av bristen p\u00e5 kontrast. Ett exempel p\u00e5 ett f\u00f6r tunt typsnitt: <\/p>\n\n\n\n F\u00f6rs\u00f6k och l\u00e4s texten d\u00e4r. M\u00e4rker du att du k\u00e4mpar f\u00f6r att l\u00e4sa den? Mer fokus kr\u00e4vs f\u00f6r att l\u00e4sa den. L\u00e4sbarheten minskar och l\u00e4sningen blir mycket mer irriterande \u00e4n den verkligen m\u00e5ste vara. Jag rekommenderar att du v\u00e4ljer en vanlig vikt f\u00f6r br\u00f6dtext. Att l\u00e4sa tunna fonter kan vara en fin effekt i korta partier men att l\u00e4sa den i en l\u00e4ngre form blir anstr\u00e4ngande. <\/p>\n\n\n\n Tips nr 4: Skapa en b\u00e4ttre hierarki med fetstil p\u00e5 dina Rubriker.<\/strong><\/p>\n\n\n\n Kan k\u00e4nnas sj\u00e4lvklart men en tydlig hierarki \u00e4r avg\u00f6rande f\u00f6r att kontrollera l\u00e4sarens fokus, s\u00e4rskilt i komplexa applikationer som visar massor av data. \u00c4ven om det brukade vara vanligare f\u00f6r ett par \u00e5r sedan, brukar jag fortfarande se att m\u00e5nga anv\u00e4nder mycket tunna vikter f\u00f6r rubriker p\u00e5 webbplatser. Hur sv\u00e5rt \u00e4r det att se rubriken nedan?<\/p>\n\n\n\n Det finns ofantligt mycket b\u00f6cker och artiklar om typografi om man vill l\u00e4ra sig mera men detta \u00e4r enkla knep som ger en bra grund. Som webbdesigner \u00e4r det en bra egenskap att ha grundl\u00e4ggande information om hur man ska presentera text p\u00e5 n\u00e4tet. 95% av informationen p\u00e5 webben \u00e4r n\u00e4mligen text.<\/p>\n","protected":false},"excerpt":{"rendered":" Att skriva p\u00e5 webben \u00e4r inte helt olikt som att skriva f\u00f6r tryck. M\u00e5nga principer st\u00e4mmer f\u00f6r b\u00e5da och kan till\u00e4mpas f\u00f6r respektive medium. Oavsett om du anv\u00e4nder dig av pixlar, ems eller viewport width finns det n\u00e5gra saker att t\u00e4nka p\u00e5 och akta sig f\u00f6r s\u00e5 att inte texten blir sv\u00e5rl\u00e4st f\u00f6r bes\u00f6karen. H\u00e4r […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_oct_exclude_from_cache":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/posts\/748"}],"collection":[{"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":15,"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/posts\/748\/revisions"}],"predecessor-version":[{"id":791,"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/posts\/748\/revisions\/791"}],"wp:attachment":[{"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/media?parent=748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/categories?post=748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mcmedia.se\/wp-json\/wp\/v2\/tags?post=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/i0.wp.com\/www.mcmedia.se\/wp-content\/uploads\/2019\/10\/l\u00e5ngtext.png?ssl=1\")
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n