Cara Mengubah Spasi Baris di WordPress: Semua Metode Dijelaskan

Spasi baris di WordPress — dikendalikan oleh properti CSS line-height — mendefinisikan jarak vertikal antara baris teks dalam elemen blok. Menyesuaikannya secara langsung memengaruhi keterbacaan, hierarki visual, dan kualitas tipografi di seluruh situs Anda. Empat metode utama untuk mengubahnya adalah: kontrol native Gutenberg Block Editor, WordPress Theme Customizer, CSS kustom melalui panel Additional CSS, dan plugin tipografi. Setiap metode cocok untuk tingkat akses teknis dan cakupan perubahan yang berbeda.

Panduan ini mencakup setiap metode secara mendalam secara teknis, termasuk kasus tepi, jebakan spesifisitas selektor, dan trade-off plugin yang sebagian besar tutorial lewatkan sepenuhnya.

Mengapa Line Height Penting Lebih dari Sekadar Estetika

Spesifikasi CSS mendefinisikan line-height sebagai tinggi minimum kotak baris dalam elemen. Untuk teks isi, panduan aksesibilitas WCAG 2.1 (Success Criterion 1.4.12) merekomendasikan minimum line-height sebesar 1,5 kali ukuran font. Mengabaikan ini tidak hanya memengaruhi desain visual tetapi juga kepatuhan dan sinyal kualitas mesin pencari yang terkait dengan Core Web Vitals dan metrik keterlibatan pengguna.

Pengaturan line-height yang buruk — khususnya nilai di bawah 1.2 pada teks isi — menyebabkan teks terasa sempit, meningkatkan bounce rate, dan dapat memicu masalah Cumulative Layout Shift (CLS) ketika dikombinasikan dengan web font yang dimuat secara asinkron.

Metode 1: Kontrol Native Gutenberg Block Editor

Editor Gutenberg mengekspos kontrol line-height secara native untuk blok Paragraph, Heading, List, dan Quote, tetapi fitur ini harus diaktifkan secara eksplisit di tingkat tema melalui theme.json atau fungsi add_theme_support().

Langkah 1: Verifikasi Dukungan Line Height Aktif

Jika Anda tidak melihat kolom Line Height di panel pengaturan blok, tema aktif Anda belum mendeklarasikan dukungan untuk itu. Anda dapat mengaktifkannya dengan menambahkan kode berikut ke functions.php tema Anda:

add_theme_support( 'custom-line-height' );

Untuk tema blok yang menggunakan theme.json, pastikan hal berikut ada di bawah settings:

{
  "settings": {
    "typography": {
      "lineHeight": true
    }
  }
}

Langkah 2: Pilih Blok Target

Di editor posting atau halaman, klik blok Paragraph atau Heading yang ingin Anda modifikasi. Toolbar blok muncul di bagian atas, dan sidebar sebelah kanan beralih ke tab Block secara otomatis.

Langkah 3: Temukan Panel Typography

Di panel Block sebelah kanan, gulir ke bagian Typography. Jika bagian tersebut diciutkan, klik labelnya untuk meluaskannya. Anda akan melihat kolom input Line Height.

Masukkan nilai tanpa satuan. WordPress meneruskan ini langsung sebagai nilai CSS line-height pada inline style blok. Rentang yang direkomendasikan:

• Paragraf isi: 1.5 hingga 1.8
• Heading (H1–H2): 1.1 hingga 1.3
• Subheading (H3–H4): 1.2 hingga 1.4

Kasus tepi kritis: Nilai tanpa satuan (misalnya, 1.6) sangat lebih disukai daripada nilai piksel atau em (misalnya, 24px atau 1.6em) karena nilainya diskalakan secara proporsional ketika elemen anak mewarisi properti dan mengubah ukuran fontnya sendiri. Menggunakan px di sini adalah kesalahan umum yang merusak spasi elemen bersarang.

Langkah 4: Simpan dan Validasi

