CSS Font

Pada css font kita bisa mengatur jenis tulisan sebuah website kita. Font yang baik akan memberikan pengalaman yang baik bagi pembaca. Jadi, sangat penting menentukan font yang baik dan mudah untuk dibaca.

Font juga bisa menjadi ciri khas website anda. Ketika kita menggunakan satu font maka harus konsisten dengan font tersebut ketika ingin membuat sebuah konten baru pada website.

Generic Font Families

Pada css terdapat 5 generic font families : 

1. Font serif memiliki goresan kecil di tepi setiap huruf. Mereka menciptakan rasa formalitas dan keanggunan.

2. Font sans-serif memiliki garis yang bersih (tidak ada goresan kecil yang terpasang). Mereka menciptakan tampilan modern dan minimalis.

3. Font monospace - di sini semua huruf memiliki lebar tetap yang sama. Mereka menciptakan tampilan mekanis.

4. Font kursif meniru tulisan tangan manusia.

5. Font fantasi adalah font dekoratif/menyenangkan.

Berikut contoh penggunaan font pada css :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<style type="text/css">

.p-1{

  font-family: "Times New Roman", Times, serif;

}


.p-2{

  font-family: Arial, Helvetica, sans-serif;

}


.p-3{

  font-family: "Lucida Console", "Courier New", monospace;

}

</style>

<body>

<p class="p-1">Paragraf ini menggunakan font Times New Roman.</p>

<p class="p-2">Paragraf ini menggunakan font Arial.</p>

<p class="p-3">Paragraf ini menggunakan font Lucida Console.</p>

</body>

</html>

Pada kode diatas kita memasukan 2 nama font dan nama generic font families yang mana bisa kita sebut dengan Font fallbacks.

catatan : nama font lebih dari 1 kata menggunakan tanda kutip "".

Web safe font

Web safe font adalah font yang diinstal secara universal di semua browser dan perangkat.

Font fallbacks

Tidak semua font terinstall pada browser dan perangkat, itulah fungsinya memasukan nama font lebih dari satu. Dan inilah yang dinamakan font fallbacks atau bisa kita sebut font cadangan.

Ketika font yang pertama tidak terinstall pada browser otomatis akan mengganti dengan nama font kedua. Nama font harus dalam 1 generic font families.

Jenis font yang aman dan terbaik pada browser : 

  • Arial, Verdana, Helvetica, Tahoma, Trebuchet MS (sans-serif)
  • Times New Roman, Georgia, Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Dari nama-nama font diatas bisa kalian coba sendiri menggunakan text editor yang kalian punya.

Font style

Pada font juga kita bisa mengatur gaya font yang kita pakai. Penggunaan font style meliputi property :

  • font-style (mengatur gaya font)
  • font-weight (mengatur ketebalan font)
  • font-variant (Mengatur variasi font)
Pada property diatas kita bisa menambahkan value sebagai berikut : 

Value font-style 

        
        .p-1{
  font-style: normal;
}

.p-2{
  font-style: italic;
}

.p-3{
  font-style: oblique;
}


Value font-weight 


               .p-1{
  font-weight: normal;
        }

       .p-2{
  font-weight: bold;
        }

Value variant

  .p-1{
  font-variant: normal;
  }
  .p-2{
  font-variant: small-caps;
  }


Font size

Untuk ukuran font kita bisa menggunakan property font-size pada css. 

        

 .p-1{

  font-size: 20px;

  }

Font shorthand

Font shorthand meliputi property sebagai berikut :

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
Untuk penulisannya seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">

.font{
font: italic small-caps bold 20px Verdana, sans-serif;
}

</style>
<body>

<p class="font">Halo semuanya, ini adalah paragraph</p>

</body>
</html>

 catatan : shorthand harus berurutan seperti list diatas. Mulai dari font-style sampai font-family.