⌘K

Command Palette

Search for a command to run...

Daftar

Tipografi CSS

Bikin teks di websitemu enak dibaca dan sesuai desain! Pelajari cara mengontrol jenis font, ukuran, ketebalan, gaya, perataan, dan spasi teks dengan CSS.

Bikin Teks Jadi Karya Seni: Menguasai Tipografi dengan CSS!

Setelah kita kasih warna dan background yang kece ke elemen HTML, sekarang saatnya kita fokus ke salah satu aspek paling fundamental dari desain web: Tipografi. Tipografi itu seni dan teknik ngatur huruf biar teks jadi gampang dibaca (legible), enak diliat (readable), dan pastinya menarik secara visual.

Di CSS, kita punya banyak banget properti buat ngontrol hampir semua aspek tampilan teks, dari jenis fontnya, ukurannya, ketebalannya, sampe jarak antar baris dan huruf. Yuk, kita bedah satu-satu!

font-family: Milih "Baju" Buat Teksmu

Properti font-family dipake buat nentuin jenis font (typeface) yang mau dipake buat nampilin teks.

  • Sintaks: font-family: nama-font-1, nama-font-2, ..., generic-family;
  • Cara Kerja:
    • Kamu bisa nyantumin beberapa nama font, dipisah koma. Browser bakal nyoba pake font pertama di daftar. Kalau font itu gak ada di komputer pengguna, dia bakal nyoba font kedua, dan seterusnya.
    • Penting banget buat nyantumin generic family (keluarga font generik) sebagai pilihan terakhir (fallback). Ini ngasih tau browser buat milih font default dari keluarga tertentu kalau semua font spesifikmu gak tersedia.
    • Generic Families yang Umum:
      • serif: Font yang punya "kaki" atau "kait" kecil di ujung hurufnya (kayak Times New Roman, Georgia). Cocok buat teks panjang di media cetak, kadang juga di web.
      • sans-serif: Font yang gak punya "kaki" (kayak Arial, Helvetica, Verdana). Tampilannya lebih bersih dan modern, sangat populer buat teks di layar digital.
      • monospace: Font yang setiap hurufnya punya lebar yang sama (kayak Courier New, Consolas). Sering dipake buat nampilin kode program.
      • cursive: Font yang niru tulisan tangan bersambung (kayak Comic Sans MS – hati-hati pakenya!, Brush Script MT).
      • fantasy: Font yang lebih dekoratif dan artistik.
  • Nama Font dengan Spasi: Kalau nama font-mu mengandung spasi (misal, "Times New Roman"), kamu harus ngapitnya pake tanda kutip dua (" ") atau kutip satu (' ').

Contoh Penggunaan font-family:

css
body {
    /* Coba Arial, kalau gak ada coba Helvetica, kalau gak ada juga pake sans-serif default browser */
    font-family: Arial, Helvetica, sans-serif;
}
 
h1 {
    font-family: "Georgia", "Times New Roman", serif;
}
 
pre, code {
    font-family: "Courier New", Courier, monospace;
}

font-size: Ngatur Gede Kecilnya Teks

Properti font-size nentuin ukuran teks. Ada banyak unit yang bisa dipake:

  • px (Pixels): Ukuran absolut, paling sering dipake buat web. 16px itu ukuran default yang umum di banyak browser.
  • em: Ukuran relatif terhadap font-size elemen parent-nya (atau elemen itu sendiri kalau udah diset font-size-nya). 1em sama dengan font-size parent. 2em berarti 2 kali font-size parent.
  • rem (Root EM): Ukuran relatif terhadap font-size elemen root (<html>). Ini lebih disukai daripada em buat konsistensi skala karena gak terpengaruh nesting elemen. 1rem sama dengan font-size elemen <html>.
  • % (Persentase): Mirip em, relatif terhadap font-size elemen parent.
  • Keyword: xx-small, x-small, small, medium, large, x-large, xx-large (ukurannya tergantung setting browser).
  • Unit Viewport: vw (1% lebar viewport), vh (1% tinggi viewport). Bisa dipake buat teks yang ukurannya nyesuaiin ukuran layar.

