Apa itu Tipografi Fluida?

Tipografi fluida membuat teks Anda menskalakan dengan mulus di berbagai ukuran layar alih-alih melompat antar titik henti tetap. Menggunakan fungsi CSS clamp(), font-size dan line-height menyesuaikan secara proporsional saat lebar viewport berubah — tidak perlu media query.

Pendekatan Tradisional

Titik Henti Tetap

Perubahan ukuran mendadak di titik henti
Banyak media query diperlukan
Mempertahankan banyak nilai per elemen
Penskalaan tidak konsisten antar titik henti

Tipografi Fluida

Solusi clamp()

Penskalaan mulus dan berkelanjutan
Tidak perlu media query
Deklarasi tunggal per elemen
Ukuran sempurna di viewport apa pun

Memahami clamp()

Fungsi clamp(min, preferred, max) menerima tiga nilai: ukuran minimum, ukuran pilihan berdasarkan lebar viewport, dan ukuran maksimum. Browser secara otomatis menghitung ukuran yang tepat untuk viewport apa pun.

Contoh: font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) menskalakan teks dengan mulus dari 16px pada viewport 320px hingga 24px pada viewport 1440px.

Mengapa Menggunakan Kalkulator Ini?

Menghitung nilai pilihan (parameter tengah) memerlukan matematika kompleks: mengonversi nilai piksel ke rem, menghitung slope dan y-intercept dari fungsi linear. Kalkulator ini menangani semua perhitungan dan memberikan kode CSS siap produksi secara instan.

Perhitungan Otomatis

Rumus matematika kompleks dihitung secara instan dengan hasil yang akurat.

Pratinjau Langsung

Lihat dengan tepat bagaimana tipografi Anda menskalakan di berbagai ukuran viewport.

Kode Siap Pakai

Salin kode CSS siap produksi langsung ke proyek Anda.

Cara Menggunakan

Ikuti langkah-langkah sederhana ini untuk menghasilkan CSS tipografi fluida untuk proyek Anda. Kalkulator memandu Anda melalui setiap parameter dengan pratinjau real-time dan pembuatan kode instan.

Atur Rentang Viewport Anda

Masukkan lebar viewport minimum dan maksimum untuk desain Anda. Nilai umum adalah 320px (mobile terkecil) dan 1440px (desktop standar). Teks akan menskalakan secara linear antara titik henti ini.

Rentang yang disarankan: 320px–1440px mencakup 95% perangkat dari mobile hingga desktop.

Atur Ukuran Font

Gunakan slider atau ketik ukuran font minimum dan maksimum. Minimum adalah ukuran pada viewport terkecil, maksimum adalah ukuran pada viewport terbesar.

Anda juga dapat mengklik preset (H1–H6, Body, Small) untuk memuat nilai tipografi umum berdasarkan praktik terbaik.

Sesuaikan Tinggi Baris

Atur nilai line-height minimum dan maksimum. Teks yang lebih besar umumnya memerlukan line-height yang lebih ketat (misalnya 1,1–1,2 untuk heading), sementara teks body memerlukan lebih banyak spasi (misalnya 1,5–1,7).

Tip: Jika kedua nilai sama, line-height statis akan dikeluarkan alih-alih clamp() untuk kode yang lebih bersih.

Pilih Unit Output

Pilih rem (disarankan) atau px untuk output. Saat menggunakan rem, atur ukuran Font Dasar agar sesuai dengan font-size root proyek Anda (biasanya 16px).

rem: Menghormati pengaturan browser pengguna (aksesibilitas lebih baik)
px: Ukuran tetap independen dari font-size root

Pratinjau dan Salin

Seret slider viewport untuk melihat pratinjau bagaimana teks menskalakan pada berbagai ukuran layar. Jika puas, klik Salin untuk menyalin kode CSS ke clipboard Anda.

Fitur

Kalkulator ini menyediakan alat komprehensif untuk membuat tipografi fluida dengan presisi dan kemudahan. Setiap fitur dirancang untuk menyederhanakan alur kerja Anda dan memastikan hasil yang akurat.

Pembuatan CSS clamp()

Menghasilkan CSS siap produksi menggunakan fungsi clamp() untuk font-size dan line-height.

Nilai slope (vw) yang dihitung dengan benar
Nilai intercept (rem atau px) yang akurat
Output yang bersih dan dioptimalkan

Preset Tipografi

Delapan preset bawaan mencakup kebutuhan tipografi umum berdasarkan praktik terbaik industri.

Heading H1 hingga H6
Teks body dan teks kecil
Rentang ukuran dan line-height yang dioptimalkan

Pratinjau Interaktif

