Pembuat Tipografi Fluida CSS
Hasilkan skala tipe CSS clamp() (XS ke 4XL) yang menginterpolasi ukuran font dengan lancar antara lebar viewport minimum dan maksimum, dengan pratinjau yang dapat diubah ukurannya dan matematika interpolasi yang mendasarinya ditampilkan. Berjalan sepenuhnya di browser Anda.
Input
Ukuran font dasar di lebar viewport minimum.
Ukuran font dasar di lebar viewport maksimum.
Di bawah lebar ini, ukuran font tetap pada ukuran minimum.
Di atas lebar ini, ukuran font tetap pada ukuran maksimum.
Seberapa banyak setiap langkah berkembang relatif terhadap yang terakhir, di lebar viewport minimum.
Seberapa banyak setiap langkah berkembang relatif terhadap yang terakhir, di lebar viewport maksimum.
Matikan untuk menghasilkan blok kelas utilitas biasa .text-xs / .text-base / … sebagai gantinya.
Output
Your type scale will appear here.
Aturan clamp() nyata di Shadow DOM yang terisolasi — ubah ukuran jendela browser Anda untuk melihatnya diskalakan secara langsung.
| Langkah | Minimum | Maksimum | clamp() |
|---|---|---|---|
| No data yet | |||
Markup demo yang dirender oleh pratinjau langsung di atas — sampel teks per langkah, tidak dimaksudkan untuk ditempel apa adanya.
Yang memberdayakan pratinjau langsung di atas — aturan clamp() yang sama seperti keluaran CSS, diterapkan pada kelas markup demo.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-fluid-typography-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"minFontSize": "16",
"maxFontSize": "20",
"minViewport": "320",
"maxViewport": "1200",
"minRatio": "1.2",
"maxRatio": "1.25",
"outputUnit": "rem",
"asCustomProperties": "true"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-fluid-typography-generator` tool (CSS Fluid Typography Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-fluid-typography-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Tipografi Fluida 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/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukannya
font-size breakpoint media query tetap melompat teks secara tiba-tiba pada beberapa lebar. Tipografi fluida menskalakan ukuran font secara berkelanjutan saat viewport mengubah ukuran, menggunakan CSS clamp() untuk membatasi hasil antara ukuran minimum dan maksimum. Alat ini membangun skala tipe 8 langkah lengkap (XS ke 4XL) dari aturan clamp() dari dua ukuran font, dua lebar viewport, dan rasio skala di setiap ujung — tidak ada breakpoint tetap, tidak ada lompatan.
Cara menggunakannya
- Atur ukuran font minimum dan lebar viewport minimum — ukuran font dasar di bawah yang teks berhenti menyusut.
- Atur ukuran font maksimum dan lebar viewport maksimum — ukuran dasar di atas yang teks berhenti berkembang.
- Pilih rasio skala untuk setiap ujung (Tertia Minor, Tertia Mayor, Kuartal Sempurna, …) — seberapa banyak setiap langkah (SM → dasar → LG → XL…) berkembang relatif terhadap yang terakhir. Menggunakan rasio berbeda di setiap ujung memungkinkan heading tumbuh lebih cepat daripada teks isi saat layar menjadi lebih lebar, yang umum dalam sistem tipe fluida.
- Pilih rem atau px untuk keluaran, dan apakah akan mengeluarkan properti kustom CSS (
--font-base: clamp(...)) atau kelas utilitas biasa (.text-base { font-size: clamp(...); }). - Salin keluaran CSS langsung ke stylesheet Anda.
Pratinjau langsung memasang aturan clamp() yang dihasilkan secara nyata di Shadow DOM yang terisolasi — ubah ukuran jendela browser Anda yang sebenarnya dan sampel teks diskalakan secara real-time, dengan cara yang sama seperti di situs Anda.
Matematikanya
Setiap clamp() langkah dibangun dari formula interpolasi linear standar: slope = (maxSize − minSize) / (maxViewport − minViewport), kemudian preferred = (minSize − minViewport × slope) + slope × 100vw. Nilai preferred itu tumbuh secara linear dengan lebar viewport dan dibatasi oleh clamp(minSize, preferred, maxSize), sehingga hasilnya cocok dengan minSize persis pada minViewport, maxSize persis pada maxViewport, dan menginterpolasi secara lancar di antara keduanya. Di bawah viewport minimum atau di atas viewport maksimum, ukuran tetap disematkan pada batas yang sesuai. Tabel rincian skala tipe menunjukkan ukuran min/max yang dihitung dan string clamp() yang dihasilkan untuk setiap langkah.
Mengapa tidak hanya menggunakan media query?
Media query mengubah font-size pada satu lebar piksel tetap, sehingga teks melompat saat breakpoint dilampaui. Tipografi fluida berbasis clamp() menskalakan secara berkelanjutan di seluruh rentang antara dua breakpoint Anda, sehingga tidak ada lompatan yang terlihat — dan tidak ada breakpoint untuk dipilih dengan benar untuk setiap perangkat.
Apakah ini berfungsi di setiap browser?
clamp() dan unit vw telah didukung di semua browser utama sejak 2020, jadi ini berfungsi di mana-mana kecuali browser yang sangat lama yang mendahului properti kustom CSS juga.
Alat terkait
Mengonversi ukuran ke arah lain? Gunakan Konverter Pixel, REM & EM untuk mengonversi satu nilai antar unit. Untuk aturan responsif berbasis breakpoint (bukan fluida), lihat Pembuat CSS Media Query. Untuk pembangun kurva easing interaktif dengan gaya yang sama seperti ini, lihat Pembuat CSS Cubic Bezier.
Privasi
Semuanya berjalan di browser Anda — tidak ada ukuran font atau pengaturan yang dikirim ke server.