Typography CSS

Redaksi PetiknetMinggu, 5 Maret 2023 | 08:38 WIB
Belajar Typography CSS
Belajar Typography CSS

Petik.net - Typography adalah teknik yang digunakan untuk mengatur tampilan teks pada halaman web. Dalam typography , 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;
}