Warna, font, dan satuan

Idenya

Sebagian besar tampilan halaman berasal dari tiga hal: warna, huruf, dan ukuran. CSS memberimu beberapa cara untuk menulis masing-masing, dan memilih yang tepat lebih penting dari kelihatannya: satuan yang tepat membuat halaman menyesuaikan diri bagi pengguna yang memperbesar teksnya; format warna yang tepat membuat palet mudah disesuaikan; line height yang tepat membuat teks panjang nyaman dibaca.

Warna

Warna brand Toko Kita adalah cokelat kopi yang hangat. CSS memungkinkanmu menulis warna yang sama itu dalam beberapa format, dan masing-masing praktis untuk situasi yang berbeda. Ketiga baris pertama di bawah menghasilkan cokelat yang sama:

<style>
  .hex   { color: #7a4b2a; }                 /* red, green, blue in hexadecimal */
  .rgb   { color: rgb(122 75 42); }           /* the same colour, 0–255 per channel */
  .hsl   { color: hsl(25 49% 32%); }           /* hue (0–360°), saturation, lightness */
  .faded { color: rgb(122 75 42 / 0.5); }      /* 50% opacity */
  .named { color: rebeccapurple; }
  .badge { background: #2e7d32; color: white; padding: 2px 8px; }
</style>

<p class="hex">#7a4b2a</p>
<p class="rgb">rgb(122 75 42)</p>
<p class="hsl">hsl(25 49% 32%)</p>
<p class="faded">50% transparent</p>
<p class="named">rebeccapurple</p>
<p><span class="badge">In stock</span></p>

• Hex (#7a4b2a, atau versi pendek #fff) adalah yang biasanya diberikan desainer kepadamu.
• rgb() adalah hal yang sama dalam desimal; nilai keempat setelah / mengatur transparansi (0 = tidak terlihat, 1 = solid).
• hsl() paling ramah untuk membangun palet: pertahankan hue-nya, ubah lightness-nya untuk warna yang lebih terang atau lebih gelap.
• color mengatur warna teks; background (atau background-color) isian di belakangnya.

Kontras itu penting. Teks abu-abu muda di atas putih terlihat elegan tetapi tidak terbaca bagi banyak orang (dan bagi semua orang yang memakai ponsel di bawah sinar matahari). Targetkan rasio kontras minimal 4.5:1 untuk teks biasa; developer tools browser menampilkan rasionya saat kamu memeriksa sebuah warna.

Font

Huruf lebih menentukan nuansa sebuah halaman dibanding hampir apa pun. Ini property yang mengaturnya: jenis huruf apa, seberapa tebal, seberapa besar, dan seberapa banyak ruang di antara baris:

<style>
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #222;
  }
  h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 2rem; line-height: 1.2; }
  .lead { font-size: 1.25rem; }
  .fine-print { font-size: 0.875rem; font-style: italic; }
</style>

<h1>Toko Kita</h1>
<p class="lead">Freshly roasted Indonesian coffee.</p>
<p>Every bag is roasted on Monday and shipped by Wednesday, so it reaches you at its best.</p>
<p class="fine-print">Prices include VAT.</p>

• font-family adalah sebuah stack: browser memakai font pertama yang dimilikinya. Selalu akhiri dengan keluarga generik (sans-serif, serif, monospace).
• font-weight: 400 normal, 700 tebal.
• line-height tanpa satuan (1.6) adalah kelipatan ukuran font, dan itulah pilihan yang tepat untuk teks body: sekitar 1.5–1.7 untuk paragraf, lebih rapat (1.1–1.3) untuk heading besar.
• Jaga baris tetap mudah dibaca: sekitar 60–75 karakter. max-width: 65ch pada kolom teks melakukannya (ch adalah lebar karakter "0").

Web font (Google Fonts, atau file milikmu sendiri dengan @font-face) dimuat dengan <link> di <head> lalu dipakai berdasarkan namanya di font-family.

Satuan

<style>
  .card { width: 50%; padding: 1.5rem; border: 1px solid #ddd; }
  .button { font-size: 1.125rem; padding: 0.5em 1em; background: #7a4b2a; color: white; border: 0; }
  .small .button { font-size: 0.875rem; }
</style>

<div class="card">
  <p>50% of the page width, 1.5rem padding.</p>
  <button class="button">Normal button</button>
  <div class="small"><button class="button">Small button, padding scales too</button></div>
</div>

Kenapa rem untuk teks? Pengguna bisa mengatur ukuran font default yang lebih besar di browser mereka. Ukuran dalam rem ikut menyesuaikan dengan pengaturan itu; ukuran dalam px mengabaikannya. Heading 1.5rem berukuran 24 px bagi kebanyakan orang dan 30 px bagi seseorang yang mengatur 20 px sebagai default-nya.

Jebakan em: em berlipat ganda melalui nesting. Elemen 1.5em di dalam elemen 1.5em lain berukuran 1.5 × 1.5 = 2.25 kali ukuran dasarnya. Itu berguna untuk padding tombol tetapi membingungkan untuk ukuran font; gunakan rem untuk ukuran font.

Mengapa ini penting untuk kode yang bersih

Sekumpulan kecil nilai yang disengaja (beberapa warna, skala huruf seperti 0.875 / 1 / 1.25 / 2 rem, skala jarak) membuat desain konsisten dan mudah diubah. Modul 13 mengubah nilai-nilai ini menjadi CSS variable, sehingga warna yang didefinisikan sekali dipakai di mana-mana.

Rangkuman

• Warna: hex, rgb(), hsl(), dengan / alpha untuk transparansi; cek kontrasnya (4.5:1).
• Stack font-family diakhiri keluarga generik; font-weight 400/700; line-height tanpa satuan ~1.6.
• rem (relatif terhadap root) untuk huruf dan jarak; em berlipat melalui nesting; %, vw, vh, ch untuk ukuran yang fleksibel.
• Batasi panjang baris (~65ch) supaya teks mudah dibaca.