cssresponsiftipografiMenengah5 mnt baca

Tipografi Responsif

Ukuran font yang mengalir: clamp(), satuan vw, dan skala yang terbaca di semua layar.

Masalah: font fixed di semua layar

font-size: 48px untuk judul terlihat gagah di desktop, tapi di HP 360px judul itu memakan setengah layar atau terpotong. Solusi lama: media query untuk tiap ukuran font. Solusi modern: font yang mengalir mengikuti lebar layar.

clamp(): tiga nilai ajaib

css

h1 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
}

Bacanya: "minimal 1.75rem, idealnya 5vw (5% lebar viewport), maksimal 3.5rem". Di HP kecil: 5vw mungkin hanya 18px, tapi minimal 28px (1.75rem) yang dipakai. Di desktop lebar: 5vw mungkin 70px, tapi dibatasi 56px (3.5rem). Satu baris menggantikan 2-3 media query.

Contoh bertahap

Judul kaku (masalah):

css

.hero h1 {
  font-size: 56px; /* di HP terlalu besar */
}

Judul mengalir (solusi):

css

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.1;
}

.hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
}

Judul tumbuh agresif (6vw), paragraf tumbuh pelan (2.5vw). Hierarki visual terjaga di semua ukuran.

Skala tipografi yang konsisten

Jangan memilih angka acak per elemen. Pakai skala:

css

:root {
  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 3vw, 1.75rem);
  --fs-body: clamp(1rem, 2vw, 1.125rem);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
body { font-size: var(--fs-body); }

Satu tempat mengatur semua, konsisten di seluruh situs.

Batas baca: ch dan max-width

Font mengalir menyelesaikan ukuran, tapi baris yang terlalu panjang tetap melelahkan dibaca. Batasi lebar teks:

css

.artikel p {
  max-width: 65ch; /* ~65 karakter per baris, ideal untuk dibaca */
}

Satuan ch = lebar karakter "0", sehingga batas mengikuti ukuran font.

Catatan teknis: vw mengabaikan scrollbar di beberapa browser (100vw termasuk lebar scrollbar). Untuk font ini tidak masalah, tapi jangan pakai vw untuk lebar layout penuh tanpa memperhatikan overflow horizontal.

Tips profesional

Rumus judul andalan: clamp(2rem, 5vw + 1rem, 4rem). Tambahan + 1rem membuat kurva tumbuh lebih halus.
Jangan gunakan clamp untuk SEMUA teks: body cukup 1rem tetap; hanya judul dan hero yang butuh mengalir.
Uji judul di 320px (HP terkecil): pastikan tidak ada kata yang terpotong.

Pola siap salin: skala fluid situs

css

:root {
  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3.5vw, 2.5rem);
  --fs-body: 1rem;
  --fs-kecil: 0.875rem;
}

h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
body { font-size: var(--fs-body); line-height: 1.6; }

Satu blok mengatur tipografi seluruh situs, mengalir otomatis di semua layar.

Rangkuman

clamp(min, ideal-vw, max) membuat font mengalir tanpa media query. Bangun skala dengan variabel, dan batasi panjang baris dengan ch agar nyaman dibaca.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Bangun Skala Tipografi

Tipografi mengalir adalah pembeda situs amatir dan profesional. Satu pola ini dipakai di semua situs modern.

Di playground:

Sempitkan preview ke 360px dan lebarkan ke 1200px. Catat di komentar ukuran judul di kedua ekstrem (pakai devtools atau perkiraan).
Tambahkan variabel skala di :root untuk h2 dan terapkan pada subjudul baru di HTML.
Jelaskan di komentar kenapa nilai tengah memakai vw, bukan px.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox