Bra typsnittskombinationer är avgörande för bra design.
Här är några grundläggande regler för att skapa bra teckensnittskombinationer:
Det är alltid säkert att hitta typsnitt som kompletterar varandra.
En bra teckensnittskombination ska harmonisera, utan att vara för lika eller för olika.
En superfamilj för typsnitt är en uppsättning teckensnitt som är utformade för att fungera bra tillsammans. Så det är säkert att använda olika typsnitt inom samma superfamilj.
Till exempel innehåller Lucida-superfamiljen följande typsnitt: Lucida Sans, Lucida Serif, Lucida Skrivmaskin Sans, Lucida Skrivmaskin Serif och Lucida Math.
Två teckensnitt som är för lika kommer ofta i konflikt. Men kontraster, gjort på rätt sätt, tar fram det bästa i varje typsnitt.
Exempel: Att kombinera serif med sans serif är en välkänd kombination.
En stark superfamilj inkluderar både serif- och sans serif-varianter av samma typsnitt (t.ex. Lucida och Lucida Sans).
Ett typsnitt ska vara chefen. Detta upprättar en hierarki för teckensnitten på din sida. Detta kan uppnås genom att variera storlek, vikt och färg.
Utan tvekan är "Georgia" chefen här:
body {
background-color: black;
font-family: Verdana,
sans-serif;
font-size: 16px;
color: gray;
}
h1
{
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Nedan har vi visat några populära typsnittskombinationer som passar många varumärken och sammanhang.
Georgia
och Verdana
Typsnitten Georgia och Verdana är en klassisk kombination. Den håller sig också till standarderna för webbsäkra teckensnitt:
Använd typsnittet "Georgia" för rubriker och "Verdana" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Helvetica och Garamond är en annan klassisk kombination som använder webbsäkra typsnitt:
Använd typsnittet "Helvetica" för rubriker och "Garamond" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
font-size: 16px;
}
h1 {
font-family: Helvetica, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Om du inte vill använda standardtypsnitt i HTML kan du använda Google Fonts.
Google Fonts är gratis att använda och har mer än 1 000 teckensnitt att välja mellan.
Nedan finns några populära Google Web Font Pairings.
Använd typsnittet "Merriweather" för rubriker och "Open Sans" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Merriweather, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd "Ubuntu"-teckensnittet för rubriker och "Lora" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: Lora, serif;
font-size: 16px;
}
h1 {
font-family: Ubuntu, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd typsnittet "Abril Fatface" för rubriker och "Poppins" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family: Poppins, sans-serif;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd typsnittet "Cinzel" för rubriker och "Fauna One" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: 'Fauna One', serif;
font-size: 16px;
}
h1 {
font-family: Cinzel, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd typsnittet "Fjalla One" för rubriker och "Libre Baskerville" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
}
h1 {
font-family: 'Fjalla One', sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd typsnittet "Space Mono" för rubriker och "Muli" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: Muli, sans-serif;
font-size: 16px;
}
h1 {
font-family: "Space Mono", monospace;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd typsnittet "Spectral" för rubriker och "Rubik" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: Rubik, sans-serif;
font-size: 16px;
}
h1 {
font-family: Spectral, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Använd typsnittet "Oswald" för rubriker och "Noto Sans" för text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by
Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Oswald, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
För en lista över alla gratis Google Fonts, besök vår How To - Google Fonts Tutorial.