Desain web selalu meminjam prinsipal dan definisi dari dunia desain grafis dan cetak. Hal ini terutama benar ketika datang ke tipografi web dan cara di mana kami mendapatkan formulir di halaman web kami. Paralel ini tidak selalu 1 banding 1 terjemahan, tetapi Anda pasti bisa melihat di mana satu disiplin mempengaruhi yang lain. Hal ini terutama terlihat ketika Anda mempertimbangkan hubungan antara istilah tipografi tradisional "terkemuka" dan properti CSS yang dikenal sebagai "garis-tinggi."
Tujuan Memimpin
Ketika orang-orang digunakan untuk secara manual menggunakan huruf-huruf logam atau kayu untuk menciptakan tipografi untuk halaman yang dicetak, potongan-potongan tipis timbal ditempatkan di antara garis-garis horizontal teks untuk menciptakan jarak antara garis-garis tersebut. Jika Anda menginginkan ruang yang lebih besar, Anda akan memasukkan potongan timah yang lebih besar. Ini adalah bagaimana istilah "memimpin" diciptakan. Jika Anda mencari istilah "memimpin" dalam sebuah buku tentang tipografi desain dan kepala sekolah, itu akan membaca sesuatu untuk efek - "jarak antara garis dasar tipe garis berurutan."
Memimpin dalam Desain Web
Dalam desain digital, istilah terkemuka masih digunakan untuk merujuk pada jarak antar baris teks. Banyak program menggunakan istilah yang tepat ini, meskipun petunjuk yang sebenarnya jelas tidak digunakan dalam program-program tersebut. Ini adalah contoh bagus dari bentuk-bentuk baru ide-ide peminjaman desain dari yang tradisional, meskipun penerapan yang tepat dari prinsip tersebut telah berubah.
Ketika datang ke desain web, tidak ada properti CSS untuk "memimpin." Sebaliknya, properti CSS yang akan menangani tampilan teks visual ini disebut garis-tinggi. Jika Anda ingin teks Anda memiliki ruang tambahan di antara garis-garis horizontal teks, Anda akan menggunakan properti ini. Misalnya, Anda ingin meningkatkan tinggi baris untuk semua paragraf di dalam elemen
Sekarang ini akan menjadi 1,5 kali tinggi garis normal, berdasarkan ukuran font default halaman (yang biasanya 16px).
Kapan Harus Menggunakan Tinggi Baris
Seperti yang dijelaskan di atas, tinggi garis sesuai untuk digunakan untuk melebarkan garis teks dalam paragraf atau blok teks lainnya. Jika ada terlalu sedikit ruang di antara garis, teks dapat menjadi campur aduk dan sulit dibaca bagi pemirsa ke situs Anda. Demikian pula, jika garis-garis diberi jarak terlalu jauh pada halaman, aliran normal membaca akan terganggu dan pembaca akan mengalami masalah dengan teks Anda karena alasan itu. Inilah sebabnya mengapa Anda ingin mencari jumlah garis-tinggi spasi yang tepat untuk digunakan. Anda juga dapat menguji desain Anda dengan pengguna sebenarnya untuk mendapatkan umpan balik mereka tentang pembacaan halaman .
Kapan Tidak Menggunakan Line-Height
Jangan bingung tinggi baris dengan padding atau margin yang akan Anda gunakan untuk menambahkan spasi ke desain halaman Anda, termasuk di bawah judul atau paragraf. Jarak tersebut tidak mengarah, dan oleh karena itu tidak ditangani oleh garis-tinggi.
Jika Anda ingin menambahkan ruang di bawah elemen teks tertentu, Anda akan menggunakan margin atau padding. Kembali ke contoh CSS sebelumnya yang kita gunakan, kita bisa menambahkan ini:
p {line-height: 1.5; margin-bottom: 24px; } Ini akan tetap memiliki tinggi garis 1,5 antara baris teks untuk halaman kami's paragraf (yang di dalam elemen
Dalam hampir semua kasus, ini akan ditampilkan sama dengan CSS sebelumnya.
Katakanlah Anda ingin menambahkan spasi di bawah daftar item yang ada di dalam daftar dengan kelas "menu layanan", Anda akan menggunakan margin atau padding untuk melakukannya, BUKAN tinggi baris. Jadi ini akan tepat.
.layanan-menu li {