> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Mengganti Tipografi dan Margin

Pada latihan ini, Anda akan memahami cara mengustomisasi teks dan shortcut untuk mengetahui jarak antar elemen.

1. Nah, mulai dari sini kita juga akan memikirkan tentang tipografi. Jika dilihat, teks di atas terlalu tebal untuk sebuah petunjuk kolom pencarian, maka di sini kita memilih font **Inter** dengan jenis **Regular** dan ukuran **14**. Anda dapat mengubahnya pada properti Text pada panel sebelah kanan. Hasilnya terlihat seperti ini:\
   [![dos:f14cb7859e3062a8421f494a17a1e93020211006093225.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:f14cb7859e3062a8421f494a17a1e93020211006093225.jpeg)](# "dos:f14cb7859e3062a8421f494a17a1e93020211006093225.jpeg")

2. Jika dilihat pada panel setting terdapat berbagai macam properti untuk mengatur teks, berikut ini adalah beberapa contohnya:\
   [![dos:2ace8321cc7f8d779bfd1b863e53698620211006093418.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:2ace8321cc7f8d779bfd1b863e53698620211006093418.gif)](# "dos:2ace8321cc7f8d779bfd1b863e53698620211006093418.gif")

   * **Line Height** : Mengatur jarak antar baris.
   * **Letter Spacing** : Mengatur jarak antar huruf.
   * **Auto Width** : Mengatur lebar elemen menyesuaikan dengan panjang teks.
   * **Auto Height** : Mengatur tinggi elemen menyesuaikan dengan jumlah baris teks.
   * **Fixed Size** : Mengatur lebar dan tinggi dengan nilai tetap secara manual.
   * **Text Align** : Mengatur rata kiri, tengah, kanan, atas, dan bawah.

3. Sebagai informasi, kita akan terus menggunakan typeface **Inter** pada keseluruhan teks supaya aplikasi terlihat konsisten, yang berbeda hanya jenis dan ukurannya saja. Berikut adalah contoh header yang menggunakan font **Inter** dengan jenis **Bold** dan ukuran **18**:\
   [![dos:9d5c704cac46f22b5a53f63e41abbaeb20211006093222.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:9d5c704cac46f22b5a53f63e41abbaeb20211006093222.jpeg)](# "dos:9d5c704cac46f22b5a53f63e41abbaeb20211006093222.jpeg")

4. Selain menggunakan Grid seperti contoh sebelumnya, Anda juga bisa melihat jarak antar elemen (margin) dengan klik elemennya terlebih dahulu, kemudian tahan **Alt** dan **gerakkan kursor ke elemen lain**. Sehingga, muncul jarak margin seperti berikut:\
   [![dos:93626789d944f77089b5d59740322afc20211006155125.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:93626789d944f77089b5d59740322afc20211006155125.gif)](# "dos:93626789d944f77089b5d59740322afc20211006155125.gif")\
   Untuk mengganti jarak margin, Anda bisa melakukannya melalui properti margin yang ada di sebelah kanan atau dengan cara pilih kedua elemen menggunakan Shift dan geser garis yang ada di tengah kedua elemen seperti ini:\
   [![dos:1ec4053676bcb68bad2704805b10e12120211006155205.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:1ec4053676bcb68bad2704805b10e12120211006155205.gif)](# "dos:1ec4053676bcb68bad2704805b10e12120211006155205.gif")