Klik Update atau Publish. Gunakan DevTools browser Anda (F12 > Elements > Computed) untuk mengonfirmasi bahwa inline style line-height: 1.6 diterapkan pada elemen yang benar dan tidak ditimpa oleh stylesheet tema dengan spesifisitas lebih tinggi.

Metode 2: WordPress Theme Customizer untuk Tipografi Seluruh Situs

Customizer (Appearance > Customize) menyediakan antarmuka pratinjau langsung untuk perubahan di seluruh situs. Kontrol tipografi di Customizer bukan fitur inti WordPress — sepenuhnya disediakan oleh tema aktif Anda atau plugin pendamping.

Tema dengan Panel Typography Native

Tema yang dibangun di atas framework seperti GeneratePress, Astra, Kadence, atau OceanWP mengekspos bagian Typography khusus dengan slider line-height untuk teks isi, heading, dan area widget secara individual.

Langkah 1: Navigasi ke Pengaturan Typography

Buka Appearance > Customize. Cari bagian berlabel Typography, Fonts, atau Global Styles tergantung pada tema Anda. Jika tidak ada bagian seperti itu, tema Anda tidak mendukung kontrol tipografi berbasis Customizer — lanjutkan ke Metode 3 atau Metode 4.

Langkah 2: Sesuaikan Line Height Per Elemen

Sebagian besar customizer tema memungkinkan Anda menargetkan:

• Teks isi (memetakan ke selektor body atau p)
• Heading H1 hingga H6
• Menu navigasi
• Judul widget

Tetapkan nilai Anda dan gunakan panel pratinjau langsung untuk memvalidasi di breakpoint desktop dan mobile secara bersamaan.

Langkah 3: Publikasikan Perubahan

Klik Publish di kiri atas Customizer. Perubahan ditulis ke opsi tersimpan tema dan diterapkan secara global melalui stylesheet tema atau blok <style> inline di <head>.

Jebakan: Pengaturan tipografi Customizer disimpan di opsi tema, bukan di style.css. Jika Anda mengganti tema, semua penyesuaian ini akan hilang. Selalu dokumentasikan nilai Anda sebelum mengganti tema.

Metode 3: CSS Kustom — Metode Paling Presisi dan Portabel

CSS kustom memberi Anda kendali penuh atas penargetan selektor, spesifisitas, dan breakpoint responsif. Ini adalah pendekatan yang tepat ketika Anda membutuhkan kontrol granular yang tidak dapat disediakan oleh editor blok maupun Customizer.

Langkah 1: Akses Panel Additional CSS

Navigasi ke Appearance > Customize > Additional CSS. CSS ini disimpan di database dan dikeluarkan secara inline di <head>, memberikannya keunggulan spesifisitas dibandingkan sebagian besar stylesheet tema.

Sebagai alternatif, jika Anda mengelola lingkungan server sendiri — misalnya, pada paket VPS Hosting — Anda dapat mengantrikan stylesheet kustom melalui functions.php untuk kontrol cache dan performa yang lebih baik:

