Tipografi Responsif
Menyesuaikan di Berbagai Perangkat
Pelajari TekniknyaTipografi responsif memastikan teks tetap terbaca dan estetis di semua ukuran perangkat. Menggunakan satuan dan teknik yang tepat menciptakan tipe fleksibel yang menyesuaikan secara alami.
Skala Tipe Umum
| Elemen | Mobile | Desktop | Rasio |
|---|---|---|---|
| Teks isi | 16px | 18px | 1.0 |
| H3 | 18px | 22px | 1.2 |
| H2 | 22px | 28px | 1.5 |
| H1 | 28px | 40px | 2.0-2.2 |
Contoh CSS: font-size: clamp(1rem, 2.5vw, 2rem);
Kesimpulan
Tipografi responsif menggabungkan satuan relatif, ukuran berbasis viewport, dan CSS clamp() untuk penskalaan yang mulus. Mulai dengan ukuran dasar yang terbaca (16-18px), tetapkan rasio skala yang konsisten, dan uji di berbagai perangkat. Tipografi responsif yang baik meningkatkan keterbacaan dan pengalaman pengguna di setiap layar.