Webbsäkra typsnitt är typsnitt som är universellt installerade i alla webbläsare och enheter.
Det finns dock inga 100 % helt webbsäkra typsnitt. Det finns alltid en risken att ett teckensnitt inte hittas eller inte är korrekt installerat.
Därför är det mycket viktigt att alltid använda reservteckensnitt.
Det betyder att du bör lägga till en lista med liknande "backup-fonter" i font-familjen fast egendom. Om det första teckensnittet fungerar inte, webbläsaren försöker med nästa, och nästa, och så vidare. Avsluta alltid listan med ett generiskt teckensnittsefternamn.
Här finns det tre teckensnittstyper: Tahoma, Verdana och sans serif. Det andra och tredje teckensnittet är säkerhetskopior, om det första inte kan hittas.
p {
font-family: Tahoma, Verdana, sans-serif;
}Prova själv →
<!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öljande lista är de bästa webbsäkra typsnitten för HTML och CSS:
Obs! Innan du publicerar din webbplats, kontrollera alltid hur din teckensnitt visas på olika webbläsare och enheter, och används alltid reservteckensnitt!
Arial är det mest använda typsnittet för både online och tryckta medier. Arial är också standardteckensnittet i Google Dokument.
Arial är ett av de säkraste webbteckensnitten, och det är tillgängligt på alla större operativsystem.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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 är ett mycket populärt typsnitt. Verdana är lättläst även för små teckenstorlekar.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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-teckensnittet har mindre utrymme mellan tecknen.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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 designades av Microsoft 1996. Använd detta teckensnitt noggrant. Inte stöds av alla mobila operativsystem.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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 är ett av de mest igenkännliga typsnitten i världen. Det ser ut professionell och används i många tidningar och "nyhets" webbplatser. Det är också primärt teckensnitt för Windows-enheter och applikationer.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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 är ett elegant serif-typsnitt. Det är mycket läsbart i olika teckenstorlekar, så det är en bra kandidat för mobilresponsiv design.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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 är ett klassiskt typsnitt som används för många tryckta böcker. Den har en tidlös utseende och god läsbarhet.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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 är det mest använda monospace serif-teckensnittet. Courier New används ofta med kodningsskärmar och många e-postleverantörer använda det som standardteckensnitt. Courier New är också standardtypsnittet för film manus.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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>
Teckensnittet Brush Script MT designades för att efterlikna handstil. Den är elegant och sofistikerad, men kan vara svår att läsa. Använd den försiktigt.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Prova själv →
<!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>
Tips: Kolla också in alla tillgängliga Google-teckensnitt och hur du använder dem.