Fluid type scale: variabel CSS clamp() untuk ukuran font
Fluid type scale ini mengubah lima angka menjadi blok properti kustom CSS, satu untuk setiap ukuran font, masing-masing ditulis sebagai clamp() dengan satuan rem dan vw. Anda mengisi rentang lebar layar, ukuran dasar di kedua ujung, dan rasio skala, lalu setiap langkah dari --text-xs sampai --text-4xl membesar mulus mengikuti layar tanpa media query. Tidak ada yang diunggah: CSS dibuat di browser Anda.
Cara membuat fluid type scale langkah demi langkah
Isi lima kolom di bagian atas. Viewport minimum (bawaan 320) dan Viewport maksimum (1200) adalah lebar layar dalam piksel tempat teks paling kecil dan paling besar. Ukuran dasar minimum (16) dan Ukuran dasar maksimum (20) adalah ukuran teks isi pada dua lebar itu. Rasio skala (1,25) menentukan seberapa besar setiap langkah dibanding langkah di bawahnya. Setiap kolom punya kotak angka dan penggeser.
- Isi rentang lebar layar.
- Isi ukuran dasar untuk layar sempit dan layar lebar.
- Pilih rasio skala.
- Kotak CSS di bawahnya berubah saat Anda mengetik, jadi tidak ada tombol kirim. Jika hasilnya sudah sesuai, tekan Salin CSS dan tempel blok :root ke stylesheet Anda.
Kolom yang tidak bisa dipakai menampilkan pesan: viewport maksimum harus lebih besar dari viewport minimum, ukuran dasar maksimum lebih besar dari ukuran dasar minimum, rasio minimal 1, dan setiap angka lebih besar dari 0. Pakai satu langkah di mana pun Anda menetapkan ukuran, misalnya h1 { font-size: var(--text-3xl); }
Pratinjau pada lebar layar mana pun
Di bawah Pratinjau, geser Lebar pratinjau di antara viewport minimum dan maksimum. Setiap langkah tampil sebagai baris contoh “Teks yang berubah ukuran dengan halus” pada ukuran yang berlaku di lebar itu, lengkap dengan nama variabel dan ukuran pikselnya, langkah terbesar di atas.
Dengan begitu Anda bisa menilai selisih antara teks isi dan judul di ponsel kecil maupun desktop lebar sebelum menyalin apa pun.
Cara ukuran font clamp() dihitung
Untuk setiap langkah, alat ini menghitung ukuran di ujung sempit (ukuran dasar minimum dikali rasio pangkat nomor langkah) dan di ujung lebar (ukuran dasar maksimum dikali pangkat yang sama). Lalu ia menarik garis lurus di antara dua titik itu: kemiringannya adalah perubahan ukuran dibagi perubahan lebar viewport, dan titik potongnya adalah ukuran minimum dikurangi viewport minimum dikali kemiringan. Kemiringan menjadi bagian vw, titik potong menjadi bagian rem, dan dua ukuran ujung menjadi minimum dan maksimum clamp(). Nilai dibulatkan hingga 4 desimal.
Dengan nilai bawaan, ukuran pada 320, 760, dan 1200 px adalah:
- --text-sm: 12,8 / 14,4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22,5 / 25 px
- --text-xl: 25 / 28,13 / 31,25 px
Mengapa rem dan vw, bukan px
Ukuran yang hanya ditulis dalam vw mengabaikan ukuran font yang dipilih pengunjung di browsernya dan tidak membesar saat di-zoom. Karena setiap angka di sini dibagi menjadi bagian rem dan bagian vw, teks tetap mengikuti ukuran font dasar pengguna dan tetap bisa di-zoom, sehingga tetap nyaman dibaca oleh orang yang butuh huruf lebih besar. Alat ini tidak pernah menghasilkan px.
Jika situs Anda memakai html { font-size: 62.5% } atau akar selain 16 px, buka Lanjutan dan ubah Ukuran font root agar 1rem sesuai.
Memilih viewport, ukuran dasar, dan rasio skala
Rentang bawaan 320 sampai 1200 mencakup ponsel kecil hingga laptop. Pilih viewport maksimum pada lebar terbesar yang masih Anda inginkan untuk teks membesar, karena di atasnya ukuran tertahan di nilai maksimum. Untuk teks isi, pasangan 16 px dan 20 px umum dipakai. Rasio menentukan karakter skala:
- 1,2 (terts kecil): langkah halus dan rapat
- 1,25 (terts besar): seimbang, nilai bawaan
- 1,333 (kuart sempurna): kontras jelas
- 1,5 (kuint sempurna): judul dramatis
- 1,618 (rasio emas): lompatan sangat besar
Dengan rasio 1, semua langkah berukuran sama. Rasio adalah satu angka untuk kedua ujung, jadi skala pada 320 px dan 1200 px punya proporsi yang sama; hanya ukuran dasarnya yang berubah.
Di Lanjutan, Awalan variabel (bawaan --text) mengganti nama semua properti. Nama langkah beralih antara sm, lg, xl (--text-sm, --text-base, --text-lg, dan seterusnya) dan -1, 1, 2 (--text--1, --text-0, --text-1, dan seterusnya). Langkah lebih kecil (0 sampai 4, bawaan 2) dan Langkah lebih besar (0 sampai 8, bawaan 5) menentukan berapa banyak ukuran di bawah dan di atas ukuran dasar.
Yang tidak dilakukan alat ini
Alat ini hanya membuat skala ukuran. Tidak ada ekspor Tailwind atau format lain, tidak ada pengaturan per langkah, tidak ada rasio terpisah untuk ujung sempit dan ujung lebar, dan tidak ada keluaran px.
Pertanyaan yang sering diajukan
Apa itu fluid type scale?
Fluid type scale adalah sekumpulan ukuran font yang membesar mulus mengikuti lebar layar, tidak melompat di breakpoint. Setiap langkah, seperti kecil, dasar, besar, dan ekstra besar, punya ukuran minimum untuk layar sempit dan ukuran maksimum untuk layar lebar, dan ukuran di antaranya mengikuti garis lurus. Generator ini menulis setiap langkah sebagai properti kustom CSS yang bisa dipakai ulang di seluruh situs.
Bagaimana cara memakai clamp() untuk ukuran font?
clamp(min, pilihan, maks) menerima tiga nilai. Browser memakai nilai pilihan, tetapi tidak pernah turun di bawah nilai minimum atau naik di atas nilai maksimum. Untuk teks, nilai pilihan berupa jumlah rem ditambah jumlah vw, misalnya clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Simpan di properti kustom, lalu tulis font-size: var(--text-base) di mana pun Anda membutuhkannya.
Bagaimana membuat ukuran font yang menyesuaikan layar di CSS?
Deklarasikan ukuran sekali sebagai variabel clamp(), dan teks akan berubah ukuran secara terus-menerus saat jendela berubah, tanpa media query. Atur “Viewport minimum” dan “Viewport maksimum” ke lebar tempat Anda ingin ukuran terkecil dan terbesar, isi “Ukuran dasar minimum” dan “Ukuran dasar maksimum”, lalu salin CSS-nya. Di bawah viewport minimum teks tetap berukuran terkecil, dan di atas viewport maksimum tetap berukuran terbesar.
Mengapa font size clamp css saya tidak berfungsi?
Penyebab yang biasa adalah satuan yang hilang pada sebuah nilai, tidak ada spasi di sekitar tanda plus di dalam clamp(), nilai minimum lebih besar dari maksimum, atau nilai pilihan yang hanya ditulis dalam vw sehingga mengabaikan pengaturan ukuran font pengguna. Baris yang dihasilkan menghindari keempatnya: setiap nilai punya satuan, tanda plus diberi spasi, dan nilai minimum selalu lebih kecil dari maksimum.
Apakah cara kerjanya sama dengan Utopia fluid type scale calculator?
Idenya sama: ukuran diinterpolasi secara linear antara viewport sempit dan lebar, dan setiap langkah adalah kelipatan rasio dari ukuran dasar. Bedanya, alat ini hanya punya satu rasio skala untuk kedua ujung, tidak ada pengaturan per langkah, dan hanya menghasilkan properti kustom CSS biasa tanpa ekspor Tailwind atau lainnya. Pilih alat ini bila Anda ingin blok :root dengan cepat.
Terts besar atau kuart sempurna: rasio skala mana yang sebaiknya dipilih?
Terts besar (1,25) adalah nilai bawaan yang baik untuk halaman yang banyak teksnya, karena langkahnya cukup rapat sehingga judul tidak menenggelamkan teks. Kuart sempurna (1,333) memberi kontras lebih besar antarlangkah dan cocok untuk halaman pemasaran dan judul besar. Terts kecil (1,2) lebih halus lagi. Ketik rasionya di “Rasio skala” dan periksa “Pratinjau” sebelum menyalin.
Apakah clamp() bisa dipakai di semua browser?
clamp() berfungsi di semua versi terbaru Chrome, Edge, Firefox, dan Safari, dan sudah begitu sejak 2020. Browser yang sangat lama mengabaikan deklarasi yang tidak mereka pahami, jadi jika harus mendukungnya, letakkan baris font-size tetap sebelum baris clamp() sebagai cadangan.
Apakah ini fluid typography generator atau generator CSS clamp?
Keduanya. Sebagai fluid type scale generator, alat ini membuat seluruh skala ukuran font, dan sebagai generator CSS clamp ia menuliskan nilai clamp() yang sudah dihitung. Orang mencarinya dengan “fluid typography css”, “fluid typography css clamp”, “fluid typography generator”, atau “clamp css online”, dan semuanya menuju hal yang sama: masukkan lima angka, lalu salin hasilnya.
Apakah yang saya masukkan dikirim ke server?
Tidak. Angka diubah menjadi CSS oleh browser Anda di halaman ini, dan tidak ada yang diunggah atau disimpan. Tidak ada akun dan tidak perlu mendaftar.
