Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Spasi Teks CSS

API reference

Buat deklarasi CSS letter-spacing, word-spacing, line-height, text-indent, dan tab-size dengan pratinjau paragraf langsung. Pilih satuan px, em, atau rem, lalu salin CSS dan HTML-nya.

Input

Hanya digunakan untuk pratinjau dan cuplikan HTML.

Dalam satuan yang dipilih (em relatif terhadap ukuran font).

Lebar satu karakter tab; terlihat pada teks berformat pre.

Output

Teks dengan jarak yang sudah diatur akan muncul di sini.

Deklarasi spasi
CSS
HTML
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-spacing-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-text-spacing-generator` tool (CSS Text Spacing Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-text-spacing-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Spasi Teks CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Spasi membuat teks mudah dibaca. CSS memberi lima properti untuk mengaturnya: letter-spacing, word-spacing, line-height, text-indent, dan tab-size. Generator ini memungkinkan Anda menyesuaikan kelimanya terhadap paragraf contoh secara langsung, lalu menyalin CSS-nya.

Cara menggunakannya

  1. Tempel atau ketik teks contoh. Teks ini hanya dipakai untuk pratinjau dan cuplikan HTML.
  2. Atur jarak huruf dan kata. Nilai positif kecil membuat judul dan teks kapital lebih lega; nilai negatif kecil merapatkan tipografi display berukuran besar.
  3. Tentukan tinggi baris. Nilai tanpa satuan seperti 1.5 mengikuti ukuran font. Untuk teks isi, biasanya paling nyaman di antara 1.4 dan 1.7.
  4. Tambahkan indentasi baris pertama jika Anda menginginkan tampilan paragraf ala buku.
  5. Pilih satuan. em dan rem mengikuti ukuran font; px bersifat tetap.
  6. Salin hasilnya: deklarasinya, aturan CSS lengkap, dan cuplikan HTML yang sesuai.

Referensi singkat

  • letter-spacing sering disebut tracking. Sekitar 0.05em sampai 0.1em cocok untuk label huruf kapital.
  • word-spacing hanya mengubah jarak antarkata.
  • line-height disebut leading. Gunakan angka tanpa satuan agar elemen bertingkat mewarisi rasionya, bukan panjang yang sudah dihitung.
  • text-indent hanya menjorokkan baris pertama sebuah blok.
  • tab-size mengatur lebar karakter tab pada blok white-space: pre.

Tips aksesibilitas

WCAG 1.4.12 menghendaki teks tetap berfungsi saat pengguna mengatur tinggi baris minimal 1.5, jarak paragraf 2×, dan jarak huruf 0.12em. Hindari wadah dengan tinggi tetap yang memotong teks ketika jaraknya bertambah.

Untuk garis di bawah atau di atas teks, lihat Generator Text Decoration CSS. Untuk bayangan, coba Generator Text Shadow CSS.

Privasi

Semuanya berjalan di peramban Anda. Teks dan pengaturan Anda tidak pernah diunggah.

letter-spacingword-spacingline-heighttext-indenttab-sizetypographykerningleadingtracking

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan