{"id":3611,"date":"2024-12-20T17:46:00","date_gmt":"2024-12-20T16:46:00","guid":{"rendered":"https:\/\/mijn.host\/blog\/saadan-vaelger-du-den-bedste-skrifttype-til-din-hjemmeside\/"},"modified":"2026-09-16T12:07:12","modified_gmt":"2026-09-16T10:07:12","slug":"saadan-vaelger-du-den-bedste-skrifttype-til-din-hjemmeside","status":"publish","type":"post","link":"https:\/\/my.host\/blog\/dk\/saadan-vaelger-du-den-bedste-skrifttype-til-din-hjemmeside\/","title":{"rendered":"S\u00e5dan v\u00e6lger du den bedste skrifttype til din hjemmeside"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">At v\u00e6lge den rigtige skrifttype til din hjemmeside er en mindre enkel opgave, end det umiddelbart ser ud til.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e6lge et par skrifttyper, du synes er flotte, og smide dem p\u00e5 din side? Ikke s\u00e5 hurtigt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Langt fra enhver skrifttype egner sig til hjemmesider. Og det handler ikke kun om det visuelle aspekt: tilf\u00e6ldig anvendelse af skrifttyper kan ogs\u00e5 f\u00f8re til tekniske problemer (mere om dette senere).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Efter at have udviklet 30+ hjemmesider har jeg en ret god id\u00e9 om, hvad der kr\u00e6ves for at v\u00e6lge skrifttyper til en hjemmeside. I denne korte artikel vil du l\u00e6se alt, hvad du skal vide.<\/p>\n\n\n\n<h2 id=\"7-tips-til-at-vaelge-en-skrifttype-til-din-hjemmeside\" class=\"wp-block-heading\"><strong>7 tips til at v\u00e6lge en skrifttype til din hjemmeside<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dette er mine vigtigste tips til at v\u00e6lge skrifttype til din side.<\/p>\n\n\n\n<h3 id=\"1-laesbarhed-frem-for-alt\" class=\"wp-block-heading\"><strong>1. L\u00e6sbarhed frem for alt<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dette kan m\u00e5ske virke som en selvf\u00f8lge. Men alligevel st\u00f8der du overraskende ofte p\u00e5 hjemmesider med en skrifttype, der ikke er s\u00e6rlig let at l\u00e6se.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kreativt udseende, svungne skrifttyper kan give din side en unik karakter. Men s\u00e5 snart l\u00e6sbarheden er i fare, er det klogt at v\u00e6lge noget mindre eventyrlystent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00f8rg desuden for, at din skrifttype er mindst 16 pixels stor (18 pixels eller endda mere fungerer ofte bedre).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Og at skrifttypen er l\u00e6selig p\u00e5 alle sk\u00e6rmst\u00f8rrelser (tjek ogs\u00e5 din side p\u00e5 din telefon) er ogs\u00e5 meget vigtigt.<\/p>\n\n\n\n<h3 id=\"2-vaelg-ikke-mere-end-to-skrifttyper\" class=\"wp-block-heading\"><strong>2. V\u00e6lg ikke mere end to skrifttyper<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e6lge mere end to skrifttyper bringer et par problemer med sig:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Din side vil se rodet ud<\/li>\n\n\n\n<li>Du vil bem\u00e6rke en negativ effekt p\u00e5 indl\u00e6sningstiderne for din hjemmeside<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e6lg en skrifttype til dine titler, og v\u00e6lg en til br\u00f8dteksten (som bruges i dine afsnit osv.).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">P\u00e5 mange af mine hjemmesider holder jeg mig endda til blot en enkelt skrifttype. For det meste v\u00e6lger jeg dette p\u00e5 grund af indl\u00e6sningstider. En virkelig m\u00e6rkbar indvirkning vil en anden skrifttype ikke have p\u00e5 hastigheden af din side, men for en hastighedsaficionado som mig t\u00e6ller hvert millisekund.<\/p>\n\n\n\n<h3 id=\"3-vaelg-en-skrifttype-der-passer-til-dit-brand\" class=\"wp-block-heading\">3. V\u00e6lg en skrifttype, der passer til dit brand<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Er dit brand:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Moderne og minimalistisk? V\u00e6lg da en sans-serif skrifttype (for eksempel Lato, Open Sans).<\/li>\n\n\n\n<li>Elegant og professionelt? S\u00e5 passer serif bedre (for eksempel Merriweather, Playfair Display).<\/li>\n\n\n\n<li>Kreativt og let? Display- eller skriftskrifttyper kunne fungere (men som sagt ovenfor, hold \u00f8je med l\u00e6sbarheden!).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Du forventer en anden skrifttype p\u00e5 en yoga-hjemmeside end p\u00e5 en advokatfirmaside. &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Skab kontrast ved at kombinere skrifttyper<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Her er et eksempel p\u00e5 en hjemmeside, som jeg administrerer, hvor jeg har valgt to st\u00e6rkt kontrasterende skrifttyper:<\/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 til br\u00f8dteksten og Montserrat til titlerne.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Stilkollisionen af disse skrifttyper fungerer meget godt. N\u00e5r du v\u00e6lger to skrifttyper, vil du ikke have, at de ligner hinanden for meget.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u00e6ngere nede i denne artikel finder du flere eksempler p\u00e5 skrifttyper, der matcher godt med hinanden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>EKSTRA TIP:<\/strong> Enhver professionelt designet hjemmeside f\u00f8lger en fast ratio, n\u00e5r det kommer til de forskellige overskrifter (H1, H2, H3 osv.) og standardteksten. V\u00e6lg st\u00f8rrelse p\u00e5 dine forskellige teksttyper ikke ud fra, hvad der \u201cf\u00f8les godt\u201d. Et v\u00e6rkt\u00f8j som <a href=\"https:\/\/typescale.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typescale<\/a> kan s\u00f8rge for, at st\u00f8rrelsen p\u00e5 dine forskellige teksttyper er godt afstemt st\u00f8rrelsesm\u00e6ssigt.<\/p>\n\n\n\n<h3 id=\"5-se-din-skrifttype-pa-forskellige-browsere-og-enheder\" class=\"wp-block-heading\"><strong>5. Se din skrifttype p\u00e5 forskellige browsere og enheder<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nogle gange kan en skrifttype ikke gengives godt p\u00e5 en bestemt browser eller enhed. Derfor er det vigtigt at teste det godt.<\/p>\n\n\n\n<h3 id=\"6-pas-pa-ydeevnen\" class=\"wp-block-heading\"><strong>6. Pas p\u00e5 ydeevnen<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Brug s\u00e5kaldte <em>web safe<\/em> skrifttyper eller skrifttyper, der er optimeret til hurtige indl\u00e6sningstider.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">B\u00e5de Google Fonts og Adobe Fonts tilbyder gratis, website-optimerede skrifttyper (mere om Google Fonts nedenfor).<\/p>\n\n\n\n<h3 id=\"7-taenk-pa-tilgaengelighed\" class=\"wp-block-heading\"><strong>7. T\u00e6nk p\u00e5 tilg\u00e6ngelighed<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I tr\u00e5d med det f\u00f8rste punkt: Internettet bruges selvf\u00f8lgelig ogs\u00e5 af svagtseende og \u00e6ldre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Is\u00e6r for disse grupper er tilg\u00e6ngeligheden af din hjemmeside meget vigtig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00f8rg for, at farven p\u00e5 din skrifttype st\u00e5r i st\u00e6rk kontrast til baggrunden p\u00e5 din side. Og s\u00f8rg for, at din tekst ikke bliver for tynd eller svunget.<\/p>\n\n\n\n<h2 id=\"mit-rad-brug-google-fonts\" class=\"wp-block-heading\"><strong>Mit r\u00e5d: brug Google Fonts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Som hjemmesideejer ville jeg, hvis det er muligt, altid bruge Google Fonts. Dette er hvorfor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Udbuddet er enormt. Da der er mere end 1.000 skrifttyper, skal du til hvert projekt kunne finde en passende skrifttype.<\/li>\n\n\n\n<li>Fungerer godt p\u00e5 alle browsere og enheder. Google fonts er <em>web-safe<\/em> hvilket betyder, at du ikke beh\u00f8ver bekymre dig om, at det ser d\u00e5rligt ud p\u00e5 en bestemt browser eller gadget.<\/li>\n\n\n\n<li>Hurtige indl\u00e6sningstider. Google Fonts hostes p\u00e5 Googles lynhurtige servere.<\/li>\n\n\n\n<li>Nemme at integrere. Google tilbyder let at f\u00f8lge <a href=\"https:\/\/developers.google.com\/fonts\/docs\/getting_started\" target=\"_blank\" rel=\"noreferrer noopener\">instruktioner<\/a>, som g\u00f8r det let for dig hurtigt at f\u00e5 deres skrifttyper til at fungere p\u00e5 din side.<\/li>\n\n\n\n<li>Det er gratis. Du har ingen licensomkostninger som med nogle andre skrifttyper.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Bruger du <a href=\"https:\/\/my.host\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a>? S\u00e5 er du heldig. Mange popul\u00e6re WordPress temaer som Kadence og GeneratePress har en Google Fonts integration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selv bruger jeg Google Fonts p\u00e5 alle mine hjemmesider.<\/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=\"find-ud-af-hvilken-skrifttype-en-hjemmeside-bruger\" class=\"wp-block-heading\"><strong>Find ud af, hvilken skrifttype en hjemmeside bruger<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Er du kommet p\u00e5 en hjemmeside, hvor du kan lide skrifttypen? S\u00e5dan kan du (i Chrome) se, hvilken skrifttype der bruges.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e6lg tekststykket, h\u00f8jreklik og v\u00e6lg Inspekt\u00e9r. Scrol ned i det sk\u00e6rmbillede, der nu vises ved afdelingen Styles, og p\u00e5 et tidspunkt kommer du til den skrifttype, der bruges.<\/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-skrifttyper-der-passer-godt-sammen\" class=\"wp-block-heading\"><strong>Eksempler p\u00e5 skrifttyper, der passer godt sammen<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hvis du \u00f8nsker at bruge flere skrifttyper, kan du pr\u00f8ve et af de nedenst\u00e5ende par.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Titel skrifttype<\/strong><\/td><td><strong>Body skrifttype<\/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 l\u00e6sbar.<\/td><\/tr><tr><td><strong>Merriweather<\/strong><\/td><td><strong>Open Sans<\/strong><\/td><td>Afbalanceret og meget l\u00e6sbar til l\u00e6ngere tekster.<\/td><\/tr><tr><td><strong>Roboto Slab<\/strong><\/td><td><strong>Roboto<\/strong><\/td><td>Konsistent, str\u00f8mlinet udseende med en teknisk flair.<\/td><\/tr><tr><td><strong>Oswald<\/strong><\/td><td><strong>Montserrat<\/strong><\/td><td>Fed og geometrisk, ideel til moderne hjemmesider.<\/td><\/tr><tr><td><strong>Poppins<\/strong><\/td><td><strong>Source Sans Pro<\/strong><\/td><td>Venlig, professionel og alsidig.<\/td><\/tr><tr><td><strong>Bebas Neue<\/strong><\/td><td><strong>Nunito<\/strong><\/td><td>St\u00e6rk overskrift med flydende, letl\u00e6selig br\u00f8dtekst.<\/td><\/tr><tr><td><strong>Raleway<\/strong><\/td><td><strong>Roboto<\/strong><\/td><td>Elegant til titler og p\u00e5lidelig til tekst.<\/td><\/tr><tr><td><strong>Lora<\/strong><\/td><td><strong>Muli<\/strong><\/td><td>Litter\u00e6r og moderne, perfekt til blogs.<\/td><\/tr><tr><td><strong>Abril Fatface<\/strong><\/td><td><strong>Work Sans<\/strong><\/td><td>Dramatisk og i\u00f8jnefaldende, ideel til kreative sider.<\/td><\/tr><tr><td><strong>Dancing Script<\/strong><\/td><td><strong>Quicksand<\/strong><\/td><td>Legende men letl\u00e6selig til kunstneriske hjemmesider.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p class=\"wp-block-paragraph\">Via Google Fonts kan du sammens\u00e6tte endnu flere skrifttypepar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At v\u00e6lge den rigtige skrifttype til din hjemmeside er en mere kompleks opgave, end det ved f\u00f8rste \u00f8jekast ser ud. Bare v\u00e6lg nogle skrifttyper, du synes ser flotte ud, og smid dem p\u00e5 din side? Ikke s\u00e5 hurtigt. Langt fra alle skrifttyper egner sig til hjemmesider. Og det handler ikke kun 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":[625],"tags":[],"class_list":["post-3611","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-og-tricks"],"lang":"da","translations":{"da":3611,"sv":3824,"nl":1900,"nb":3733,"en":3240},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3611","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=3611"}],"version-history":[{"count":1,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3611\/revisions"}],"predecessor-version":[{"id":4031,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3611\/revisions\/4031"}],"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=3611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/categories?post=3611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/tags?post=3611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}