Tailwind CSS Academy · Pelajaran

Tinggi Baris dan Jarak Huruf

Kendalikan keterbacaan dengan utilitas leading-* untuk tinggi baris dan utilitas tracking-* untuk jarak huruf.

Pelajaran 3 dari 413 langkah

Tinggi Baris dan Jarak Huruf adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.

Mengapa Tinggi Baris Penting

Tinggi baris adalah jarak antarbaris. Terlalu rapat terasa sesak, sedangkan terlalu renggang terasa berantakan. Pengaturan yang tepat membuat teks panjang jauh lebih mudah dibaca.

Utilitas leading-* Tailwind

Atur dengan utilitas leading-*: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), dan leading-loose (2.0). Namanya berasal dari istilah tipografi cetak lama.

<p class="leading-tight">Tight: good for headings</p>
<p class="leading-normal">Normal: default for most text</p>
<p class="leading-relaxed">Relaxed: comfortable for body text</p>
<p class="leading-loose">Loose: for spacious editorial layouts</p>

Leading untuk Judul dan Isi

Gunakan leading-tight untuk judul karena teks besar sudah memiliki ruang, dan leading-relaxed untuk isi yang memerlukan lebih banyak ruang bernapas. leading-normal adalah pilihan bawaan yang aman.

<h1 class="text-4xl font-bold leading-tight text-gray-900">
  A Two-Line Heading That
  Stays Tightly Together
</h1>
<p class="text-base leading-relaxed text-gray-600 mt-4">
  Body paragraph text benefits from more line spacing.
  It makes long passages easier to follow line by line.
</p>

Nilai Leading Tetap

Tailwind juga memiliki leading tetap: leading-3 hingga leading-10 menetapkan tinggi dalam piksel secara tepat. Gunakan ini pada tabel atau antarmuka padat yang memerlukan jarak presisi.

<p class="leading-3">Very tight (12px)</p>
<p class="leading-5">Compact (20px)</p>
<p class="leading-7">Comfortable (28px)</p>
<p class="leading-10">Spacious (40px)</p>

Pengantar Jarak Huruf

Jarak huruf, atau tracking, adalah celah antar karakter. Tracking rapat terasa modern pada judul besar; tracking lebar cocok untuk label pendek seperti lencana dan tag.

Utilitas tracking-* Tailwind

Atur dengan tracking-*: mulai dari tracking-tighter dan tracking-tight, melalui normal, hingga tracking-wide dan tracking-widest. Nilai negatif merapatkan, sedangkan nilai positif merenggangkan.

<p class="tracking-tighter">Tighter: editorial large headings</p>
<p class="tracking-normal">Normal: default body text</p>
<p class="tracking-wide">Wide: comfortable subheadings</p>
<p class="tracking-widest">Widest: UI labels and badges</p>

Tracking untuk Judul Tampilan

Judul tampilan yang besar hampir selalu cocok dengan tracking-tight atau tracking-tighter. Pada ukuran besar, jarak bawaan terasa renggang, dan merapatkannya tampak lebih rapi.

<!-- Without tracking adjustment -->
<h1 class="text-6xl font-bold">Feels Loose</h1>

<!-- Professional: tighter tracking at large sizes -->
<h1 class="text-6xl font-bold tracking-tight">Feels Cohesive</h1>

Tracking untuk Label Antarmuka

Untuk label antarmuka huruf besar, cobalah text-xs font-semibold uppercase tracking-wider text-gray-500. Jarak tambahan mengimbangi kesan sesak yang dapat ditimbulkan huruf besar.

<!-- Dashboard section label -->
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500">
  Recent Activity
</span>

<!-- Badge -->
<span class="bg-green-100 text-green-700 text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full">
  Active
</span>

Menggabungkan Leading dan Tracking

Leading dan tracking tampak maksimal saat digunakan bersama. Kutipan menonjol dapat menggunakan leading-relaxed tracking-wide agar terasa lapang; label metrik dapat menggunakan tracking-widest leading-none.

<!-- Pull quote style -->
<blockquote class="text-2xl italic font-light leading-relaxed tracking-wide text-gray-600">
  'Design is intelligence made visible.'
</blockquote>

<!-- Dashboard label style -->
<p class="text-xs font-bold uppercase tracking-widest leading-none text-gray-500">
  Revenue MTD
</p>

Utilitas Jarak Kata

Tailwind bahkan memiliki jarak kata: word-spacing-tight, normal, dan wide mengatur celah antar kata. Anda akan jarang memerlukannya, terutama untuk teks rata kiri-kanan atau teks tampilan.

<p class="word-spacing-wide text-gray-700">
  Extra space between each word in this sentence.
</p>

Praktik: Gaya Artikel Blog

Artikel blog yang rapi: text-4xl font-bold leading-tight untuk judul, text-xl font-light untuk subjudul, text-lg leading-relaxed untuk isi, dan max-w-prose untuk membatasi lebar baris.

<article class="max-w-prose mx-auto px-4">
  <h1 class="text-4xl font-bold leading-tight tracking-tight text-gray-900 mb-2">
    Article Title
  </h1>
  <p class="text-xl font-light leading-snug text-gray-500 mb-8">
    A compelling subtitle for the article.
  </p>
  <p class="text-lg leading-relaxed text-gray-700">
    The body of the article content goes here.
  </p>
</article>

Pemeriksaan Singkat

Pemeriksaan singkat! Lihat bagaimana jarak sudah tertata. 📏

Jawab di pelajaran interaktif

Ringkasan Pelajaran

Bagus! leading-* mengatur tinggi baris, tracking-* mengatur jarak huruf, judul menyukai tracking rapat, sedangkan isi menyukai leading yang renggang. Selanjutnya: perataan dan dekorasi.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tinggi Baris dan Jarak Huruf” gratis?

Ya — teks lengkap “Tinggi Baris dan Jarak Huruf” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Tinggi Baris dan Jarak Huruf”?

Kendalikan keterbacaan dengan utilitas leading-* untuk tinggi baris dan utilitas tracking-* untuk jarak huruf. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?

Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Tinggi Baris dan Jarak Huruf” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Tailwind CSS Academy