function mytheme_custom_styles() {
    wp_enqueue_style(
        'custom-typography',
        get_stylesheet_directory_uri() . '/css/custom-typography.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Langkah 2: Tulis Aturan CSS yang Ditargetkan

Line height paragraf global:

p {
    line-height: 1.6;
}

Semua level heading:

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

Hanya blok paragraf khusus Gutenberg (menghindari pengaruh pada teks sidebar atau footer):

.wp-block-paragraph {
    line-height: 1.7;
}

Dibatasi pada template halaman atau tipe posting tertentu menggunakan kelas body yang dikeluarkan WordPress secara otomatis:

.single-post .entry-content p {
    line-height: 1.65;
}

.page-template-landing-page p {
    line-height: 1.5;
}

Penyesuaian responsif untuk mobile (layar yang lebih kecil mendapat manfaat dari spasi yang sedikit lebih rapat):

@media (max-width: 768px) {
    p {
        line-height: 1.5;
    }
}

Langkah 3: Selesaikan Konflik Spesifisitas

Jika CSS Anda tidak berlaku, aturan tema atau plugin dengan spesifisitas lebih tinggi menimpanya. Diagnosis ini di DevTools dengan memeriksa elemen dan memeriksa aturan mana yang dicoret di panel Styles.

Untuk meningkatkan spesifisitas tanpa menggunakan !important, cakupkan selektor Anda dengan lebih presisi:

body .site-content .entry-content p {
    line-height: 1.6;
}

Gunakan !important hanya sebagai upaya terakhir, karena ini menciptakan utang pemeliharaan yang bertambah dengan setiap penambahan CSS di masa mendatang:

p {
    line-height: 1.6 !important; /* Use only if specificity cannot be resolved otherwise */
}

Metode 4: Plugin Tipografi

Plugin adalah pilihan yang tepat ketika Anda membutuhkan antarmuka tanpa kode, ketika Anda mengelola situs untuk klien yang harus memeliharanya secara mandiri, atau ketika Anda membutuhkan fitur tipografi OpenType lanjutan di luar line-height.

Perbandingan Plugin

Menginstal dan Mengonfigurasi Advanced Editor Tools

Advanced Editor Tools (sebelumnya TinyMCE Advanced) adalah opsi yang paling banyak digunakan untuk menambahkan kontrol spasi baris langsung ke toolbar editor blok.

1. Buka Plugins > Add New, cari Advanced Editor Tools, dan klik Install Now, lalu Activate.
2. Navigasi ke Settings > Advanced Editor Tools.
3. Di tab Block Editor, aktifkan tombol toolbar Line Height dengan menyeretnya ke baris toolbar aktif.
4. Kembali ke posting atau halaman mana pun. Pilih blok Paragraph. Kontrol line height kini muncul di toolbar blok.

Menggunakan WP Typography untuk Aturan Global

WP Typography menerapkan aturan tipografi di tingkat rendering PHP, artinya memodifikasi output HTML sebelum mencapai browser. Ini berguna untuk menerapkan line-height yang konsisten di semua teks tanpa menyentuh blok individual.

Setelah aktivasi, buka Settings > WP Typography dan temukan bagian CSS Classes untuk menerapkan aturan line height yang dibatasi pada kontainer tertentu.

Jebakan: Pemrosesan teks WP Typography dapat berkonflik dengan plugin caching jika full-page caching diaktifkan. Selalu uji setelah mengaktifkannya di lingkungan staging, terutama jika stack hosting Anda menyertakan caching tingkat server — konfigurasi umum pada Dedicated Servers yang menjalankan Nginx dengan FastCGI cache.

Full-Site Editing (FSE) dan theme.json: Pendekatan Modern

Untuk situs yang menggunakan tema blok (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE, dll.), metode kanonik untuk menetapkan nilai line-height default adalah theme.json. File ini mendefinisikan token desain yang menyebar melalui seluruh UI editor blok.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "lineHeight": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.25"
        }
      },
      "h1": {
        "typography": {
          "lineHeight": "1.1"
        }
      }
    }
  }
}

Nilai yang ditetapkan di styles dalam theme.json dikeluarkan sebagai properti kustom CSS dan diterapkan melalui selektor :root, memberikan jangkauan yang luas sekaligus tetap dapat ditimpa di tingkat blok. Ini adalah arsitektur yang paling mudah dipelihara untuk situs WordPress produksi di tahun 2024 dan seterusnya.

Jika Anda membangun atau mengelola tema blok kustom di server yang Anda kendalikan — seperti VPS dengan cPanel — mengedit theme.json langsung melalui file manager atau SSH lebih cepat dan lebih andal daripada menggunakan Customizer untuk token tipografi.

Memilih Metode yang Tepat: Matriks Keputusan

Daftar Periksa Teknis Sebelum Tayang

