Typografi på din hjemmeside: Læsbarhed slår udseende – hver gang
Den rigtige skrifttype og typografi gør din side nem at læse og professionel. Jeg fortæller hvad der virker for håndværkere, konsulenter og andre små virksomheder – inkl. hvordan font valg påvirker hastigheden.
Typografi bliver tit valgt ud fra hvad der ser pænt ud. Og det forstår jeg godt – især hvis hjemmesiden er lavet af en kreativ person, eller hvis du gerne vil ramme et publikum der forventer noget mere let, feminint eller lækkert. Udfordringen er bare, at det meget hurtigt kan gå ud over læsbarheden. Min erfaring er, at når brødteksten bliver svær at læse, så mister du folk længe før de når ned til det, du egentlig prøver at sælge eller forklare.
Det samme gælder centreret tekst. Det kan se flot ud i en kort overskrift eller en lille intro, men i længere passager er det ærligt talt træls at læse. Brødtekst bør være sat op, så øjet kan glide ned gennem siden uden at arbejde for det – ellers bliver din hjemmeside måske nok pæn, men ikke effektiv og læsevenlig.
Typografi er desuden meget mere end fontvalg. Skriftstørrelse, linjeafstand og luft mellem afsnit betyder mindst lige så meget – og for mange SMV’er (håndværkere, konsulenter, revisorer, behandlere, foreninger) er det vigtigere at teksten er nem at afkode og skimme, end at den ser smart ud. Og så er der performance: En tung font kan faktisk gøre din side langsommere og påvirke Core Web Vitals. I min basisløsning ligger der allerede et fornuftigt corporate fontvalg, men her får du principper og konkrete forslag, så typografi både understøtter læsbarhed og din visuelle identitet.
Typografi på din hjemmeside handler om meget andet end udseende
Typografi er en af de ting, folk næsten ikke lægger mærke til når det er gjort rigtigt. Men når det er gjort forkert, så kan du mærke det med det samme. Sitet føles forkert, man bliver træt i øjnene, og man får en mærkelig fornemmelse af at det ikke helt er til at stole på.
Der kan være lagt tid i billeder, farver og layout, men hvis brødteksten er svær at læse, så falder det hele sammen. Det er lidt som at have en flot butik, men hvor skiltene inde i butikken er skrevet med en tusch der er ved at løbe tør for farve.
Brødtekst skal nemt at læse
Jeg forstår godt hvorfor det sker. Især på hjemmesider der er lavet af kreative personer, eller hvor målgruppen er kreative eller mere feminine beslutningstagere, ser jeg ofte at man vælger en let og fin skrifttype fordi den ser pæn ud på en designskitse. Problemet er bare at pæn ikke er det samme som læsbar.
Brødtekst skal være nem at læse. Altid. Det er her du forklarer hvad du laver, hvem du hjælper, og hvordan man kommer videre. Hvis folk skal kæmpe sig gennem teksten, så gør de det ikke. De smutter bare videre.
- Vælg en font til brødtekst der er lavet til skærm og lange tekster
- Hold en fornuftig skriftstørrelse og linjeafstand, så øjet kan følge med
- Brug tydelig kontrast mellem tekst og baggrund, grå på grå er altid en dårlig idé
Centreret tekst ser måske godt ud men er træls at læse
En anden klassiker er centreret brødtekst. Mange synes det ser godt ud. Jeg hører ikke til den kategori, men det er egentlig også underordnet. Faktum er at centreret tekst et svært at læse, og derfor skal du ikke bruge det. I hvert fald ikke til længere brødtekster med vigtige budskaber. Så simpelt er det. Det kan se roligt og pænt ud i små bidder, men til længere afsnit bliver det hurtigt irriterende. Øjet mister sin faste startposition for hver linje, og man ender med at læse langsommere, misforstå mere og blive irriteret som læser.
Til almindelig brødtekst bør du altid bruge venstrestillet tekst. Ikke blokjustering, ikke centreret og slet ikke højrejusteret.
Overskrifter må gerne have lidt personlighed
Hvis du insisterer på centreret tekst, så brug det i overskrifterne eller evt. korte teasertekster. Jeg anbefaler det ikke, men hvis du SKAL bruge det, så skal det være til ekstremt korte budskaber.
Typografi hænger sammen med din visuelle identitet
Typografi er ikke kun noget du skal vælge til din WordPress hjemmeside. Det er en del af din visuelle identitet. Hvis du har en designmanual, så skal den følges konsekvent på tværs af hjemmeside, visitkort, tilbud, biler, skilte og alt det andet. Det er det der gør at din virksomhed føles sammenhængende og seriøs, også selvom folk ikke kan sætte ord på hvorfor.
Få en snak om valg af skriftyper med migLæsbarhed først – størrelse, linjeafstand og luft mellem afsnit
Når folk siger at de vil have en pæn font, så ender snakken tit i navne på skrifttyper. Men i praksis er det næsten altid de kedelige ting der afgør om teksten er rar at læse. Jeg har set alt for mange hjemmesider hvor indholdet egentlig er fint nok, men hvor man får lyst til at lukke siden efter 2 sekunder, fordi det hele står for småt, for tæt og uden luft.
Det er ekstra vigtigt for små virksomheder, fordi du typisk ikke har 40 andre marketingkanaler der sørger for at holde snor i kunden. Din hjemmeside skal kunne læses uden anstrengelse, ellers forsvinder de potentielle kunder.
Brødtekst skal kunne læses på en mobil uden at zoome
Jeg sigter næsten altid efter en brødtekst der ligger omkring 16–18px. Hvis man tænker i rem, svarer det typisk til 1rem–1.125rem. Og på små skærme bør du som udgangspunkt aldrig under 16px. Det lyder som en lille detalje, men det er virkelig noget der betyder noget. Og særligt hvis din målgruppe hører til den ældte generation i befolkningen.
Linjeafstand er det der gør teksten rolig
Line-height på omkring 1,5–1,6 for gør underværker for en brødtekst. Det giver øjet plads til at hoppe ned på næste linje uden at man mister orienteringen. Overskrifter må gerne være lidt mere tætte – brødtekst skal derimod have luft.
Luft mellem afsnit fjerner følelsen af en tekstmur
Hvis dine afsnit står lige op og ned ad hinanden, bliver selv en kort tekst tung. Jeg bruger enten en tydelig tom linje eller margin-bottom, så afsnittene får en naturlig afstand til hinanden. Det er også derfor jeg ofte anbefaler korte afsnit og underoverskrifter. Ikke for at gøre det smart, men fordi folk skimmer, og fordi du ikke kan regne med at de læser fra start til slut.
Venstrestillet tekst vinder altid
Centreret brødtekst er væsentligt sværere at læse, især når teksten er mere end 2-3 linjer. Det ser måske flot ud på en designskitsep, men det fungerer dårligt i virkeligheden. Venstrestillet er standard af en grund. Undgå også blokjustering og højrestillet tekst.
Undgå overskrifter udelukkende med store bogstaver
Overskrifter der er skrevet kun med store bogstaver er sværere at læse end normale overskrifter med stort begyndelsesbogstav. Øjet genkender ordform hurtigere, når der er små og store bogstaver. Jeg ser det ofte, og jeg ændrer det næsten altid på kundesider – det er en hurtig forbedring af læsbarheden.
Tekst i alt for brede indholdsområder dur ikke
En klassiker er sider hvor teksten går fra kant til kant på en stor skærm. Så skal øjet rejse alt for langt for hver linje. Det dur heller ikke. Det afhænger også af fontstørrelsen, men overvej tekster i 2 spalter hvis indholdsrområdet bliver for bredt, så du gør din tekst lettere at læse.
Gode kontrastfarver i tekstindhold er meget vigtigt
Grå tekst på lys grå baggrund er en af de hurtigste måder at gøre din hjemmeside trættende på. Mørk tekst på lys baggrund (eller omvendt) med ordentlig kontrast er bare nemmere at læse. Og ja, det påvirker også hvem der overhovedet kan bruge siden, hvis de ikke har perfekt syn eller sidder og kigger på din hjemmeside i sollys på mobilen.
Pointen er at fontvalget ofte er den mindste del af typografi. Størrelse, linjeafstand, luft, justering, bredde og kontrast er det der gør teksten behagelig at læse. Og når først det spiller, så begynder resten af designet også at se bedre ud helt automatisk.
Skriv til mig hvis du vil have mig til at gennemgå læsbarheden på din sideSerif, sans-serif og hvornår du bør holde dig kreative fonts i brødtekst
Når jeg siger at typografi handler om læsbarhed mere end design, så er skrifttypen det mest oplagte sted at starte. Jeg har set mange hjemmesider hvor der er brugt tid på flotte farver og billeder, men hvor folk reelt giver op efter 2 sekunder fordi teksten er træls at læse.
Der er tre grupper du typisk støder på, og de er værd at forstå, før du vælger noget “smart”.
Serif og sans-serif er bare med og uden fødder
Serif er skrifttyper med små “fødder” på bogstaverne. De kan give et mere klassisk og autoritært udtryk. Sans-serif er uden fødder og virker ofte mere moderne og ren på skærm.
På print kan serif være super læsbart, men på web er det ofte sans-serif der vinder i brødtekst. Ikke fordi serif er “forkert”, men fordi skærme, små størrelser og forskellige enheder gør at de fine detaljer i serif-fonts nemt bliver til støj.
Brødtekst på web fungerer bedst når den er lidt kedelig
Min tommelfingerregel er at brødteksten skal være så nem at læse, at du ikke lægger mærke til den. Sans-serif er tit det sikre valg her. Serif kan sagtens fungere til overskrifter, hvor teksten er større og du kan tillade mere karakter uden at ødelægge flowet.
Et klassisk eksempel på en pæn hjemmeside der falder igennem, er når brødtekst er sat i en tynd, spinkel font, måske endda i lysegrå, og med for tæt linjeafstand. Det ser lækkert ud på en designers store skærm. I praksis sidder dine besøgende på en mobil i sollys og prøver bare at finde dit telefonnummer, din pris eller din åbningstid.
Script, håndskrift og display fonts hører ikke hjemme i brødtekst
Script- og håndskrift-fonts, samt “display fonts” med meget personlig stil, kan være fine i små doser. En overskrift, et kort citat, måske et lille element i et logo-agtigt område. Men som brødtekst bliver det næsten altid en dårlig idé.
- De er langsommere at aflæse, og folk skimmer i forvejen.
- De bliver tit grimme på mobil, fordi bogstaverne klumper sammen.
- De får sitet til at ligne noget der er lavet for at imponere, ikke for at hjælpe.
Hold dig til 1–2 fonts
Brug gerne én font til overskrifter og én til brødtekst. Det er rigeligt. Max 2–3 font-typer i alt, ellers bliver det hurtigt rodet, og du ender også med at gøre siden tungere at loade. Og hastighed er ikke en “nice to have” på web. Det er enormt vigtigt med et hurtigt website.
Skriv til mig hvis du vil have et hurtigt typografi-tjekGode skrifttyper til hjemmesider – konkrete forslag til SMV’er
Hvis du er håndværker, terapeut eller driver en mindre virksomhed, så er typografi typisk ikke det du har lyst til at bruge din aften på. Og det forstår jeg godt. Derfor er der i min basisløsning allerede valgt en god, neutral “corporate” font, som bare fungerer på skærm og i WordPress. Du behøver ikke rode med det, medmindre du har en klar holdning eller en eksisterende visuel linje du vil ramme.
Gennem årene har jeg set alt for mange hjemmesider hvor der er brugt en smart font, som ser fed ud i en PDF, men som bliver trættende at læse på mobil. Det ender næsten altid med at det går ud over troværdighed og konvertering. Folk kan simpelthen ikke overskue teksten.
Mine go-to sans-serif webfonte
Hvis du selv vil vælge, så hold dig til noget der er læsbart, neutralt og testet af millioner af websites. De her er sikre valg til SMV’er:
- Inter – Moderne og “ren”. Virker virkelig godt til både overskrifter og brødtekst, især hvis du vil have et nutidigt udtryk uden at det bliver koldt.
- Source Sans 3 – Meget balanceret. Jeg bruger den ofte når der er meget tekst, fordi den er rolig at læse og ser ordentlig ud på alle skærme.
- Open Sans – Klassiker. Ikke spændende, men det er lidt pointen. Den er let at læse, og den skaber sjældent problemer i praksis.
- Roboto – Også en klassiker. Den kan føles lidt “Google-agtig”, men den er stabil og skarp, især på mobil.
- Lato – Lidt mere varm i udtrykket. God hvis du vil have noget venligt og imødekommende uden at det bliver fjollet.
- Plus Jakarta Sans – Moderne og pæn til overskrifter. Jeg synes den fungerer godt hvis du vil have en lille smule mere karakter end Inter, men stadig holde det corporate.
En serif til overskrifter hvis du vil have et mere klassisk look
Nogle brancher kan godt bære et mere klassisk udtryk, især hvis du vil signalere ro, kvalitet eller “tradition”. Her giver det mening at bruge serif i overskrifter, men jeg holder stadig brødteksten sans-serif.
- Merriweather – Klassisk og læsbar. Den kan give lidt “avis” eller “bog” i overskrifterne, uden at det bliver tungt.
- Source Serif – Ren og kontrolleret serif. God hvis du vil have et klassisk præg, men stadig holde det moderne.
Hold igen med skrifttykkelse hvis du vil have en hurtig hjemmeside
De fleste af de fonte jeg nævner her, ligger i Google Fonts eller tilsvarende biblioteker, så de er lavet til web. Men der er en fælde jeg ser igen og igen. Folk vælger 6-8 font weights, italics og alle mulige varianter for en sikkerheds skyld. Det gør siden tungere, og du får sjældent noget ud af det.
Mit råd er simpelt. Vælg 2 som udgangspunkt, typisk Regular og SemiBold eller Bold. Og vælg kun flere hvis der er en reel grund. Det giver færre filer, hurtigere load og færre ting der kan gå galt.
Når typografien spiller, kan du begynde at kigge på farver og kontrast, så teksten både ser godt ud og er behagelig at læse.
Skriv til mig hvis du vil have et hurtigt font-tjekFonte og hastighed – hvad typografi betyder for Core Web Vitals
Når folk tænker typografi, tænker de typisk på design. Fair nok. Men i praksis er font også et teknik-spørgsmål, fordi webfonte kan gøre en hjemmeside langsom, hvis de bliver loadet forkert,hvis du vælger fonte der er langsomme og besværlige at indlæse eller hvis din hjemmesider indlæser en masse fonte som du slet ikke bruger. Og langsom betyder at Google (og dine besøgende) bliver irriterede.
Jeg har set det mange gange gennem årene. Der er brugt tid på design, men så ligger der 6-10 fontfiler og blokerer for at siden overhovedet viser tekst. Resultatet er at siden føles tung, og du kan få dårlige Core Web Vitals.
Færre fonte og færre skrifttykkelser giver næsten altid en bedre side
Der er sjældent nogen grund til at gøre det kompliceret. For de fleste små virksomheder fungerer det bedst med 1-2 fonte. Nogle gange 3, men så skal der være en god grund.
- Hold dig til 1–2 fonte til hele sitet, og lad designet komme fra farver, afstande og billeder i stedet
- Brug få font-udgaver, typisk regular og bold. Mange skrifttykkelser lyder lækkert, men det er ekstra filer
- Overvej subset af tegn, hvis du ved du kun bruger bestemte tegnsæt. Det kan skære en del fra, men det skal gøres rigtigt
Jeg tænker font og hastighed ind fra start
I mit setup er typografi ikke noget man lige smider på til sidst. Jeg tænker det ind fra starten, og i mange tilfælde er det allerede håndteret i basisløsningen, så du ikke ender med en hjemmeside der ser fin ud, men føles langsom.
Se hvordan jeg hastighedsoptimerer herSkrifttype til logo og konsekvens på tværs af medier
Logoet er lidt sin egen verden. Det er ofte få bogstaver, måske et ikon og et navn. Derfor kan du godt slippe afsted med en mere særpræget eller dekorativ skrifttype i logoet, uden at det ødelægger læsbarheden. Problemet opstår først, når den samme smarte font bliver brugt til overskrifter, brødtekst og knapper på hjemmesiden. Så bliver det hurtigt rodet, og det ser billigere og mindre læsevenligt ud end det behøver.
Jeg har ofte set at der bliver valgt en logo-font fordi den ser godt ud i et PDF-udkast, og så forsøger man at tvinge resten af materialet til at matche. Det ender tit med at man enten ikke kan finde fonten som webfont, eller at den er tung og langsom, eller at den bare er træls at læse på både mobil og desktop.
Logo-font og website-font skal passe sammen eller være ens
Du behøver ikke bruge samme skrifttype overalt. Men der skal være en vis familiefornemmelse. Det kan være samme grundform, samme x-højde, eller bare at de ikke clasher. Typisk giver det mening at lade logoet være mere karakterfuldt og så vælge en rolig, gennemtestet font til resten.
Genkendelighed kommer af gentagelser
Når typografi og farver er ens på tværs, virker virksomheden mere professionel. Ikke fordi det er design for designets skyld, men fordi folk kan genkende dig hurtigere.
- Hjemmeside og SoMe skal bruge samme farver og samme typografiske stil, ellers ligner det to forskellige virksomheder.
- Visitkort og faktura er kedelige ting, men de tæller med i helhedsindtrykket når kunden lige har betalt.
- Overskrifter, knapper og små tekster skal have samme tone.
Hvis du har en designmanual, så følg den
Har du en designmanual eller grafisk profil, så er det den der bestemmer. Og hvis du ikke har, så kan vi stadig arbejde konsekvent. Jeg plejer at aftale nogle få faste valg, og så holder vi os til dem. Det er faktisk ofte det, der gør forskellen mellem noget “hjemmelavet” og noget der ser ordentligt ud.
Skriv til mig hvis du skal have hjælpTypografi som del af grafisk design – og hvordan jeg arbejder med det
Typografi er ikke et “font-valg” isoleret set. Det er en del af det grafiske design på linje med logo og farver, og det hele hænger sammen. Hvis du vælger en skrifttype der virker smart, men dine farver og dit logo er helt klassiske, så får du et rodet udtryk. Og omvendt ser jeg også tit sites hvor logo og farver egentlig er fine, men hvor fonten ødelægger helhedsindtrykket fordi den er for tynd, for tæt eller bare svær at læse.
I min basisløsning er typografi og læsbarhed allerede lavet fornuftigt. Det betyder at du ikke starter fra nul med 100 valg og 100 holdninger. Jeg bruger en simpel standard, som passer til små og mellemstore virksomheder, og som fungerer på tværs af mobil, tablet og desktop. Du får altså et site der ser ordentligt ud fra start, uden at du skal ud og “købe design” som et ekstra projekt bagefter.
Jeg vælger fonts med både øjne og teknik
Der er en grund til at jeg ikke bare siger ja til tilfældige fonte. Gennem årene har jeg set hvor hurtigt en ellers fin hjemmeside kan blive langsom og bøvlet, hvis man begynder at læsse for mange font-filer, skrifttykkelser og varianter på. Og når hastigheden falder, så falder både brugeroplevelsen og ofte også effekten i Google.
- Jeg holder typisk antallet af skrifttyper nede, så udtrykket bliver roligt og genkendeligt.
- Jeg bruger kun de font-varianter der reelt er behov for, så du ikke betaler i hastighed for noget du ikke bruger.
- Jeg sikrer et klart hierarki mellem overskrifter og brødtekst, så siden er nem at skimme.
Når behovet er mere avanceret end en standardløsning
Nogle gange giver det mening at gå længere end en fornuftig standard. Det kan være hvis du har en skarp visuel identitet, eller hvis du vil have en grafiker til at lave et mere gennemarbejdet designoplæg, som jeg så bygger i WordPress. Jeg har et fast netværk af samarbejdspartnere inden for grafisk design, som jeg kan trække ind når det giver mening. Du kan stadig nøjes med mig som kontaktperson, og jeg sørger for at det der bliver designet, også kan implementeres.
Skriv til mig hvis du vil have hjælpOfte stillede spørgsmål om typografi på hjemmesider
Her er de spørgsmål jeg oftest får om typografi på hjemmesider. Hvis dit spørgsmål ikke er med, så kontakt mig – jeg svarer typisk inden for få timer.
Hvad er typografi på en hjemmeside?
Typografi er valg af skrifttype (font), størrelse, linjeafstand, luft mellem afsnit og hvordan teksten vises. Det påvirker læsbarhed, hastighed og helhedsindtryk.
Hvilken skrifttype skal jeg vælge til min hjemmeside?
Vælg en læsevenlig font til brødtekst (sans-serif er ofte bedst på skærm eller Inter som jeg ofte benytter). Til overskrifter kan du bruge samme font i fed eller en anden komplementær font. Undgå dekorative eller håndskrevne fonte i brødtekst.
Hvad er en god skrifttype til hjemmeside?
God skrifttype til hjemmeside er let at læse på skærm, har tilstrækkelig størrelse og linjeafstand, og er webfont-venlig (fx Inter, Open Sans, Source Sans 3, Roboto) så siden ikke bliver langsom.
Hvor mange fonte skal jeg bruge på min hjemmeside?
Hold dig til 1–2 fonte (evt. én til overskrifter og én til brødtekst). Max 2–3 for at undgå rodet udtryk og unødigt langsom loadtid.
Skal brødtekst være serif eller sans-serif?
På skærm er sans-serif ofte mest læsbar til brødtekst. Serif kan bruges til overskrifter for et mere klassisk udtryk. Vigtigst er at teksten er nem at læse.
Hvorfor er læsbarhed vigtigere end at fonten ser pæn ud?
Hvis besøgende ikke kan læse teksten nemt, forsvinder de. Mange vælger en font de synes er pæn eller centreret tekst for æstetikens skyld – men brødtekst skal altid være nem at læse. Dekorative fonte er fint til overskrifter eller et logo, men ikke til brødtekst.
Hvad betyder linjeafstand og luft mellem afsnit for læsbarhed?
God linjeafstand (fx 1,5–1,6) og luft mellem afsnit gør det nemmere at følge teksten og undgår at siden føles som en tæt “mur af tekst”.
Skal brødtekst være centreret?
Nej. Centreret brødtekst er væsentligt sværere at læse og bør undgås til længere tekster. Brug venstrestillet tekst til brødtekst; Centreret kan bruges til korte overskrifter eller citater, men jeg fraråder altid centreret tekst.
Påvirker font-valg hastigheden på min hjemmeside?
Ja. For mange webfonte eller for tunge font-filer kan gøre siden langsommere og påvirke Core Web Vitals. Få fonte og få skrifttykkelser er bedst.
Kan jeg bruge en kreativ font til overskrifter?
Ja, til overskrifter kan du bruge en mere særpræget eller dekorativ font for at opnå en eller anden form for designeffekt – men brug altid en læsevenlig font til brødtekst.
Skal jeg bruge samme skrifttype på hjemmeside og i trykte materialer?
Ja, det styrker din visuelle identitet og virker mere professionelt. Typografi bør følge din designmanual både online og offline.
Hvad med skrifttype til logo?
Logo kan have sin egen, mere karakterfulde font fordi det er kort tekst. Det bør stadig harmonere med resten af typografien på hjemmesiden og i dit materiale.
Har du allerede valgt en god font i din basisløsning?
Ja. I min basisløsning er der valgt en god corporate font der er læsbar og hurtig at loade. Du behøver typisk ikke selv vælge font, medmindre du ønsker en mere tilpasset visuel identitet.
Hvad er den bedste font til hjemmesider?
Der findes ikke én font, der er bedst til alt – det afhænger af dit udtryk og din målgruppe. Det vigtigste er, at brødtekst er nem at læse på skærm. Sans-serif-fonter som Inter, Open Sans, Source Sans 3 eller Roboto er ofte gode valg til både overskrifter og brødtekst fordi de er læsbare, webfont-venlige og belaster siden mindre, hvis du kun bruger få udgaver (fx normal og fed). I min basisløsning er der allerede valgt en god, professionel font, så du behøver typisk ikke selv finde den bedste – den er sat op fra start.
