Typography CSS - Belajar Front-End Web untuk Pemula

Petik.net - Typography CSS adalah teknik yang digunakan untuk mengatur tampilan teks pada halaman web. Dalam typography CSS, kita dapat menentukan jenis huruf, ukuran huruf, warna huruf, spacing, dan alignment pada teks.

Menentukan Font Family CSS

Font family CSS digunakan untuk menentukan jenis huruf yang akan digunakan pada halaman web. Ada beberapa jenis font family yang umum digunakan pada halaman web, seperti Arial, Times New Roman, dan Verdana. Berikut adalah contoh penggunaan font family CSS:

body {
  font-family: Arial, sans-serif;
}

Pada contoh di atas, kita menggunakan font family Arial dengan fallback font sans-serif, yaitu font yang akan digunakan jika browser tidak mendukung font family Arial.

Ukuran Font CSS

Ukuran font CSS digunakan untuk menentukan ukuran huruf pada halaman web. Ada beberapa unit ukuran font yang dapat digunakan pada CSS, seperti pixel, point, em, dan rem. Berikut adalah contoh penggunaan ukuran font CSS:

h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
}

Pada contoh di atas, kita menggunakan ukuran font 36px pada tag < h1 > dan 16px pada tag < p >.

Warna Font CSS

Warna font CSS digunakan untuk menentukan warna teks pada halaman web. Ada beberapa cara yang dapat digunakan untuk menentukan warna font pada CSS, seperti menggunakan kode hex, RGB, dan nama warna. Berikut adalah contoh penggunaan warna font CSS:

h1 {
  color: #000000;
}

p {
  color: rgb(255, 255, 255);
}

Pada contoh di atas, kita menggunakan warna hitam pada tag < h1 > dengan kode hex #000000 dan warna putih pada tag < p > dengan kode RGB 255, 255, 255.

Spacing dan Alignment Font CSS

Spacing dan alignment font CSS digunakan untuk mengatur jarak antara teks dan tata letak teks pada halaman web. Ada beberapa property CSS yang dapat digunakan untuk mengatur spacing dan alignment pada teks, seperti margin, padding, text-align, dan line-height. Berikut adalah contoh penggunaan spacing dan alignment pada font CSS:

h1 {
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5;
}

p {
  padding-left: 10px;
  text-align: justify;
}

Pada contoh di atas, kita menggunakan property margin-bottom pada tag < h1> untuk memberikan jarak antara teks dengan elemen di bawahnya. Selain itu, kita juga menggunakan property text-align untuk mengatur alignment pada teks, yaitu center pada tag < h1> dan justify pada tag < p>. Selain itu, kita juga menggunakan property line-height untuk mengatur jarak antara baris pada tag < h1>.

Contoh Pembelajaran Typography CSS

Misalkan kita ingin membuat sebuah halaman web yang berisi artikel tentang teknologi. Untuk membuat tampilan teks pada artikel tersebut lebih menarik dan mudah dibaca oleh pengguna, kita dapat menggunakan teknik typography CSS. Berikut adalah contoh pembelajaran typography CSS untuk halaman web artikel tentang teknologi tersebut:

1. Menentukan Font Family CSS

Pertama-tama, kita harus menentukan jenis huruf yang akan digunakan pada artikel tersebut. Karena artikel tersebut berisi tentang teknologi, kita dapat menggunakan jenis huruf modern seperti Open Sans atau Lato. Kita dapat menambahkan font family CSS pada body untuk menentukan jenis huruf yang akan digunakan pada seluruh halaman web.

body {
  font-family: 'Open Sans', sans-serif;
}

2. Ukuran Font CSS

Setelah menentukan jenis huruf yang akan digunakan, kita juga harus menentukan ukuran huruf yang tepat agar teks pada artikel mudah dibaca oleh pengguna. Kita dapat menentukan ukuran font CSS pada tag < h1> dan tag < p>.

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

Pada contoh di atas, kita menentukan ukuran font 36px pada tag < h1> dan 18px pada tag < p>. Selain itu, kita juga memberikan property margin-bottom pada tag < h1> untuk memberikan jarak antara teks dengan elemen di bawahnya, dan memberikan property line-height pada tag < p> untuk mengatur jarak antara baris pada teks.

3. Warna Font CSS

Selain menentukan jenis huruf dan ukuran huruf, kita juga harus menentukan warna teks yang akan digunakan pada artikel tersebut. Kita dapat menentukan warna font CSS pada tag < h1> dan tag < p>.

h1 {
  color: #333333;
}

p {
  color: #666666;
}

Pada contoh di atas, kita menentukan warna font hitam (#333333) pada tag < h1> dan warna font abu-abu (#666666) pada tag < p>.

4. Spacing dan Alignment Font CSS

Terakhir, kita juga harus mengatur spacing dan alignment pada teks agar tampilan artikel lebih terstruktur dan mudah dibaca oleh pengguna. Kita dapat menggunakan property CSS seperti margin, padding, text-align, dan line-height untuk mengatur spacing dan alignment pada teks.

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

p {
  text-align: justify;
  margin-bottom: 20px;
}

Pada contoh di atas, kita menggunakan property margin dan padding pada container untuk memberikan jarak antara teks dengan elemen lain pada halaman web. Selain itu, kita juga menggunakan property text-align pada tag < h1> dan tag < p> untuk mengatur alignment pada teks, dan memberikan property margin-bottom pada tag < h1> dan tag < p> untuk memberikan jarak antara teks dengan elemen di bawahnya.

Dengan menggunakan teknik typography CSS seperti di atas, tampilan teks pada halaman web artikel tentang teknologi tersebut menjadi lebih menarik dan mudah dibaca oleh pengguna. Selain itu, tampilan teks yang terstruktur dan mudah dibaca juga dapat meningkatkan pengalaman pengguna dalam membaca artikel tersebut.

Selain teknik typography CSS yang telah dijelaskan di atas, terdapat juga teknik-teknik lain seperti letter-spacing, text-transform, dan font-style yang dapat digunakan untuk mengatur tampilan teks pada halaman web. Pemilihan teknik typography CSS yang tepat harus disesuaikan dengan kebutuhan dan tujuan dari halaman web yang dibuat.