• Konfirmasi nilai line-height tanpa satuan atau gunakan em — hindari px untuk properti yang diwarisi.
• Validasi WCAG 2.1 SC 1.4.12: line-height teks isi harus minimal 1.5.
• Periksa gaya yang dihitung di DevTools untuk mengonfirmasi tidak ada aturan dengan spesifisitas lebih tinggi yang menimpa nilai Anda.
• Uji pada setidaknya dua breakpoint mobile — line-height yang berfungsi pada 1440px bisa terasa berlebihan pada 375px.
• Jika menggunakan plugin caching (WP Rocket, W3 Total Cache), bersihkan cache setelah perubahan CSS apa pun.
• Untuk situs yang dihosting di Shared Web Hosting, gunakan panel Additional CSS daripada mengedit file tema secara langsung untuk menghindari perubahan yang ditimpa saat pembaruan tema.
• Dokumentasikan semua nilai line-height kustom dalam panduan gaya atau blok komentar di dalam file CSS Anda.
• Jika menerapkan tema anak kustom atau theme.json di server yang dikelola, pastikan izin file pada theme.json diatur ke 644 untuk mencegah kesalahan penulisan dari editor file WordPress.

FAQ

Apakah mengubah line height di editor Gutenberg memengaruhi perangkat mobile?

Ya. Nilai yang ditetapkan melalui kolom Line Height Block Editor diterapkan sebagai inline style tanpa media query, sehingga berlaku di semua lebar viewport. Untuk kontrol responsif — nilai berbeda di mobile versus desktop — Anda harus menggunakan CSS kustom dengan kueri @media atau plugin blok seperti Kadence Blocks yang mengekspos kontrol tipografi per-breakpoint.

Mengapa line-height CSS kustom saya tidak diterapkan meskipun saya sudah menambahkannya ke Additional CSS?

Penyebab paling umum adalah aturan stylesheet tema atau plugin dengan spesifisitas CSS lebih tinggi yang menargetkan elemen yang sama. Buka DevTools, periksa elemen paragraf, dan cari aturan yang dicoret di panel Styles. Tingkatkan spesifisitas selektor Anda (misalnya, .entry-content p alih-alih p) atau, sebagai upaya terakhir, tambahkan !important.

Apa perbedaan antara line-height: 1.6 dan line-height: 1.6em?

Nilai tanpa satuan seperti 1.6 diwarisi sebagai rasio — elemen anak mengalikan ukuran font mereka sendiri dengan 1.6. Nilai 1.6em dihitung relatif terhadap ukuran font induk dan kemudian diwarisi sebagai nilai piksel tetap, yang dapat menyebabkan spasi yang tidak sejajar pada elemen bersarang dengan ukuran font yang berbeda. Selalu gunakan nilai tanpa satuan untuk line-height pada teks isi.

Bisakah saya menetapkan line height yang berbeda untuk tampilan editor dan front end?

Ya. WordPress menerapkan gaya editor secara terpisah dari gaya front-end. Untuk menargetkan kanvas editor blok, antrikan stylesheet menggunakan hook enqueue_block_editor_assets dan cakupkan aturan Anda ke .editor-styles-wrapper p. Ini memastikan pengalaman pengeditan secara visual sesuai dengan output yang diterbitkan.

Apakah menyesuaikan line height akan merusak tata letak situs saya atau menyebabkan Cumulative Layout Shift?

Mengubah line-height pada elemen teks statis tidak menyebabkan CLS dengan sendirinya. CLS dipicu ketika elemen bergeser posisi setelah render awal — biasanya disebabkan oleh web font yang dimuat dan ditukar. Jika Anda menggunakan Google Fonts atau web font kustom, padukan penyesuaian line-height Anda dengan font-display: swap dan petunjuk preload untuk meminimalkan ketidakstabilan tata letak selama pemuatan font. Menghosting font Anda secara lokal — mudah dilakukan di lingkungan VPS Hosting — menghilangkan latensi font pihak ketiga yang paling sering memicu CLS bersamaan dengan perubahan tipografi.