Belajar Tentang Memimpin dalam Reka Bentuk Web

Reka bentuk web sentiasa meminjam prinsipal dan definisi dari dunia reka bentuk grafik dan cetak. Hal ini terutama berlaku ketika datang ke tipografi web dan cara kami mendapatkan bentuk surat di laman web kami. Parallels ini tidak selalu 1 hingga 1 terjemahan, tetapi anda pasti dapat melihat di mana satu disiplin telah mempengaruhi yang lain. Ini amat jelas apabila anda menganggap hubungan antara istilah tipografi tradisional "terkemuka" dan sifat CSS yang dikenali sebagai "garis ketinggian."

Maksud Memimpin

Apabila orang biasa menggunakan telefon bimbit atau surat kayu secara manual untuk membuat tipografi untuk halaman yang dicetak, kepingan nipis yang tipis diletakkan di antara baris teks mendatar untuk membuat jarak diantara garis tersebut. Sekiranya anda mahu ruang yang lebih besar, anda akan memasukkan kepingan yang lebih besar. Ini adalah bagaimana istilah "terkemuka" dicipta. Jika anda memandang istilah "terkemuka" dalam sebuah buku mengenai reka bentuk dan pengetua prafographic, ia akan membaca sesuatu dengan kesan - "jarak antara garis garisan baris berturut-turut."

Memimpin dalam Reka Bentuk Web

Dalam reka bentuk digital, peneraju istilah masih digunakan untuk merujuk kepada jarak antara baris teks. Banyak program menggunakan istilah yang tepat ini, walaupun timbal sebenar jelas tidak digunakan dalam program tersebut. Ini merupakan contoh hebat dari bentuk idea pemilihan reka bentuk baru dari yang tradisional, walaupun pelaksanaan yang sebenarnya dari prinsip itu telah berubah.

Ketika datang ke reka bentuk web, tidak ada properti CSS untuk "terkemuka." Sebaliknya, sifat CSS yang akan mengendalikan paparan visual ini dipanggil ketinggian baris. Jika anda mahu teks anda mempunyai ruang tambahan di antara baris teks mendatar, anda akan menggunakan harta ini. Sebagai contoh, katakan anda ingin meningkatkan ketinggian baris untuk semua perenggan di dalam elemen laman web anda, anda boleh melakukannya seperti ini:

utama p {line-height: 1.5; }

Ini akan menjadi 1.5 kali ketinggian baris biasa, berdasarkan saiz fon lalai halaman (yang biasanya 16px).

Bila hendak menggunakan ketinggian baris

Sebagaimana terperinci di atas, ketinggian baris adalah sesuai untuk digunakan untuk mengasingkan baris teks dalam perenggan atau blok teks lain. Jika terdapat ruang yang terlalu kecil di antara baris, teks itu boleh menjadi jumbled dan sukar dibaca untuk penonton ke laman web anda. Begitu juga, jika garis jarak jauh jauh di halaman, aliran bacaan normal akan terganggu dan pembaca akan menghadapi masalah dengan teks anda untuk alasan itu. Inilah sebabnya mengapa anda ingin mencari jarak jarak jarak yang sesuai untuk digunakan. Anda juga boleh menguji reka bentuk anda dengan pengguna sebenar untuk mendapatkan maklum balas mereka tentang kebolehbacaan halaman .

Bila Tidak Menggunakan Ketinggian Baris

Jangan mengelirukan ketinggian baris dengan padding atau margin yang anda akan gunakan untuk menambah ruang kosong pada reka bentuk halaman anda, termasuk di bawah tajuk atau perenggan. Jarak itu tidak memimpin, dan oleh itu ia tidak dikendalikan oleh ketinggian baris.

Jika anda ingin menambah ruang di bawah elemen teks tertentu, anda akan menggunakan margin atau padding. Kembali ke contoh CSS terdahulu yang kami gunakan, kami boleh menambah ini:

utama p {line-height: 1.5; margin-bottom: 24px; }

Ini masih akan mempunyai ketinggian baris 1.5 antara baris teks untuk perenggan halaman kami (yang dalam elemen ). Paragraf-paragraf yang sama juga akan mempunyai 24 pixel ruang kosong di bawah masing-masing, membolehkan pemecahan visual yang membolehkan pembaca mudah mengenali satu perenggan dari yang lain dan membuat laman web membaca lebih mudah dilakukan. Anda juga boleh menggunakan harta padding sebagai ganti margin di sini:

utama p {line-height: 1.5; padding-bottom: 24px; }

Dalam hampir semua kes, ini akan memaparkan sama seperti CSS sebelumnya.

Katakan anda ingin menambah jarak di bawah senarai item yang berada di dalam senarai dengan kelas "perkhidmatan-menu", anda akan menggunakan margin atau padding untuk melakukannya, TIDAK ketinggian baris. Jadi ini sesuai.

.services-menu li { Anda hanya akan menggunakan ketinggian baris di sini jika anda mahu menetapkan jarak teks di dalam senarai item itu sendiri, dengan mengandaikan bahawa mereka mempunyai larian panjang teks yang boleh berlari ke beberapa baris untuk setiap titik peluru.