Contoh Penggunaan font-size:

css
body {
    font-size: 16px; /* Ukuran dasar untuk seluruh halaman */
}
 
h1 {
    font-size: 2.5rem; /* 2.5 kali ukuran font root (misal, 2.5 * 16px = 40px) */
}
 
.catatan-kecil {
    font-size: 0.875em; /* 0.875 kali ukuran font parent-nya */
}
 
p {
    font-size: 100%; /* Sama dengan font-size parent (dalam hal ini body, jadi 16px) */
}

font-weight: Ngatur Ketebalan Teks

Properti font-weight dipake buat ngatur seberapa tebal atau tipisnya huruf.

  • Nilai Umum:
    • normal (default, sama dengan 400).
    • bold (sama dengan 700).
    • Angka: 100, 200, ..., 900 (kelipatan 100). 400 itu normal, 700 itu bold. Gak semua font ngedukung semua tingkatan angka ini.
    • lighter, bolder (relatif terhadap ketebalan parent).

Contoh Penggunaan font-weight:

css
.judul-seksi {
    font-weight: bold; /* atau font-weight: 700; */
}
 
.teks-ringan {
    font-weight: 300; /* Butuh font yang ngedukung weight ini */
}
 
strong { /* Elemen <strong> HTML secara default udah tebal, tapi bisa di-override */
    font-weight: 900; /* Super tebal */
}

font-style: Ngatur Gaya Teks (Miring)

Properti font-style biasanya dipake buat bikin teks jadi miring (italic).

  • Nilai Umum:
    • normal (default).
    • italic (pake versi italic dari font tersebut, kalau ada).
    • oblique (versi miring "buatan" dari font normal, kalau versi italic gak ada).

Contoh Penggunaan font-style:

css
.kutipan {
    font-style: italic;
}
 
em { /* Elemen <em> HTML secara default udah miring */
    font-style: normal; /* Bisa juga dibikin normal lagi */
    color: green; /* Tapi tetap dikasih style lain biar maknanya kerasa */
}

text-decoration: Ngasih Garis ke Teks

Properti text-decoration dipake buat nambahin atau ngilangin garis dekoratif pada teks.

  • Nilai Umum:
    • none (default, gak ada dekorasi).
    • underline (garis bawah).
    • overline (garis di atas teks).
    • line-through (teks dicoret).
  • Kamu juga bisa ngatur text-decoration-line, text-decoration-color, text-decoration-style secara terpisah.

Contoh Penggunaan text-decoration:

css
a {
    text-decoration: none; /* Ngilangin garis bawah default di link */
    color: dodgerblue;
}
 
a:hover {
    text-decoration: underline; /* Munculin garis bawah pas link di-hover */
}
 
.harga-coret {
    text-decoration: line-through;
    color: gray;
}

text-align: Ngatur Perataan Teks Horizontal

Properti text-align nentuin gimana teks diratain secara horizontal di dalem elemen bloknya.

  • Nilai Umum:
    • left (default, rata kiri).
    • right (rata kanan).
    • center (rata tengah).
    • justify (rata kiri-kanan, nyesuaiin spasi antar kata biar rapi).

Contoh Penggunaan text-align:

css
h1 {
    text-align: center;
}
 
.deskripsi-produk {
    text-align: justify;
}
 
.harga {
    text-align: right;
}

line-height: Ngatur Jarak Antar Baris

Properti line-height nentuin jarak vertikal antar baris teks. Ini penting banget buat keterbacaan teks panjang.

  • Nilai:
    • Angka tanpa unit (misal, 1.5, 1.6): Ini dikaliin sama font-size elemen itu buat dapet jaraknya. Cara ini paling direkomendasikan karena fleksibel kalau font-size berubah.
    • Panjang (misal, 24px, 1.5em).
    • Persentase (misal, 150% dari font-size).
    • normal (default browser, biasanya sekitar 1.2).

Contoh Penggunaan line-height:

