Ukuran Font font-size

Pengenalan Ukuran Font (font-size) dalam CSS

Ukuran font (font-size) adalah salah satu properti penting dalam CSS yang memungkinkan Anda mengontrol ukuran teks pada elemen HTML. Anda dapat mengubah ukuran font untuk membuat teks lebih besar, lebih kecil, atau sesuai dengan kebutuhan desain Anda.

Menggunakan Properti font-size

Anda dapat mengatur ukuran font menggunakan properti font-size dalam CSS. Contohnya:

p {
  font-size: 16px; /* Ukuran font 16 piksel */
}

Satuan Ukuran Font

Ada beberapa satuan yang dapat Anda gunakan untuk menentukan ukuran font:

  1. Piksel (px): Satuan yang paling umum digunakan. Contoh: font-size: 16px;

  2. Em (em): Satuan relatif terhadap ukuran font elemen yang berada di atasnya. Contoh: font-size: 1.2em; (1.2 kali ukuran font elemen yang berada di atasnya).

  3. Persen (%): Satuan relatif terhadap ukuran font elemen yang berada di atasnya. Contoh: font-size: 120%; (120% dari ukuran font elemen yang berada di atasnya).

  4. Poin (pt): Satuan yang sering digunakan dalam desain cetak. Contoh: font-size: 12pt;

Ukuran Font yang Responsif

Untuk membuat ukuran font responsif, Anda dapat menggunakan satuan relatif seperti em atau %. Ini akan memungkinkan teks untuk beradaptasi dengan ukuran layar yang berbeda.

h1 {
  font-size: 2em; /* Ukuran font berdasarkan ukuran font elemen di atasnya */
}

p {
  font-size: 110%; /* Ukuran font 110% dari ukuran font elemen di atasnya */
}

Kesimpulan

Menggunakan properti font-size dalam CSS, Anda dapat mengendalikan ukuran teks dalam desain web Anda. Anda dapat memilih satuan yang sesuai dengan kebutuhan Anda dan membuat teks responsif dengan menggunakan satuan relatif seperti em atau %. Semoga tutorial ini bermanfaat!

PREVIOUS
NEXT