Tutorial CSS / Font, Ukuran Font, dan Tinggi Baris CSS

Gunakan font-family untuk mendefinisikan daftar font cadangan, font-size untuk mengatur ukuran teks, dan line-height untuk mengontrol jarak antar baris. Line-height tanpa satuan skalanya mengikuti ukuran font setiap elemen, membuat gaya teks yang diwariskan lebih mudah diatur.

Tentukan daftar font cadangan yang terurut

body {

  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;

}

Peramban memeriksa daftar font secara berurutan. Jika sebuah font tidak tersedia atau tidak memiliki karakter tertentu, font lain dapat menampilkan karakter tersebut, sehingga satu kalimat dapat menggunakan beberapa font. sans-serif adalah keluarga generik tanpa serif, bukan produk font tertentu. Gunakan tanda kutip untuk nama font yang mengandung spasi.

Mencantumkan font di font-family tidak akan mengunduh font tersebut. Contoh ini menggunakan font yang terpasang dan tidak memuat font web terpisah. Untuk menggunakan font web, sediakan file aktualnya melalui @font-face atau stylesheet penyedia, dan periksa URL serta izin untuk menggunakannya. Lihat MDN: font family.

Pilih ukuran dan ketebalan font untuk setiap peran

rem didasarkan pada ukuran font HTML. Preferensi browser yang berbeda dapat menghasilkan nilai piksel yang berbeda untuk 1rem yang sama. Sebelum mengubah teks menjadi px tetap karena teks terlihat kecil, periksa nilai root dan font yang sebenarnya. Bahkan jika ukuran sama, ukuran visual dan posisi pemisahan baris berbeda tergantung pada desain font. Saat memilih satuan, pertama bedakan antara Warna dan Satuan CSS: px, em, rem, dan Persentase.

400 biasanya sesuai dengan normal, dan 700 sesuai dengan bold. Hasil akan bervariasi tergantung pada bobot yang diberikan oleh font, dan bobot yang hilang dapat diganti dengan nilai yang mendekati atau disintesis. Makna penting dalam dokumen diungkapkan menggunakan strong HTML, dan ketebalan visual dikendalikan menggunakan CSS. Tidak semua huruf tebal memiliki makna semantik.

Bandingkan pewarisan line-height tanpa satuan dan em

line-height membantu menentukan tinggi kotak baris; itu tidak hanya berarti celah kosong antara karakter, dan itu tidak sama dengan tinggi glif. Gunakan margin secara terpisah untuk spasi antara paragraf. Untuk detail lebih lanjut, lihat Mengatur Paragraf dan Daftar dengan CSS.

Bandingkan ketika ukuran font induk adalah 16px dan ukuran font anak adalah 32px. line-height: 1.6 dari induk mewarisi nilai kelipatan itu sendiri, menghasilkan tinggi baris anak sebesar 51.2px. line-height: 1.6em mewarisi panjang 25.6px yang dihitung dari induknya. Jika teks berukuran besar pada elemen anak membentang ke beberapa baris, baris-baris tersebut mungkin tampak padat atau saling bertumpuk.

Perhitungan pewarisan ini mengasumsikan anak tidak memiliki deklarasi line-height terpisah. Nilai yang dideklarasikan pada anak akan lebih diutamakan daripada nilai yang diwarisi. Baseline tanpa satuan memudahkan penyesuaian ukuran heading dan teks lainnya sambil mempertahankan tinggi baris yang proporsional. Lihat MDN: tinggi baris.

Batasi lebar bacaan

max-width: 65ch membatasi lebar bacaan menggunakan lebar langkah (advance width) glif “0” pada font. Ini tidak menjamin persis 65 karakter per baris. Pembungkusan aktual tergantung pada font, ketebalan, karakter, dan lebar yang tersedia. Pilih lebar yang berguna dengan membaca paragraf panjang secara realistis.

Referensi panjang CSS mendefinisikan satuan relatif terhadap font, termasuk ch, dan menjelaskan ukuran referensinya. Lihat MDN: length.

Periksa font yang dirender dan nilai yang dihitung

Simpan seluruh kode di bawah ini sebagai UTF-8 ke fonts.html dan buka di browser Anda. Baik paragraf dengan font kecil maupun paragraf perbandingan 32px termasuk agar Anda dapat memeriksa hubungan antara ukuran dan jarak baris.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare fonts and line spacing</title>
  <style>
    html { font-size: 100%; }
    body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
    main { max-width: 65ch; }
    h1 { font-size: 2rem; font-weight: 700; }
    .copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
    .compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
    .unitless { line-height: 1.6; }
    .length { line-height: 1.6em; }
    .large { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden fonts</h1>
    <p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>
    <h2>Unitless line height</h2>
    <div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>
    <h2>Line spacing specified by em</h2>
    <div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>
  </main>
</body>
</html>

1. Pilih paragraf body di Developer Tools. font-family pada Computed adalah daftar kandidat dan tidak dijamin merupakan nama font yang sedang digunakan. Di Chrome·Edge, Anda dapat memeriksa font yang sebenarnya digunakan di Rendered Fonts di bawah Computed. Browser lain mungkin memiliki struktur menu yang berbeda, seperti panel khusus untuk font.
2. Bandingkan nilai line-height yang dihitung dari dua paragraf .large. Nilai tanpa satuan adalah 51.2px dan nilai em adalah 25.6px. Ubah 1.6em pada induk kedua menjadi 1.6 untuk melihat apakah perbedaan hilang, kemudian kembalikan.
3. Ubah line-height dari .copy menjadi 1.2 dan 1.8 secara bergantian. Pastikan posisi baris berubah sambil mempertahankan ukuran font. Sulit membedakan hanya dengan melihat kalimat pendek satu baris, jadi gunakan paragraf panjang.
4. Ubah max-width pada main menjadi 45ch. Periksa apakah paragraf membungkus lebih awal dan kemudian kembalikan ke 65ch. Jika lebar jendela Anda sudah cukup sempit, mengubah batas atas mungkin membuat perbedaan kecil.

Panduan Chrome DevTools untuk font lokal juga menjelaskan cara memeriksa Rendered Fonts. Jika font yang diharapkan hilang, periksa pemasangannya dan karakter yang didukung. Untuk font web yang terhubung secara terpisah, periksa responsnya dan jika ada kesalahan pemblokiran di Network. Font yang terpasang secara lokal dapat digunakan tanpa permintaan jaringan, jadi permintaan yang hilang saja tidak menunjukkan kegagalan font.