-
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:
-
Jika dilihat pada panel setting terdapat berbagai macam properti untuk mengatur teks, berikut ini adalah beberapa contohnya:
- 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.
-
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:
-
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:
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:
High-Fidelity Prototype
Latihan Mengganti Tipografi dan Margin
Pada latihan ini, Anda akan memahami cara mengustomisasi teks dan shortcut untuk mengetahui jarak antar elemen.