At vælge de rigtige skrifttyper til en hjemmeside er en balancegang mellem æstetik, læsbarhed, teknik og ydelse. En smuk skrift, der loader langsomt eller ikke kan gengive æ, ø og å, gør mere skade end gavn.

I denne guide gennemgår vi de vigtigste hensyn, når du vælger skrift til web: læsbarhed på skærm, webfont-teknologi, indlæsningstid og ydelse, fallback-strategier og den særligt danske udfordring med de tre ekstra bogstaver. Målet er, at du kan træffe kvalificerede valg, der både ser godt ud og fungerer teknisk.

Læsbarhed på skærm

Skærme adskiller sig markant fra tryk. Opløsningen er lavere, teksten gengives med lys frem for pigment, og brugeren læser ofte på afstand og i skiftende lysforhold. Derfor fungerer skrifter, der er designet med skærmen for øje, som regel bedre online end klassiske tryksskrifter med fine detaljer og høj stregkontrast.

En af de vigtigste egenskaber for skærmlæsbarhed er en generøs x-højde. Skrifter med relativt store små bogstaver virker større og er nemmere at læse ved beskedne størrelser. Åbne bogstavformer med tydelige åbninger (aperturer) hjælper også med at holde bogstaverne adskilte, så et c ikke forveksles med et e, eller et a med et o.

Til brødtekst på web er en skriftstørrelse omkring 16 til 20 pixels ofte et fornuftigt udgangspunkt, men det afhænger af den konkrete skrift. Linjeafstanden bør typisk være omkring 1,4 til 1,6 gange skriftstørrelsen for at give luft mellem linjerne. Og som på tryk gælder det, at en linjelængde på cirka 45 til 75 tegn giver den mest behagelige læseoplevelse. Disse principper er en del af det bredere fundament, vi gennemgår i den komplette guide til typografi.

Serif eller sans-serif på web?

Der findes en udbredt myte om, at sans-serif altid er mest læsbar på skærm. Det var der en vis sandhed i på de lavopløste skærme fra tidligere, hvor fine serifer nemt gik i opløsning. På moderne skærme med høj pixeltæthed gengives serifer imidlertid fint, og valget mellem serif og sans-serif handler i dag mere om udtryk og kontekst end om ren teknisk læsbarhed. Vi behandler dette emne indgående i artiklen om serif vs. sans-serif.

Webfonts: hvordan skriften kommer på siden

I webens tidlige år var man begrænset til de skrifter, brugeren allerede havde installeret på sin computer – de såkaldte web-safe fonts. I dag bruger næsten alle sider webfonts, hvor selve skriftfilen indlæses sammen med siden via CSS-reglen @font-face. Det giver adgang til stort set enhver skrift, men introducerer også nye tekniske udfordringer.

Det moderne filformat til webfonts er WOFF2 (Web Open Font Format 2), som er komprimeret og understøttes af alle nutidige browsere. Ældre WOFF findes stadig som fallback i sjældne tilfælde, men WOFF2 bør være dit primære format. Du kan enten hoste skriftfilerne selv på din server eller indlæse dem fra en font-tjeneste, hvilket har konsekvenser for både ydelse, privatliv og licens.

Bemærk, at brugen af skrifter på web ofte kræver en særlig webfont-licens, som er adskilt fra desktop-licensen. Læs mere om de forskellige licenstyper i vores guide til licensering af skrifttyper, så du er sikker på, at din brug er lovlig.

Ydelse og indlæsningstid

Skriftfiler kan være tunge, og hver ekstra fil og hvert ekstra snit lægger vægt til sidens samlede indlæsning. En langsom side skader både brugeroplevelsen og synligheden i søgemaskiner. Derfor er det vigtigt at tænke ydelse ind i dine skriftvalg fra begyndelsen.

Begræns antallet af skrifter og snit. Hver vægt (light, regular, bold) og hver stil (kursiv) er som udgangspunkt en selvstændig fil, medmindre du bruger en variabel font. Overvej, om du virkelig har brug for fem forskellige vægte, eller om to eller tre rækker. En elegant løsning på netop dette problem er variable fonts, hvor en enkelt fil kan indeholde et helt spektrum af vægte og bredder. Det kan reducere antallet af filer betydeligt, som vi forklarer i artiklen om variable fonts forklaret.

Font-display og FOUT/FOIT

