CSS Bra teckensnittskombinationer


Innehållsförteckning

    Visa innehållsförteckning


Bra typsnittskombinationer är avgörande för bra design.


Regler för teckensnittsparning

Här är några grundläggande regler för att skapa bra teckensnittskombinationer:

1. Komplettera

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.

2. Använd Font Superfamilies

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.

3. Kontrasten är kung

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).

4. Välj Endast en chef

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.

Exempel

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.



Teckensnitten Georgia och Verdana

Typsnitten Georgia och Verdana är en klassisk kombination. Den håller sig också till standarderna för webbsäkra teckensnitt:

Exempel

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

Helvetica och Garamond är en annan klassisk kombination som använder webbsäkra typsnitt:

Exempel

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>

 

Populära Google Font Pairings

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.


Merriweather och Open Sans

Exempel

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>



Ubuntu och Lora

Exempel

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>



Abril Fatface och Poppins

Exempel

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>

 

Cinzel och Fauna One

Exempel

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>

  

Fjalla One och Libre Baskerville

Exempel

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>



Space Mono och Muli

Exempel

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>

 

Spectral och Rubik

Exempel

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>



Oswald och Noto Sans

Exempel

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.