Menggunakan Properti Garis-Ketinggian CSS untuk mendapatkan CSS Line Spacing
Pelajari cara menggunakan properti garis gaya CSS untuk memengaruhi jarak baris Anda di halaman Web Anda.
Nilai Spasi Garis CSS
Jarak baris CSS dipengaruhi oleh tinggi baris properti gaya CSS. Properti ini membutuhkan hingga 5 nilai yang berbeda:
- normal: browser menentukan nilai untuk spasi baris yang terkait dengan ukuran font. Ini biasanya sama dengan ukuran font atau sedikit lebih besar (seperti 20%).
- mewarisi: spasi baris harus diambil dari jarak garis elemen induk. Jadi jika Anda menetapkan tinggi garis dari tag badan Anda hingga 30% lebih besar dari ukuran font dan tag paragraf di dalamnya yang ditetapkan untuk diwariskan, mereka juga akan memiliki tinggi garis 30% lebih besar dari ukuran font.
- angka: Jika nilai garis-tinggi tidak memiliki satuan ukuran, itu dianggap sebagai pengali pada ukuran font untuk tinggi garis. Jadi, tinggi garis 1,25 akan 25% lebih besar dari ukuran font.
- panjang: Jika nilai garis-tinggi memiliki satuan ukuran, itu adalah jumlah ruang yang tepat harus ada di antara garis. Jadi, 1,25 mm akan menghasilkan garis 1,25 milimeter terpisah.
- persentase: Jika garis-tinggi adalah persentase, itu akan menjadi persentase dari ukuran font. Jadi, tinggi garis 125% akan menjadi 25% lebih besar dari ukuran font.
Nilai mana yang harus Anda gunakan untuk spasi garis CSS
Dalam banyak kasus, pilihan terbaik untuk spasi baris adalah membiarkannya di default - atau "normal". Ini umumnya yang paling mudah dibaca dan tidak mengharuskan Anda melakukan sesuatu yang istimewa. Namun mengubah spasi baris dapat memberi nuansa berbeda pada teks Anda.
Jika ukuran font Anda didefinisikan sebagai ems atau persentase, tinggi garis Anda juga harus ditentukan dengan cara itu. Ini adalah bentuk spasi baris yang paling fleksibel karena memungkinkan pembaca untuk mengubah ukuran font dan menjaga rasio yang sama pada spasi baris Anda.
Setel tinggi baris untuk lembar gaya cetak dengan nilai titik (pt). Intinya adalah ukuran cetak, dan ukuran font Anda harus dalam poin juga.
Saya tidak suka menggunakan pilihan nomor karena saya telah menemukan bahwa itu sangat membingungkan orang. Banyak orang berpikir bahwa jumlahnya adalah ukuran yang mutlak, sehingga mereka membuatnya besar. Misalnya, Anda mungkin memiliki satu set font di 14px dan kemudian Anda mengatur tinggi baris Anda ke 14 - yang menghasilkan kesenjangan besar di antara garis - karena jarak garis diatur ke 14 kali ukuran font.
Berapa Banyak Ruang Yang Harus Anda Gunakan untuk Spasi Baris Anda
Seperti yang saya sebutkan di atas, saya merekomendasikan penggunaan spasi baris default kecuali Anda memiliki alasan khusus untuk mengubahnya. Mengubah spasi baris dapat memiliki efek yang berbeda:
- Teks yang sangat rapat bisa sulit dibaca. Tetapi ruang garis kecil dapat mempengaruhi mood teks. Jika teks diringkas bersama, itu bisa membuat kesan teks tampak lebih gelap atau lebih tegang.
- Teks yang lebih jauh terpisah juga bisa sulit dibaca. Namun ruang garis yang lebar membuat teks tampak lebih mengalir dan lancar.
- Mengubah spasi baris dapat membuat teks yang tidak cocok dengan ruang menjadi lebih padat atau mengambil lebih banyak ruang di desain Anda.