Cara Memasangkan Berbagai Jenis Font Dengan CSS

Pemasangan jenis huruf yang bagus sangat penting untuk membuat desain yang bagus.

Aturan Pemasangan Jenis Huruf

Berikut adalah beberapa aturan dasar untuk membuat pemasangan jenis huruf yang bagus:

1. Pelengkap

Menemukan pemasangan jenis huruf yang saling melengkapi satu sama lain akan terlihat aman.

Kombinasi jenis huruf yang bagus harus selaras, tanpa terlalu mirip atau terlalu berbeda.

2. Gunakan Jenis Huruf Superfamilies

Jenis huruf superfamily adalah kumpulan jenis huruf yang dirancang untuk bekerja dengan baik. Jadi, menggunakan jenis huruf berbeda dalam superfamily yang sama akan tetap aman.

Misalnya, superfamily Lucida berisi jenis huruf berikut: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif, dan Lucida Math.

3. Kontras

Dua jenis huruf yang terlalu mirip akan sering bentrok. Namun, jika kontras dilakukan dengan cara yang benar, akan menghasilkan yang terbaik di setiap jenis huruf.

Contoh: Menggabungkan serif dengan sans serif merupakan kombinasi yang sering digunakan.

Superfamily yang kuat mencakup variasi serif dan sans serif dari jenis huruf yang sama (misalnya. Lucida dan Lucida Sans).

4. Pilih Hanya Satu Jenis Huruf Utama

Satu jenis huruf harus menjadi yang utama. Cara seperti ini akan menetapkan hierarki untuk jenis huruf pada halaman. Cara ini dapat dicapai dengan memvariasikan ukuran, berat, dan warna pada huruf utama.

Contoh

Jenis huruf “Georgia” adalah pilihan utama pada contoh di bawah ini:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Di bawah ini, akan ditunjukkan beberapa pasangan jenis huruf paling populer.

Georgia dan Verdana

Georgia dan Verdana adalah kombinasi klasik dan juga merupakan standar jenis huruf yang aman pada web:

Contoh

Gunakan jenis huruf “Georgia” untuk judul dan jenis huruf “Verdana” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Helvetica dan Garamond

Helvetica dan Garamond adalah kombinasi klasik lain yang juga merupakan jenis huruf yang aman pada web:

Contoh

Gunakan jenis huruf “Helvetica” untuk judul dan jenis huruf “Garamond” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Pasangan Google Font yang Populer

Jika tidak ingin menggunakan jenis huruf standar dalam HTML, maka dapat menggunakan Google Font.

Di bawah ini adalah beberapa pasangan Google Font yang umum digunakan.

Merriweather dan Open Sans

Contoh

Gunakan jenis huruf “Merriweather” untuk judul dan jenis huruf “Open Sans” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Ubuntu dan Lora

Contoh

Gunakan jenis huruf “Ubuntu” untuk judul dan jenis huruf “Lora” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Abril Fatface dan Poppins

Contoh

Gunakan jenis huruf “Abril Fatface” untuk judul dan jenis huruf “Poppins” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Cinzel dan Fauna One

Contoh

Gunakan jenis huruf “Cinzel” untuk judul dan jenis huruf “Fauna One” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Fjalla One dan Libre Baskerville

Contoh

Gunakan jenis huruf “Fjalla One” untuk judul dan jenis huruf “Libre Baskerville” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Space Mono dan Muli

Contoh

Gunakan jenis huruf “Space Mono” untuk judul dan jenis huruf “Muli” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Spektral dan Rubik

Contoh

Gunakan jenis huruf “Spectral” untuk judul dan jenis huruf “Rubik” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Oswald dan Noto Sans

Contoh

Gunakan jenis huruf “Oswald” untuk judul dan jenis huruf “Noto Sans” untuk tulisan:

<!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>Norwegia yang indah</h1>

<p>Norwegia memiliki luas total 385.252 kilometer persegi dan jumlah penduduk 5.438.657 (Desember 2020). Norwegia berbatasan dengan Swedia, Finlandia, dan Rusia di timur laut, dan Skagerrak di selatan, dengan Denmark di sisi lainnya.</p>

<p>Norwegia memiliki pegunungan yang indah, gletser, dan fyord yang menakjubkan. Oslo, ibu kotanya, adalah kota ruang hijau dan museum. Bergen, dengan rumah kayu berwarna-warni, adalah titik awal kapal pesiar ke Sognefjord yang dramatis. Norwegia juga terkenal dengan memancing, hiking, dan ski.</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Cara Menggunakan Google Font Dengan CSS
Tutorial setelahnya : Mengatur Tautan Dengan CSS
Semua Tutorial CSS : Tutorial CSS