Ukuran, Ketebalan, dan Gaya Font
Kontrol ukuran teks dengan font-size, ketebalan dengan font-weight, dan gaya dengan font-style.
Ukuran, Ketebalan, dan Gaya Font adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
font-size
font-size menetapkan tinggi glif. Properti ini menerima satuan panjang apa pun. Penggunaan rem disarankan untuk tipografi yang dapat diskalakan dan aksesibel.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Ukuran Font Berdasarkan Kata Kunci
CSS juga menyediakan ukuran absolut berbasis kata kunci (xx-small hingga xx-large) dan kata kunci relatif (smaller, larger) yang mengacu pada ukuran font elemen induk.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight menetapkan ketebalan teks. Gunakan nilai numerik (100–900 dengan kenaikan 100) atau kata kunci:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight dan Font Variabel
Dengan font variabel, nilai ketebalan bilangan bulat apa pun (misalnya font-weight: 550) valid, dan font melakukan interpolasi di antara sumbu yang ditentukan. Hal ini memberikan kendali tipografi yang lebih terperinci.
font-style
font-style mengendalikan tampilan miring dan oblik:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant mengaktifkan fitur tipografi seperti small-caps:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
Singkatan font
Singkatan font menggabungkan gaya, varian, ketebalan, ukuran, tinggi baris, dan keluarga font:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Penskalaan Ukuran Font Responsif
Gunakan clamp() untuk membuat tipografi fluida yang berubah secara mulus di antara ukuran minimum dan maksimum:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height untuk Keterbacaan
line-height menetapkan jarak vertikal antarbaris. Nilai tanpa satuan (misalnya 1.5) disarankan karena nilainya mengikuti ukuran font elemen turunan.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing dan word-spacing
letter-spacing menambahkan spasi antarkarakter; word-spacing menambahkan spasi antarkata. Gunakan satuan em agar nilainya mengikuti ukuran font.
<h2 class="heading">Spaced Out Heading Text</h2>
Ukuran Font yang Aksesibel
Jangan pernah menetapkan font-size dalam px pada elemen html atau body. Hal ini menimpa preferensi ukuran font yang ditetapkan pengguna pada peramban. Sebagai gantinya, gunakan satuan rem yang didasarkan pada ukuran default peramban.
Pemeriksaan Singkat
Nilai numerik font-weight manakah yang setara dengan kata kunci bold?
Ringkasan
Gunakan rem untuk font-size agar preferensi pengguna dihormati. font-weight menerima nilai 100–900 atau kata kunci. Singkatan font menggabungkan beberapa properti. Gunakan clamp() untuk tipografi fluida dan line-height tanpa satuan untuk jarak yang konsisten.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Ukuran, Ketebalan, dan Gaya Font” gratis?
Ya — teks lengkap “Ukuran, Ketebalan, dan Gaya Font” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Ukuran, Ketebalan, dan Gaya Font”?
Kontrol ukuran teks dengan font-size, ketebalan dengan font-weight, dan gaya dengan font-style. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Ukuran, Ketebalan, dan Gaya Font” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Keluarga Font dan Font yang Aman untuk Web
- Ukuran, Ketebalan, dan Gaya Font
- Perataan, Dekorasi, dan Jarak Teks
- Google Fonts dan @font-face