Teks adalah elemen utama yang menyampaikan sebuah informasi kepada pengunjung website kita. Dari pada kita menampilkan normal teks tanpa ada styling apapun ke pengunjung, kita bisa mengatur tampilan teks tersebut menjadi lebih menarik, nyaman dibaca, dan disesuaikan dengan tema visual pada website. Pada artikel ini kita akan memahami bagaimana cara installasi fonts, mengatur fonts, ukuran, warna, dan spasi teks (letter spacing) menggunakan CSS.

Install Fonts dari Google Fonts via CDN

Menggunakan Google Fonts adalah cara praktis untuk menambahkan font menarik ke website yang kita buat. Dengan CDN (Content Delivery Network), kita bisa memuat font langsung dari server Google tanpa melakukan download pada font tersebut. Berikut langkah-langkah memasang font dari Google Fonts.

Kunjungi website Google Fonts.
Pilih font yang menarik.
pilih varian fonts (italic, bold, reguler).
Salin kode CDN. Klik tombol Get embed code, maka akan muncul link kode CDN seperti dibawah ini.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> //poppin fonts

Tempelkan link CDN di bagian <head> pada HTML

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Install Fonts via CDN - NganggurDev</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>

Setting Fonts

Setelah kita memasang CDN font pada bagian tag <head>, langkah selanjutnya adalah kita dapat mengaplikasikan font pada teks HTML. Contohnya sebagai berikut.

<!DOCTYPE>
<html>
  <head>
	 <meta charset="UTF-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <title>Install Fonts via CDN - NganggurDev</title>
	 <link rel="preconnect" href="https://fonts.googleapis.com">
	 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
	 <style>
		 p {
		  font-family: "Poppins", sans-serif;
		 }
	 </style>
  </head>
  <body>
	 <p>I'am text with poppins font</p>
  </body>
</html

Penjelasan kode dalam tag <style> adalah sebagai berikut.

font-family digunakan untuk menentukan jenis font yang akan digunakan pada teks tersebut.
Poppins adalah nama font yang akan kita gunakan dan kita dapatkan dari Google Fonts.
sans-serif adalah generic fallback font. Jika browser tidak dapat memuat jenis font "Poppins", maka teks akan menggunakan jenis font sans-serif. Jika kita ingin seluruh teks pada halaman website menggunakan jenis font Poppins, kita bisa menyesuaikan kode CSS seperti berikut.

body {
 font-family: "Poppins", sans-serif;
}

Dengan kode CSS tersebut, semua teks dalam halaman baik itu paragraf. heading, link, maupun teks lainnya, akan secara default menggunakan font jenis Poppins.

Mengatur Ukuran pada Teks

Kita dapat mengatur ukuran pada teks menggunakan properi font-size. Contohnya sebagai berikut.

p {
  font-size: 16px;
}

Dengan begitu teks pada paragrapf akan memiliki ukuran sebesar 16 piksel. Satuan umum yang dapat kita gunakan adalah:

px satuan tetap.
em dan rem satuan relatif yang disarankan untuk desain responsif.
% berdasarkan ukuran dari elemen induk (parent element).

Mengatur Warna pada Teks

Dengan menggunakan properti color pada CSS, kita dapat mengatur warna teks sesuai sesuai keinginan. Contohnya sebagai berikut.

p {
 color: crimson;
}

Pada contoh diatas, teks paragraf akan ditampilkan dengan warna crimson. Selain menggunakan nama warna seperti crimson, kamu juga bisa menentukan warna menggunakan kode HEX, RGB, atau RGBA. Untuk penjelasan lebih lengkap tentang cara menentukan warna di CSS, silakan baca artikel berikut: Learn CSS for Beginners #5: How to Set Colors and Backgrounds from Names to Gradients.

Mengatur Spasi pada Teks

Kita bisa menggunakan 3 properti umum dari CSS untuk mengatur spasi pada teks. 3 Properti tersebut adalah:

letter-spacing

Dengan properti ini, kita dapat mengatur jarak antar huruf.

p {
  letter-spacing: 2px;
}

word-spacing

Memungkinkan kita untuk mengatur jarak antar kata.

p {
  word-spacing: 4px;
}

line-height

Mengutamakan kenyamanan membaca terhadap pengunjung adalah hal utama. Salah satu cara untuk meningkatkan keterbacaan adalah dengan menggunakan properti line-height pada CSS, yang berfungsi untuk mengatur tinggi baris dari teks.

p {
  line-height: 1.6;
}

Kesimpulan

Dengan memahami cara installasi font dengan CDN dari Google Fonts dan menggunakan properi CSS seperti, font-family, font-size, color, dan line-height, kita bisa mengatur tampilan teks dengan profesional dan menarik. Selain meningkatkan estetika pada desain, tapi juga memperkuat pengalaman pengguna (UX) dan SEO.

Terimakasih, sampai jumpa di artikel selanjutnya.