Sebelum satu kartu artikel tersusun, beranda majalah menuntut keputusan tipografi yang tegas: jenis huruf untuk judul, jenis huruf untuk isi, ukuran minimum dan maksimum setiap tingkatan, serta warna tinta di atas kertas. Keputusan itulah yang kita kunci pada bagian pertama ini dalam bentuk token desain dan sekelompok komponen teks. Berkas styles.css di folder bagian ini adalah kondisi stylesheet selesaikan Bagian 1; berkas beranda.html baru muncul pada Bagian 2 ketika kerangka HTML pertama disusun.

Token Desain dan Reset Ringkas #

Kelompok aturan pertama mendeklarasikan :root berisi sembilan token: dua warna kertas (--kertas dan --kertas-panel), dua warna tinta (--tinta dan --tinta-lunak), warna aksen merah bata --aksen, warna --garis untuk pemisah, dua font stack (--serif untuk judul, --sans untuk isi), plus --lebar-konten: 1160px dan --jarak-kolom: 40px:

css 
:root {
  --kertas: #faf7f1;
  --serif: Georgia, "Times New Roman", serif;
  --lebar-konten: 1160px;
}

Semua pengukuran selanjutnya merujuk token ini, sehingga mengganti identitas warna cukup dilakukan di satu tempat. Urutan token juga menyimpan keputusan kontras: teks isi memakai --tinta penuh, sementara teks pendukung seperti dek dan byline turun ke --tinta-lunak. Dua tingkat tinta di atas satu warna kertas sudah cukup untuk halaman bergaya majalah; menambah tingkat ketiga biasanya membuat tampilan ramai tanpa menambah informasi baru bagi pembaca. Kelompok kedua adalah reset ringkas: box-sizing: border-box untuk semua elemen, margin: 0 pada body, h1–h3 dipaksa ber-serif dengan line-height: 1.15, p tanpa margin bawaan, dan img berubah menjadi blok dengan max-width: 100%. Baris :focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; } menjamin penanda fokus keyboard tetap terlihat di atas latar krem.

Skala Judul dengan clamp() #

Majalah mencetak judul sangat besar di layar lebar tanpa membiarkannya menumpuk di ponsel. Dua tingkatan judul memakai clamp():

css 
.judul-sorotan { font-size: clamp(2.125rem, 4.5vw, 3.375rem); }
.judul-kartu { font-size: clamp(1.25rem, 2vw, 1.5rem); }

Nilai tengah 4.5vw membuat ukuran mengikuti lebar viewport, sedangkan batas 2.125rem dan 3.375rem menahannya di rentang yang mudah dibaca. Unit rem dipilih agar skala mengikuti preferensi ukuran huruf pengguna di pengaturan browser, bukan piksel yang dikunci paksa. Nilai minimum tiap clamp() juga sengaja diletakkan di atas 1.25rem: judul majalah harus tetap terasa dominan bahkan pada layar 320px. Pola sama dipakai .dek — ringkasan artikel berwarna tinta lunak dengan line-height: 1.55 — dan .byline yang tetap kecil pada 0.875rem karena identitas penulis tidak perlu bersaing dengan judulnya.

Kicker dan Tautan Judul #

.kicker adalah label rubrik di atas judul: huruf kecil, font-weight: 700, letter-spacing: 0.14em, text-transform: uppercase, berwarna aksen. Ia berfungsi seperti rojurnal pada cetakan koran: pembaca mengenali bagian rubrik sebelum membaca satu kata judul. Terakhir, .tautan-judul meniadakan garis bawah bawaan lalu menampilkannya kembali saat :hover dan :focus-visible — lengkap dengan text-decoration-color: var(--aksen), text-decoration-thickness: 2px, dan text-underline-offset: 5px agar garisnya terasa disengaja, bukan sisa gaya bawaan browser.

Perhatikan bahwa pada tahap ini stylesheet belum menyentuh layout sama sekali: tidak ada display: grid, tidak ada media query. Fondasi tipografi harus stabil lebih dulu karena setiap keputusan ruang pada bagian berikutnya bergantung pada tinggi huruf yang sudah pasti.

css 
/* ============================================================
   Lentera — beranda majalah digital
   Proyek akhir Course CSS: tipografi editorial + grid layout
   ============================================================ */

/* ---------- 1. Token desain ---------- */
:root {
  --kertas: #faf7f1;
  --kertas-panel: #f0e9dd;
  --tinta: #211c16;
  --tinta-lunak: #6d635a;
  --aksen: #93312a;
  --garis: #ddd3c3;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lebar-konten: 1160px;
  --jarak-kolom: 40px;
}

/* ---------- 2. Dasar dan reset ringkas ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
figure { margin: 0; }

/* ---------- 3. Komponen tipografi editorial ---------- */
.kicker {
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aksen);
}

.judul-sorotan { font-size: clamp(2.125rem, 4.5vw, 3.375rem); }
.judul-kartu { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.dek { margin-top: 12px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.55; color: var(--tinta-lunak); }
.byline { margin-top: 14px; font-size: 0.875rem; color: var(--tinta-lunak); }

/* Tautan judul: garis bawah muncul saat hover atau fokus keyboard */
.tautan-judul { text-decoration: none; }
.tautan-judul:hover,
.tautan-judul:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--aksen);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

Ringkasan #

Bagian 1 menghasilkan token desain, reset ringkas, skala judul clamp(), serta komponen kicker, dek, byline, dan tautan judul dalam satu berkas styles.css berisi tiga kelompok aturan pertama. Snapshot lengkapnya tersedia di atas; Bagian 2 akan menyusun masthead dan navigasi di atas fondasi huruf ini.