Baggrund i light mode
Baggrund i dark mode
960 px1920 px
Kontakt

Hvilke skrifttyper fungerer godt på en hjemmeside?

Vælg skrifttyper ved at afprøve dine egne tekster på mobil og computer. Begynd med én skriftfamilie, og vurder læsbarhed, danske tegn og samspillet mellem overskrifter og brødtekst.

En del af denne guideAf Stefan HilbertPubliceret Ca. 4 min. læsetid

1. Sammenlign skrifter med det samme indhold

Saml en lang overskrift, et par almindelige afsnit, virksomhedens navn, en pris og teksten på en knap. Tilføj æ, ø og å samt tal og tegn, som optræder i jeres indhold. Vis præcis det samme materiale med to eller tre kandidater. Så kan du sammenligne, hvordan skrifterne fungerer, uden at blive påvirket af forskellige billeder og formuleringer.

Et tænkt rådgivningsfirma bruger ord som “virksomhedsoverdragelse” og “organisationsudvikling”. Det bør teste dem på mobil, før det vælger en meget bred skrift til overskrifter. En skrifttype kan se god ud i “Hej” og samtidig give uhensigtsmæssige brud i de ord, kunderne faktisk skal læse.

Se efter, om tegn er lette at skelne, og om skriften virker i både almindelig og fed vægt. En dekorativ skrift kan have en rolle i enkelte overskrifter, men bør afprøves grundigt, før den også bruges til formularer og længere forklaringer. Vælg ikke automatisk ud fra, om skriften har eller mangler små fødder på bogstaverne, kaldet seriffer. Prøven med dit indhold er mere konkret.

Hvis I allerede har en designmanual, skal du undersøge, hvilke skrifter der er besluttet. Den samlede guide til visuelt udtryk hjælper med at placere fontvalget blandt de øvrige designbeslutninger.

2. Gør forskel på overskrifter og almindelig tekst

Lav roller for sidetitel, afsnitsoverskrift, brødtekst, hjælpetekst og knapper. Brug størrelse, vægt og afstand til at skelne dem. Hvis alle tekster er store og kraftige, bliver det svært at se, hvad der er vigtigst. Hvis hjælpeteksten gøres meget lille for at skabe luft, kan du i stedet have brug for at ændre layoutet.

Afprøv en hel serviceside. Se på afstanden mellem overskrift og afsnit, på linjerne i brødteksten og på forskellen mellem et nyt emne og en fortsættelse. Der findes ikke én kombination af størrelse og linjeafstand, som passer til alle skrifter og indholdstyper. Start med en rolig, læsbar opsætning, og justér med teksten foran dig.

Kontrollér også kontrasten. En fin skrifttype kan blive svær at læse, hvis den sættes med svag grå på en lys baggrund. Brug artiklen om farver og kontrast til at kontrollere kombinationerne. Skrift og farve skal godkendes sammen, ikke i hver sin isolerede præsentation.

Prøv at forstørre teksten til det dobbelte i browseren. Kan du stadig læse hele knapteksten, udfylde formularen og finde rundt? Hvis tekst bliver klippet af eller dækker andre felter, skal siden tilpasses. Baggrunden for denne kontrol findes i vejledningen om at kunne forstørre tekst.

3. Undersøg indlæsning og tilladt brug

Har du oplevet, at teksten skifter udseende, lige efter en side er åbnet? Det kan ske, fordi hjemmesidens skrifttype stadig er ved at blive hentet. Skiftet kan få overskrifter og knapper til at hoppe. Bed udvikleren undersøge det, hvis du ser det på din side. Vejledningen om hurtig og stabil visning af skrifter forklarer de tekniske løsninger.

Bed udvikleren vise siden, mens den indlæses, også med en langsommere forbindelse. Er teksten tilgængelig? Hopper kontaktknappen? Flytter overskriften resten af siden? Det er mere nyttigt end at godkende en font alene ud fra et billede, hvor alt allerede er indlæst.

Nøjes med de udgaver af skrifttypen, I faktisk bruger, fx almindelig, fed og kursiv. Der er ingen grund til at hente mange ekstra varianter, som aldrig vises på siden.

Gem dokumentation for den tilladte brug fra fontens leverandør eller licens. Antag ikke, at en fil fra en tidligere præsentation automatisk er afklaret til hjemmesiden. Notér kilde, version og eventuelle vilkår sammen med virksomhedens øvrige materialer. Artiklen fastslår ikke rettighederne til en bestemt font; det skal kontrolleres ved det faktiske valg.

4. Aflever et lille typografisk testark

Du kan samle godkendelsen på en side med fem eksempler: en lang sidetitel, to afsnit, en liste, en formular og en knap. Vis både mobil og desktop. Brug mindst én tekst, der er længere end normalt, så reglerne ikke kun fungerer under ideelle forhold.

  • Er danske tegn og relevante tal tydelige?
  • Kan man se forskel på titel, underoverskrift og brødtekst?
  • Fungerer lange ord uden afskæring?
  • Kan teksten forstørres, mens siden stadig kan bruges?
  • Er fontens indlæsning og dokumentation gennemgået?

Gem roller og eksempler i den digitale designmanual, så næste side får samme hierarki. Hvis prøven afslører problemer, kan det være layout, afstand eller tekstlængde, der skal ændres. En ny font er ikke altid løsningen. Hos Designet indgår den afprøvning i arbejdet med hjemmesidens design og udvikling.

Skal vi se på din hjemmesides design?

Vi kan hjælpe med at samle typografi og layout, så dine egne tekster fungerer på både mobil og desktop.

Tal med os om din hjemmeside