css
p {
    font-size: 16px;
    line-height: 1.6; /* Jarak antar baris jadi 1.6 * 16px = 25.6px */
}
 
article {
    line-height: 1.75; /* Berlaku buat semua teks di dalem artikel yang mewarisi */
}

Nilai line-height antara 1.4 sampe 1.8 biasanya enak buat dibaca.

Properti Spasi Teks Lainnya

  • letter-spacing: Ngatur jarak tambahan antar karakter (huruf). Bisa nilai positif (renggang) atau negatif (rapat).
    • Contoh: letter-spacing: 2px;
  • word-spacing: Ngatur jarak tambahan antar kata.
    • Contoh: word-spacing: 4px;
  • text-indent: Ngasih indentasi (jorokan ke dalem) ke baris pertama teks di elemen blok.
    • Contoh: text-indent: 30px;
  • text-transform: Ngubah kapitalisasi teks.
    • Nilai: none (default), capitalize (huruf pertama tiap kata jadi kapital), uppercase (semua jadi huruf besar), lowercase (semua jadi huruf kecil).
    • Contoh: h2 { text-transform: uppercase; }

Shorthand font: Nulis Banyak Properti Font Sekaligus

Sama kayak background, ada juga shorthand buat beberapa properti font:

  • Sintaks: font: font-style font-variant font-weight font-size/line-height font-family;
  • PENTING: Kalau pake shorthand font, minimal kamu harus nyantumin font-size dan font-family. Kalau font-style, font-variant, font-weight gak disebutin, mereka bakal direset ke nilai default (normal). line-height juga opsional.
  • font-variant jarang dipake, biasanya buat small-caps.

Contoh Penggunaan Shorthand font:

css
body {
    font: italic bold 16px/1.5 Arial, sans-serif;
    /* Artinya:
       font-style: italic;
       font-variant: normal; (default)
       font-weight: bold;
       font-size: 16px;
       line-height: 1.5;
       font-family: Arial, sans-serif;
    */
}
 
p.normal {
    font: 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Ukuran 1em, font-family Helvetica Neue dst., sisanya default */
}

Pake shorthand font bisa ngirit baris kode, tapi pastiin kamu inget urutannya dan properti wajibnya.

(Opsional) @font-face: Pake Font Custom Sendiri

Kalau kamu pengen pake font yang unik dan gak semua pengguna punya, kamu bisa pake aturan @font-face. Ini ngebolehin kamu buat ngasih tau browser buat nge-download file font dari servermu (atau dari layanan font web) dan dipake di websitemu.

  • Contoh Sederhana @font-face:
    css
    @font-face {
    font-family: "NamaFontKustomKu"; /* Nama yang bakal kamu pake di CSS */
    src: url("fonts/namafilefont.woff2") format("woff2"), /* Format modern, prioritas utama */
         url("fonts/namafilefont.woff") format("woff");   /* Fallback format lama */
    font-weight: normal; /* Opsional, tentuin weight buat font ini */
    font-style: normal;  /* Opsional, tentuin style buat font ini */
}
 
/* Cara pakenya: */
body {
    font-family: "NamaFontKustomKu", sans-serif; /* Fallback ke sans-serif kalau gagal load */
}

Menggunakan @font-face dan web font ini topik yang lumayan dalem sendiri, tapi setidaknya kamu tau kalau ini bisa dilakuin!

Tipografi itu aspek desain yang sangat berpengaruh! Dengan nguasain properti-properti CSS buat ngatur teks ini, kamu bisa ningkatin keterbacaan, ngasih karakter ke websitemu, dan pastinya bikin pengunjung makin nyaman nikmatin kontenmu.

Jangan ragu buat eksperimen dengan berbagai kombinasi font, ukuran, dan spasi. Browser DevTools lagi-lagi jadi teman terbaikmu buat nyoba-nyoba secara live!

Kuis Tipografi CSS

Pertanyaan 1 dari 5

Properti CSS apa yang digunakan untuk menentukan jenis font yang akan ditampilkan untuk teks?