Slider viewport memungkinkan Anda mensimulasikan lebar layar apa pun dari 320px hingga 1920px.

Pratinjau penskalaan teks real-time
Simulasi ukuran viewport yang tepat
Umpan balik visual instan

Rincian Formula

Bagian formula menunjukkan perhitungan langkah demi langkah untuk transparansi lengkap.

Detail perhitungan slope
Koefisien lebar viewport
Perhitungan y-intercept

Output Fleksibel

Beralih antara output rem dan px dengan font-size dasar yang dapat dikonfigurasi.

Pilihan unit rem atau px
Font-size dasar yang dapat disesuaikan
Konversi yang akurat

Tinggi Baris Fluida

Menghasilkan nilai line-height fluida menggunakan clamp() untuk keterbacaan optimal di semua ukuran.

Menskalakan secara proporsional dengan font-size
Output statis saat nilai cocok
Mempertahankan keterbacaan di seluruh viewport

Pertanyaan yang Sering Diajukan

Apa itu CSS clamp()?

clamp(min, preferred, max) adalah fungsi CSS yang membatasi nilai antara minimum dan maksimum. Nilai pilihan (biasanya menggunakan unit vw) menskalakan dengan viewport, tetapi tidak pernah turun di bawah min atau naik di atas max.

Contoh Sintaks clamp()

/* font-size: clamp(minimum, preferred, maximum) */
font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem);

Haruskah saya menggunakan rem atau px?

Gunakan rem untuk sebagian besar kasus. Unit rem menghormati pengaturan font-size browser pengguna, meningkatkan aksesibilitas. Hanya gunakan px jika Anda memerlukan ukuran independen dari font-size root.

Praktik terbaik: Unit rem memberikan aksesibilitas yang lebih baik dan menghormati preferensi pengguna, membuat tipografi Anda lebih inklusif.

Rentang viewport apa yang harus saya gunakan?

Rentang 320px hingga 1440px bekerja dengan baik untuk sebagian besar proyek. 320px mencakup layar mobile paling kecil yang umum, dan 1440px adalah lebar desktop standar. Sesuaikan berdasarkan analitik proyek Anda atau spesifikasi desain.

320px: Perangkat mobile terkecil (iPhone SE, Android lama)
1440px: Layar desktop/laptop standar
Rentang khusus: Gunakan data analitik untuk audiens spesifik Anda

Apa itu pengaturan "Font Dasar"?

Ini adalah font-size root Anda (nilai yang ditetapkan pada elemen <html>). Default adalah 16px. Jika proyek Anda menggunakan font-size root yang berbeda, ubah ini agar konversi rem akurat.

Mengatur Ukuran Font Root

html {
  font-size: 16px; /* Base font for rem calculations */
}

Mengapa output line-height saya menunjukkan nilai statis alih-alih clamp()?

Saat nilai line-height minimum dan maksimum sama, tidak ada penskalaan yang diperlukan. Kalkulator mengeluarkan nilai statis sederhana alih-alih clamp() yang tidak perlu untuk CSS yang lebih bersih dan efisien.

Contoh: Jika line-height min dan max keduanya diatur ke 1,5, output akan menjadi line-height: 1.5; alih-alih line-height: clamp(1.5, 1.5, 1.5);

Apakah clamp() didukung di semua browser?

CSS clamp() didukung di semua browser modern termasuk Chrome 79+, Firefox 75+, Safari 13.1+, dan Edge 79+. Untuk dukungan browser lama, pertimbangkan menyediakan fallback font-size sebelum deklarasi clamp().

Browser	Versi Minimum	Tanggal Rilis	Dukungan
Chrome	79+	Des 2019	Dukungan Penuh
Firefox	75+	Apr 2020	Dukungan Penuh
Safari	13.1+	Mar 2020	Dukungan Penuh
Edge	79+	Jan 2020	Dukungan Penuh

Contoh Fallback

h1 {
  font-size: 2rem; /* Fallback for older browsers */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem); /* Modern browsers */
}

Bisakah saya menggunakan ini untuk spasi dan properti lainnya?

Matematika di balik clamp() bekerja untuk properti CSS apa pun yang menerima nilai panjang — padding, margin, gap, width, dll. Gunakan rumus yang dihasilkan sebagai referensi dan sesuaikan nama properti dalam CSS Anda.

Properti Spasi

padding
margin
gap
border-radius

Properti Ukuran

width / max-width
height / max-height
column-gap / row-gap
border-width

Contoh Spasi Fluida

.container {
  /* Fluid padding */
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
  
  /* Fluid gap */
  gap: clamp(0.5rem, 0.25rem + 1vw, 2rem);
  
  /* Fluid max-width */
  max-width: clamp(320px, 90vw, 1200px);
}