Når en webfont indlæses, opstår spørgsmålet om, hvad brugeren ser i mellemtiden. To fænomener er værd at kende: FOIT (Flash of Invisible Text), hvor teksten er usynlig, indtil skriften er hentet, og FOUT (Flash of Unstyled Text), hvor teksten først vises i en reserveskrift og så skifter, når webfonten er klar.

CSS-egenskaben font-display styrer denne adfærd. Værdien swap viser med det samme teksten i en fallback-skrift og bytter til webfonten, når den er hentet, hvilket sikrer, at indholdet altid er læsbart. Det er ofte det bedste valg for brødtekst, da det prioriterer, at brugeren kan begynde at læse med det samme.

En yderligere optimering er at preloade de vigtigste skriftfiler, så browseren begynder at hente dem tidligt. Man kan også indsnævre tegnsættet (subsetting) til kun de tegn, man faktisk bruger – men vær her ekstra opmærksom, hvis siden er dansk, så æ, ø og å ikke ved en fejl bliver skåret fra.

Selvhosting eller font-tjeneste

Du kan enten hoste skriftfilerne på din egen server eller indlæse dem fra en ekstern font-tjeneste. Selvhosting giver dig fuld kontrol over, hvornår og hvordan filerne loades, og undgår en ekstra forbindelse til en tredjepart, hvilket ofte er en fordel for både ydelse og privatliv. En ekstern tjeneste kan til gengæld være nem at komme i gang med og håndterer selv formater og opdateringer. Uanset hvad du vælger, bør du sikre dig, at løsningen overholder gældende regler om databeskyttelse, og at licensen dækker den valgte distributionsform.

Fallback-skrifter

Uanset hvor godt du optimerer, kan en webfont fejle i at indlæse – på grund af netværksproblemer, blokering eller lignende. Derfor bør du altid definere en font-stak i CSS: en prioriteret liste af skrifter, hvor browseren bruger den første, der er tilgængelig. Efter din primære webfont angiver du en eller flere systemskrifter og til sidst en generisk familie som sans-serif eller serif.

En velvalgt fallback minimerer det visuelle spring, hvis webfonten loader forsinket eller fejler. Prøv at vælge en systemskrift med lignende x-højde og bredde som din primære skrift, så layoutet ikke hopper markant, når skriften skifter. Mange moderne sider bruger desuden en systemfont-stak som fallback, der udnytter operativsystemets egne standardskrifter og derfor loader øjeblikkeligt.

Æ, ø og å: den danske udfordring

For danske hjemmesider er der en helt særlig prøvesten: skriften skal kunne gengive æ, ø og å – både som små og store bogstaver – på en korrekt og æstetisk tilfredsstillende måde. Det er langt fra en selvfølge, især ikke ved gratis skrifter eller skrifter designet primært til det engelske marked.

Nogle skrifter mangler tegnene helt, hvorved browseren erstatter dem med et tegn fra en fallback-skrift. Resultatet er, at æ, ø og å pludselig ser anderledes ud end resten af teksten – forkert vægt, forkert bredde, forkert stil. Andre skrifter indeholder tegnene, men har designet dem klodset: et å med en dårligt placeret ring, et ø med en skrå streg i en forkert vinkel, eller et æ, hvor de to bogstaver er dårligt sammensmeltet.

Test derfor altid en skrift med rigtig dansk tekst, inden du beslutter dig. Skriv en sætning med alle tre bogstaver i både store og små udgaver, og kig kritisk på dem i forskellige størrelser. Vi har samlet de typiske problemer og konkrete løsninger i artiklen om æøå-problemer og løsninger, som er obligatorisk læsning for enhver, der bygger dansksprogede sider.

En praktisk fremgangsmåde

Når du skal vælge skrift til din næste hjemmeside, kan du følge en enkel rækkefølge. Start med at afklare formålet og tonen: skal siden virke moderne og neutral, klassisk og tillidsvækkende, eller legende og kreativ? Vælg derefter en brødtekstskrift med god x-højde og skærmlæsbarhed, og test den grundigt med dansk tekst, inklusive æ, ø og å.

Overvej dernæst, om du har brug for en anden skrift til overskrifter, eller om du kan nøjes med forskellige vægte af samme familie. Begræns antallet af filer af hensyn til ydelsen, og overvej en variabel font. Opsæt en fornuftig font-stak med gode fallbacks, brug font-display: swap for brødteksten, og preload dine vigtigste filer. Til sidst sikrer du, at din licens dækker webbrug. Med den tilgang får du en side, der både er smuk, hurtig og korrekt på dansk.