Websikre skrifttyper er skrifttyper, der er universelt installeret på tværs af alle browsere og enheder.
Der er dog ingen 100 % helt websikre skrifttyper. Der er altid en chance for, at en skrifttype ikke findes eller ikke er installeret korrekt.
Derfor er det meget vigtigt altid at bruge reserveskrifttyper.
Det betyder, at du skal tilføje en liste over lignende "backup-skrifttyper" i font-familien ejendom. Hvis den første skrifttype virker ikke, browseren vil prøve den næste, og den næste, og så videre. Afslut altid listen med et generisk skrifttypenavn.
Her er der tre skrifttyper: Tahoma, Verdana og sans serif. Den anden og tredje skrifttype er sikkerhedskopier, hvis den første ikke findes.
p {
font-family: Tahoma, Verdana, sans-serif;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Fallback Fonts</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Følgende liste er de bedste websikre skrifttyper til HTML og CSS:
Bemærk: Før du udgiver dit websted, skal du altid kontrollere, hvordan din skrifttyper vises på forskellige browsere og enheder, og bruges altid reserveskrifttyper!
Arial er den mest udbredte skrifttype til både online og trykte medier. Arial er også standardskrifttypen i Google Docs.
Arial er en af de sikreste webskrifttyper, og den er tilgængelig på alle større operativsystemer.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Verdana er en meget populær skrifttype. Verdana er letlæselig selv for små skriftstørrelser.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Tahoma-skrifttypen har mindre mellemrum mellem tegnene.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Trebuchet MS blev designet af Microsoft i 1996. Brug denne skrifttype forsigtigt. Ikke understøttet af alle mobile operativsystemer.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Times New Roman er en af de mest genkendelige skrifttyper i verden. Det ser ud professionel og bruges i mange aviser og "nyheds"-hjemmesider. Det er også primær skrifttype til Windows-enheder og -applikationer.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Georgia er en elegant serif-skrifttype. Den er meget læsbar ved forskellige skriftstørrelser, så den er en god kandidat til mobilresponsivt design.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Garamond er en klassisk skrifttype, der bruges til mange trykte bøger. Den har en tidløs udseende og god læsbarhed.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Courier New er den mest udbredte monospace serif-skrifttype. Courier New bruges ofte sammen med kodningsskærme og mange e-mail-udbydere bruge det som deres standardskrifttype. Courier New er også standardskrifttypen til film manuskripter.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Brush Script MT-skrifttypen er designet til at efterligne håndskrift. Den er elegant og sofistikeret, men kan være svær at læse. Brug det forsigtigt.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Tip: Se også alle tilgængelige Google-skrifttyper, og hvordan du bruger dem.