{"id":3733,"date":"2024-12-20T17:46:00","date_gmt":"2024-12-20T16:46:00","guid":{"rendered":"https:\/\/mijn.host\/blog\/slik-velger-du-den-beste-fonten-for-nettstedet-ditt\/"},"modified":"2026-09-16T12:07:12","modified_gmt":"2026-09-16T10:07:12","slug":"slik-velger-du-den-beste-fonten-for-nettstedet-ditt","status":"publish","type":"post","link":"https:\/\/my.host\/blog\/no\/slik-velger-du-den-beste-fonten-for-nettstedet-ditt\/","title":{"rendered":"Slik velger du den beste fonten for nettstedet ditt"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u00c5 velge riktig font for nettstedet ditt er ikke en s\u00e5 enkel oppgave som det kan virke ved f\u00f8rste \u00f8yekast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Velge noen f\u00e5 fonter som du synes ser fine ut og bare kaste dem p\u00e5 nettstedet ditt? Ikke s\u00e5 raskt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Slett ikke alle fonter egner seg for nettsteder. Og det handler ikke bare om det visuelle aspektet: \u00e5 bruke fonter tilfeldig kan ogs\u00e5 f\u00f8re til tekniske problemer (mer om dette senere).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Etter \u00e5 ha utviklet over 30 nettsteder, har jeg f\u00e5tt en ganske god forst\u00e5else av hva som kreves for \u00e5 velge fonter for et nettsted. I denne korte artikkelen kan du lese alt du trenger \u00e5 vite.<\/p>\n\n\n\n<h2 id=\"7-tips-for-a-velge-en-font-for-nettstedet-ditt\" class=\"wp-block-heading\"><strong>7 tips for \u00e5 velge en font for nettstedet ditt<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dette er mine viktigste tips for \u00e5 velge fonter for nettstedet ditt.<\/p>\n\n\n\n<h3 id=\"1-lesbarhet-fremfor-alt\" class=\"wp-block-heading\"><strong>1. Lesbarhet fremfor alt<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dette kan virke som en selvf\u00f8lge. Men du vil bli overrasket over hvor mange nettsteder det er med fonter som ikke er s\u00e5 enkle \u00e5 lese.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kreative, svingete fonter kan gi nettstedet ditt en unik karakter. Men n\u00e5r lesbarheten st\u00e5r p\u00e5 spill, er det lurt \u00e5 velge noe mindre eventyrlysten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00f8rg ogs\u00e5 for at fonten din er minst 16 piksler stor (18 piksler, eller enda mer, pleier ofte \u00e5 fungere bedre).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Og at fonten er lesbar p\u00e5 hver skjermst\u00f8rrelse (sjekk ogs\u00e5 nettsiden din p\u00e5 telefonen din) er ogs\u00e5 sv\u00e6rt viktig.<\/p>\n\n\n\n<h3 id=\"2-velg-ikke-mer-enn-to-fonter\" class=\"wp-block-heading\"><strong>2. Velg ikke mer enn to fonter<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c5 velge mer enn to fonter gir noen problemer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nettstedet ditt begynner \u00e5 se rotete ut<\/li>\n\n\n\n<li>Du vil merke en negativ innvirkning p\u00e5 lastetiden til nettstedet ditt<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Velg en font for titlene dine, og velg en for \u201cbody\u201d-teksten (som brukes i avsnittene dine, osv.).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">P\u00e5 mange av nettstedene mine bruker jeg kun \u00e9n enkelt font. Hovedsakelig velger jeg dette p\u00e5 grunn av lastetid. Et ekstra font vil ikke ha en merkbar innvirkning p\u00e5 nettstedshastigheten, men for en hastighetsfanatiker som meg teller hvert millisekund.<\/p>\n\n\n\n<h3 id=\"3-velg-en-font-som-passer-til-ditt-merke\" class=\"wp-block-heading\">3. Velg en font som passer til ditt merke<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Er merkevaren din:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Moderne og minimalistisk? Velg da en sans-serif font (for eksempel Lato, Open Sans).<\/li>\n\n\n\n<li>Elegant og profesjonell? Da passer serif bedre (for eksempel Merriweather, Playfair Display).<\/li>\n\n\n\n<li>Kreativ og lett? Display eller skriptfonter kan fungere (men som nevnt ovenfor, hold \u00f8ye med lesbarheten!).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Du forventer en annen font p\u00e5 et yoga-nettsted enn p\u00e5 en advokatfirmas nettside. &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Skap kontrast ved \u00e5 kombinere fonter<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Her er et eksempel p\u00e5 et nettsted jeg administrerer hvor jeg har valgt to fonter som kontrasterer sterkt med hverandre:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"650\" sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/voorbeeld-contrasterende-lettertypes.png\" alt=\"\" class=\"wp-image-1902\" srcset=\"https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/voorbeeld-contrasterende-lettertypes.png 1000w, https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/voorbeeld-contrasterende-lettertypes-300x195.png 300w, https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/voorbeeld-contrasterende-lettertypes-768x499.png 768w\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">PT Serif for body, og Montserrat for titler.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kontraststilen mellom disse fontene fungerer veldig bra. N\u00e5r du velger to fonter, \u00f8nsker du ikke at de skal ligne for mye p\u00e5 hverandre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Senere i denne artikkelen vil du finne flere eksempler p\u00e5 fonter som fungerer godt sammen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>EKSTRA TIPS:<\/strong> Hver profesjonelt designet nettside har en fast proporsjon n\u00e5r det gjelder de forskjellige overskriftene (H1, H2, H3, osv.) og standardteksten. Velg st\u00f8rrelsen p\u00e5 dine forskjellige teksttyper basert p\u00e5 hva som &#8220;f\u00f8les riktig&#8221;. Et verkt\u00f8y som <a href=\"https:\/\/typescale.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typescale<\/a> kan s\u00f8rge for at st\u00f8rrelsen p\u00e5 teksttypene dine er godt koordinert i forhold til hverandre.<\/p>\n\n\n\n<h3 id=\"5-se-fonten-din-i-forskjellige-nettlesere-og-pa-forskjellige-enheter\" class=\"wp-block-heading\"><strong>5. Se fonten din i forskjellige nettlesere og p\u00e5 forskjellige enheter<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Noen ganger fungerer en font ikke godt p\u00e5 en bestemt nettleser eller enhet. Derfor er det viktig \u00e5 teste dette godt.<\/p>\n\n\n\n<h3 id=\"6-vaer-oppmerksom-pa-ytelse\" class=\"wp-block-heading\"><strong>6. V\u00e6r oppmerksom p\u00e5 ytelse<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bruk s\u00e5kalte <em>web safe<\/em> fonter eller fonter som er optimalisert for raske lastetider.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">B\u00e5de Google Fonts og Adobe Fonts tilbyr gratis fonter optimalisert for nettsteder (du kan lese mer om Google Fonts nedenfor).<\/p>\n\n\n\n<h3 id=\"7-tenk-pa-tilgjengelighet\" class=\"wp-block-heading\"><strong>7. Tenk p\u00e5 tilgjengelighet<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tilgang til det f\u00f8rste punktet: Internett brukes ogs\u00e5 av synshemmede og eldre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Spesielt for disse gruppene er tilgjengelighet av nettstedet ditt sv\u00e6rt viktig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00f8rg for at fargen p\u00e5 fonten din st\u00e5r i sterk kontrast til bakgrunnen p\u00e5 siden din. Og s\u00f8rg for at teksten din ikke blir for tynn eller svingete.<\/p>\n\n\n\n<h2 id=\"mitt-rad-bruk-google-fonts\" class=\"wp-block-heading\"><strong>Mitt r\u00e5d: bruk Google Fonts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Som nettstedseier vil jeg, hvis det er mulig, alltid bruke Google Fonts. Dette er hvorfor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utvalget er enormt. Med mer enn 1.000 fonter, b\u00f8r du kunne finne en passende font for hvert prosjekt.<\/li>\n\n\n\n<li>Fungerer godt p\u00e5 alle nettlesere og enheter. Google-fontene er <em>web-safe<\/em>, s\u00e5 du trenger ikke bekymre deg for at de vil se d\u00e5rlige ut i en bestemt nettleser eller gadget.<\/li>\n\n\n\n<li>Raske lastetider. Google Fonts er hostet p\u00e5 Googles superraske servere.<\/li>\n\n\n\n<li>Enkelt \u00e5 integrere. Google tilbyr lettfattelige <a href=\"https:\/\/developers.google.com\/fonts\/docs\/getting_started\" target=\"_blank\" rel=\"noreferrer noopener\">instruksjoner<\/a> som gj\u00f8r det enkelt \u00e5 f\u00e5 fontene deres til \u00e5 fungere p\u00e5 nettstedet ditt.<\/li>\n\n\n\n<li>Det er gratis. Du har ingen lisenskostnader slik du har med noen andre fonter.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Bruker du <a href=\"https:\/\/my.host\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a>? Da har du flaks. Mange popul\u00e6re WordPress-temaer som Kadence og GeneratePress har en Google Fonts-integrasjon.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selv bruker jeg Google Fonts p\u00e5 alle mine nettsteder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"456\" sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/google-fonts.png\" alt=\"\" class=\"wp-image-1903\" srcset=\"https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/google-fonts.png 1000w, https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/google-fonts-300x137.png 300w, https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/google-fonts-768x350.png 768w\" \/><\/figure>\n\n\n\n<h2 id=\"finne-ut-hva-slags-font-et-nettsted-bruker\" class=\"wp-block-heading\"><strong>Finne ut hva slags font et nettsted bruker<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Har du kommet over et nettsted som bruker en font du liker? Dette er hvordan du kan sjekke hvilken font som brukes (i Chrome).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Merk teksten, h\u00f8yreklikk og velg &#8220;Inspiser&#8221;. Rull nedover i skjermen som vises n\u00e5 i delen Styles, og du vil til slutt finne ut hvilken font som brukes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"461\" sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/chrome-inspect.png\" alt=\"\" class=\"wp-image-1904\" srcset=\"https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/chrome-inspect.png 1000w, https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/chrome-inspect-300x138.png 300w, https:\/\/my.host\/blog\/wp-content\/uploads\/2024\/12\/chrome-inspect-768x354.png 768w\" \/><\/figure>\n\n\n\n<h2 id=\"eksempler-pa-fonter-som-passer-godt-sammen\" class=\"wp-block-heading\"><strong>Eksempler p\u00e5 fonter som passer godt sammen<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hvis du \u00f8nsker \u00e5 bruke flere fonter, kan du pr\u00f8ve et av parene nedenfor.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Tittel font<\/strong><\/td><td><strong>Body font<\/strong><\/td><td><strong>Hvorfor det fungerer<\/strong><\/td><\/tr><tr><td><strong>Playfair Display<\/strong><\/td><td><strong>Lato<\/strong><\/td><td>Klassisk og moderne, elegant og lesbar.<\/td><\/tr><tr><td><strong>Merriweather<\/strong><\/td><td><strong>Open Sans<\/strong><\/td><td>Balansed og sv\u00e6rt lesbar for lengre tekster.<\/td><\/tr><tr><td><strong>Roboto Slab<\/strong><\/td><td><strong>Roboto<\/strong><\/td><td>Konsistent, ren look med en teknisk flair.<\/td><\/tr><tr><td><strong>Oswald<\/strong><\/td><td><strong>Montserrat<\/strong><\/td><td>Fet og geometrisk, ideell for moderne nettsteder.<\/td><\/tr><tr><td><strong>Poppins<\/strong><\/td><td><strong>Source Sans Pro<\/strong><\/td><td>Vennlig, profesjonell og allsidig.<\/td><\/tr><tr><td><strong>Bebas Neue<\/strong><\/td><td><strong>Nunito<\/strong><\/td><td>Kraftige overskrifter med flytende, godt lesbar br\u00f8dtekst.<\/td><\/tr><tr><td><strong>Raleway<\/strong><\/td><td><strong>Roboto<\/strong><\/td><td>Elegante for titler og p\u00e5litelige for tekst.<\/td><\/tr><tr><td><strong>Lora<\/strong><\/td><td><strong>Muli<\/strong><\/td><td>Litter\u00e6r og moderne, perfekt for blogger.<\/td><\/tr><tr><td><strong>Abril Fatface<\/strong><\/td><td><strong>Work Sans<\/strong><\/td><td>Dramatisk og i\u00f8ynefallende, ideell for kreative nettsteder.<\/td><\/tr><tr><td><strong>Dancing Script<\/strong><\/td><td><strong>Quicksand<\/strong><\/td><td>Spillende men godt lesbar for kunstneriske nettsteder.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p class=\"wp-block-paragraph\">Via Google Fonts kan du sette sammen enda flere skrifttypepar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c5 velge riktig font for nettstedet ditt er ikke en like enkel oppgave som det ser ut ved f\u00f8rste \u00f8yekast. \u00c5 bare velge noen fonter som du synes ser bra ut og plassere dem p\u00e5 siden din? Ikke s\u00e5 raskt. Langt fra alle fonter egner seg for nettsteder. Og det handler ikke bare om [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1901,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[835],"tags":[],"class_list":["post-3733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-og-triks"],"lang":"nb","translations":{"nb":3733,"sv":3824,"nl":1900,"da":3611,"en":3240},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/comments?post=3733"}],"version-history":[{"count":1,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3733\/revisions"}],"predecessor-version":[{"id":4032,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3733\/revisions\/4032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media\/1901"}],"wp:attachment":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media?parent=3733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/categories?post=3733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/tags?post=3733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}