Teks dan tipografi

The CSS Podcast - 036: Text & Typography

Teks adalah salah satu elemen penyusun inti web.

Saat membuat situs, Anda tidak perlu menata gaya teks; HTML sebenarnya memiliki beberapa gaya default yang cukup wajar.

Namun, teks kemungkinan akan menjadi bagian terbesar dari situs Anda, jadi sebaiknya tambahkan beberapa gaya untuk mempercantiknya. Dengan mengubah beberapa properti dasar, Anda dapat meningkatkan pengalaman membaca bagi pengguna secara signifikan.

Dalam modul ini, kita akan mulai dengan aturan @font-face, yang memungkinkan Anda mengimpor font kustom ke halaman web. Hal ini memastikan bahwa Anda memiliki tipografi yang tepat yang Anda butuhkan, terlepas dari font yang diinstal pengguna.

Setelah itu, kita akan membahas properti font CSS penting, termasuk font-family, font-style, font-weight, dan font-size. Dasar-dasar ini menyiapkan tahap untuk memanipulasi teks untuk gaya dan keterbacaan.

Kita juga akan membahas properti khusus paragraf seperti text-indent dan word-spacing, sebelum menyimpulkan dengan topik lanjutan seperti font variabel dan elemen semu, yang semakin menyempurnakan kontrol tipografi Anda.

Contoh dan tips praktis akan diberikan di sepanjang kursus untuk memantapkan pemahaman dan penerapan teknik CSS ini.

Aturan @font-face

Aturan @CSS @font-face sangat penting dalam desain web, memungkinkan Anda menentukan dan menggunakan font kustom untuk menampilkan teks. Keunggulan @font-face terletak pada fleksibilitasnya: Anda dapat mengambil font dari server jarak jauh, atau dari font yang diinstal di perangkat pengguna.

Sintaksis

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Deskripsi

ascent-override
Menyesuaikan metrik kenaikan, yang memengaruhi ruang di atas garis dasar.
descent-override
Menyesuaikan metrik penurunan, yang memengaruhi ruang di bawah garis dasar.
font-display
Mengontrol perilaku tampilan font, bergantung pada status download-nya.
font-family
Memberi nama font untuk digunakan dalam properti terkait font.
font-stretch
Menetapkan penskalaan horizontal yang dapat diterima, yang ditentukan sebagai nilai atau rentang tunggal.
font-style
Menentukan gaya font, mendukung rentang sudut untuk gaya miring.
font-weight
Menentukan ketebalan font atau rentang ketebalan yang tersedia.
font-feature-settings
Mengaktifkan akses ke fitur font OpenType.
font-variation-settings
Memberikan kontrol yang disesuaikan untuk setelan font variabel.
line-gap-override
Mengganti jarak baris default font.
size-adjust
Menerapkan faktor penskalaan pada garis luar dan metrik font.
src
Menentukan sumber font, baik lokal maupun jarak jauh. Hal ini diperlukan untuk aturan @font-face. Menggabungkan url() dan local() dalam src adalah strategi umum yang menggunakan font lokal jika tersedia, dan kembali ke file font jarak jauh sebagai penggantian. Browser memprioritaskan resource berdasarkan urutan deklarasi, sehingga local() biasanya harus mendahului url().
unicode-range
Membatasi karakter yang harus menggunakan font ini.

Deskripsi

@font-face membebaskan desainer dari batasan font "web-safe" dengan memungkinkan mereka menggunakan tipografi kustom. Kemampuan fungsi local() untuk menelusuri font di perangkat pengguna menawarkan pengalaman lancar yang tidak bergantung pada koneksi internet.

Jenis MIME font

Format Jenis MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

Perbedaan antara @font-face dan font-family

Di CSS, @font-face dan font-family sering kali tertukar, tetapi keduanya memiliki tujuan yang berbeda.

Seperti yang telah kita bahas, @font-face adalah aturan yang digunakan untuk menentukan font kustom yang ingin Anda gunakan dalam aplikasi web. Memberi tahu browser tempat mendownload font, cara menampilkannya selama pemuatan (dengan properti font-display), dan menentukan subset karakter yang akan didownload (dengan unicode-range).

Sebaliknya, font-family adalah properti CSS yang digunakan dalam aturan CSS untuk menetapkan font tertentu atau daftar font ke elemen. Font yang tercantum di bagian font-family dapat berupa font yang kompatibel untuk web, font sistem, atau font kustom yang ditentukan dengan @font-face.

Singkatnya, @font-face mendeklarasikan font dan memberinya nama, dan font-family menerapkan font yang dideklarasikan ini ke elemen HTML.

Berikut contoh penggunaan keduanya:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

Dalam contoh ini, @font-face menentukan "CustomFont" dan memberi tahu browser tempat menemukannya. Properti font-family kemudian menerapkannya ke elemen body, dengan Arial sebagai pengganti jika "CustomFont" tidak tersedia.

Mengubah pilihan font

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan font-family untuk mengubah typeface teks Anda.

Properti font-family menerima daftar string yang dipisahkan koma, yang merujuk ke kumpulan font spesifik atau generik. Jenis font tertentu adalah string yang dikutip, seperti "Helvetica", "EB Garamond", atau "Times New Roman". Jenis font generik adalah kata kunci seperti serif, sans-serif, dan monospace (temukan daftar lengkap opsi di MDN). Browser akan menampilkan typeface pertama yang tersedia dari daftar yang diberikan.

Saat menggunakan font-family, Anda harus menentukan setidaknya satu jenis font generik jika browser pengguna tidak memiliki font pilihan Anda. Umumnya, jenis font generik pengganti harus mirip dengan font pilihan Anda: jika menggunakan font-family: "Helvetica" (jenis font sans-serif), font pengganti Anda harus sans-serif agar cocok.

Menggunakan font miring dan condong

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan font-style untuk menyetel apakah teks harus miring atau tidak. font-style menerima salah satu kata kunci berikut: normal, italic, dan oblique.

Membuat teks tebal

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan font-weight untuk menyetel "ketebalan" teks. Properti ini menerima nilai kata kunci (normal, bold), nilai kata kunci relatif (lighter, bolder), dan nilai numerik (100 hingga 900).

Kata kunci normal dan bold masing-masing setara dengan nilai numerik 400 dan 700.

Kata kunci lighter dan bolder dihitung relatif terhadap elemen induk. Lihat Arti Bobot Relatif di MDN untuk melihat diagram praktis yang menunjukkan cara nilai ini ditentukan.

Mengubah ukuran teks

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan font-size untuk mengontrol ukuran elemen teks Anda. Properti ini menerima nilai panjang, persentase, dan beberapa nilai kata kunci.

Selain nilai panjang dan persentase, font-size menerima beberapa nilai kata kunci absolut (xx-small, x-small, small, medium, large, x-large, xx-large) dan beberapa nilai kata kunci relatif (smaller, larger). Nilai relatif bersifat relatif terhadap font-size elemen induk.

Mengubah spasi antarbaris

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan line-height untuk menentukan tinggi setiap baris dalam elemen. Properti ini menerima angka, panjang, persentase, atau kata kunci normal. Secara umum, sebaiknya gunakan angka, bukan panjang atau persentase, untuk menghindari masalah dengan pewarisan.

Mengubah spasi antar-karakter

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan letter-spacing untuk mengontrol jumlah ruang horizontal di antara karakter dalam teks Anda. Properti ini menerima nilai panjang seperti em, px, dan rem.

Perhatikan bahwa nilai yang ditentukan meningkatkan jumlah ruang alami di antara karakter. Dalam demo berikut, coba pilih huruf satu per satu untuk melihat ukuran tampilan lebar dan perubahannya dengan letter-spacing.

Mengubah spasi antar-kata

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan word-spacing untuk memperpanjang atau memperpendek jarak di antara setiap kata dalam teks Anda. Properti ini menerima nilai panjang seperti em, px, dan rem. Perhatikan bahwa panjang yang Anda tentukan adalah untuk ruang ekstra selain jarak normal. Ini berarti word-spacing: 0 setara dengan word-spacing: normal.

Singkatan font

Anda dapat menggunakan properti singkat font untuk menetapkan banyak properti terkait font sekaligus. Daftar kemungkinan properti adalah font-family, font-size, font-stretch, font-style, font-variant, font-weight, dan line-height.

Lihat artikel font MDN untuk mengetahui secara spesifik cara mengurutkan properti ini.

## Mengubah huruf besar/kecil pada teks

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) untuk mengubah kapitalisasi teks tanpa perlu mengubah HTML yang mendasarinya. Properti ini menerima nilai kata kunci berikut: `uppercase`, `lowercase`, dan `capitalize`.

Menambahkan garis bawah, garis atas, dan garis tengah pada teks

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan text-decoration untuk menambahkan baris ke teks Anda. Garis bawah paling sering digunakan, tetapi Anda dapat menambahkan garis di atas atau di tengah teks.

Properti text-decoration adalah singkatan untuk properti yang lebih spesifik yang dijelaskan tepat di atas.

Properti text-decoration-line menerima kata kunci underline, overline, dan line-through. Anda juga dapat menentukan beberapa kata kunci untuk beberapa baris.

Properti text-decoration-color menetapkan warna semua dekorasi dari text-decoration-line.

Properti text-decoration-style menerima kata kunci solid, double, dotted, dashed, dan wavy.

Properti text-decoration-thickness menerima nilai panjang apa pun dan menetapkan lebar goresan semua dekorasi dari text-decoration-line.

Properti text-decoration adalah singkatan untuk semua properti sebelumnya.

Menambahkan indentasi ke teks

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan text-indent untuk menambahkan indentasi ke blok teks Anda. Properti ini menggunakan panjang (misalnya, 10px, 2em) atau persentase lebar blok penampung.

Menangani konten yang berlebih atau tersembunyi

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Gunakan text-overflow untuk menentukan cara konten tersembunyi ditampilkan. Ada dua opsi: clip (default), yang memotong teks pada titik overflow; dan ellipsis, yang menampilkan elipsis (…) pada titik overflow.

Mengontrol ruang kosong

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Properti white-space digunakan untuk menentukan cara penanganan spasi kosong dalam elemen. Untuk mengetahui detail selengkapnya, baca artikel white-space di MDN.

white-space: pre dapat berguna untuk merender ASCII art atau blok kode yang diindentasi dengan cermat.

Mengontrol pemisahan kata

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

Gunakan word-break untuk mengubah cara kata "dipecah" jika kata tersebut akan melampaui batas baris. Secara default, browser tidak akan memisahkan kata. Menggunakan nilai kata kunci break-all untuk word-break akan menginstruksikan browser untuk memisahkan kata pada setiap karakter jika diperlukan.

Mengubah perataan teks

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan text-align untuk menentukan perataan horizontal teks dalam elemen blok atau sel tabel. Properti ini menerima nilai kata kunci left, right, start, end, center, justify, dan match-parent.

Nilai left dan right masing-masing menyelaraskan teks ke sisi kiri dan kanan blok.

Gunakan start dan end untuk merepresentasikan lokasi awal dan akhir baris teks dalam mode penulisan saat ini. Oleh karena itu, start dipetakan ke left dalam bahasa Inggris, dan ke right dalam skrip Arab yang ditulis dari kanan ke kiri (RTL). Ini adalah penyesuaian logis, pelajari lebih lanjut di modul properti logis kami.

Gunakan center untuk meratakan teks ke tengah blok.

Nilai justify mengatur teks dan mengubah jarak antar-kata secara otomatis sehingga teks sejajar dengan tepi kiri dan kanan blok.

Mengontrol cara teks diatur

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Gunakan text-wrap untuk mengubah cara teks dalam elemen di-wrap.

Kata kunci yang diterima untuk properti ini mencakup wrap, nowrap, balance, dan stable. Nilai defaultnya adalah wrap, yang meminimalkan overflow dengan melipat teks di seluruh baris di sepanjang spasi normal dan jeda kata.

Anda dapat menggunakan kata kunci nowrap untuk mencapai hal yang berlawanan dan mencegah teks terputus di seluruh baris, yang dapat menyebabkan overflow.

Untuk mendapatkan jumlah teks yang sama di setiap baris saat Anda, misalnya, menulis judul atau tajuk berita, gunakan kata kunci balance. Untuk meningkatkan performa, browser hanya akan menerapkan nilai ini pada elemen dengan enam baris teks atau kurang.

Kata kunci stable berperforma serupa dengan wrap, tetapi dimaksudkan untuk digunakan dengan teks contenteditable. Dengan text-wrap: stable yang ditetapkan, baris di atas konten yang sedang diedit tidak akan berubah selama proses.

Terkadang string panjang tanpa titik henti yang jelas dapat meluap dari penampung. Untuk mengontrol cara pemisahan jenis teks ini, gunakan overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Kata kunci yang dapat Anda gunakan untuk properti ini adalah normal, break-word, dan anywhere. Setelan defaultnya adalah normal dan tidak akan memisahkan teks ke baris berikutnya kecuali jika teks tersebut berisi spasi atau titik jeda alami.

Nilai anywhere dan break-word menambahkan titik henti di mana saja di dalam string untuk mencegah overflow. Kata kunci berbeda dalam cara merespons ukuran min-content intrinsik atau eksplisit. Kata kunci anywhere memungkinkan semua peluang pemisahan lembut yang mungkin terjadi. Nilai break-word tidak, dan akan membuat teks sepanjang kata terpanjang.

Mengubah arah teks

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Gunakan direction untuk menyetel arah teks, baik ltr (kiri ke kanan, default) atau rtl (kanan ke kiri). Beberapa bahasa seperti Arab, Ibrani, atau Persia ditulis dari kanan ke kiri, jadi direction: rtl harus digunakan. Untuk bahasa Inggris dan semua bahasa kiri-ke-kanan lainnya, gunakan direction: ltr.

Mengubah alur teks

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Gunakan writing-mode untuk mengubah cara teks mengalir dan diatur. Defaultnya adalah horizontal-tb, tetapi Anda juga dapat menyetel writing-mode ke vertical-lr atau vertical-rl untuk teks yang ingin Anda alirkan secara horizontal.

Mengubah orientasi teks

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

Gunakan text-orientation untuk menentukan orientasi karakter dalam teks Anda. Nilai yang valid untuk properti ini adalah mixed dan upright. Properti ini hanya relevan jika writing-mode disetel ke selain horizontal-tb.

Menambahkan bayangan ke teks

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Gunakan text-shadow untuk menambahkan bayangan ke teks Anda. Properti ini mengharapkan tiga panjang (x-offset, y-offset, dan blur-radius) dan warna.

Lihat bagian text-shadow modul kami tentang Bayangan untuk mempelajari lebih lanjut.

Font variabel

Biasanya, font "normal" memerlukan impor file yang berbeda untuk berbagai versi typeface, seperti tebal, miring, atau ringkas. Font variabel adalah font yang dapat berisi banyak varian huruf yang berbeda dalam satu file.

Roboto Flex dalam kombinasi Lebar dan Ketebalan yang acak

Lihat artikel kami tentang Font Variabel untuk mengetahui detail selengkapnya.

Elemen semu

Pseudo-elemen ::first-letter dan ::first-line

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Pseudo-elemen ::first-letter dan ::first-line masing-masing menargetkan huruf pertama dan baris pertama elemen teks.

Elemen semu ::selection

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

Gunakan elemen semu ::selection untuk mengubah tampilan teks yang dipilih pengguna.

Saat menggunakan elemen semu ini, hanya properti CSS tertentu yang dapat digunakan: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Properti font-variant adalah singkatan untuk sejumlah properti CSS yang memungkinkan Anda memilih varian font seperti small-caps dan slashed-zero. Properti CSS yang disertakan dalam singkatan ini adalah font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, dan font-variant-numeric. Lihat link di setiap properti untuk mengetahui detail selengkapnya tentang penggunaannya.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang tipografi di web

Kata kunci mana dari berikut ini yang dapat digunakan sebagai penggantian generik font-family?

serif
Benar.
monospace
Benar.
italic
Coba lagi. italic adalah kata kunci yang valid untuk font-style, bukan font-family.
sci-fi
Coba lagi. Namun, fantasy adalah penggantian generik yang valid untuk font-family.
sans-serif
Benar.
helvetica
Coba lagi. "Helvetica" bukan kata kunci umum, melainkan merujuk pada jenis font tertentu.

Pernyataan mana yang digunakan untuk mengonversi huruf pertama setiap kata menjadi huruf besar? misalnya, This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Coba lagi.
text-case: capitalize;
Coba lagi.
text-transform: capitalize;
Benar.
font-style: capitals;
Coba lagi.
font-variant: capitalize;
Coba lagi.

Benar atau Salah: Gunakan text-orientation untuk meratakan teks ke kiri, kanan, atau tengah.

Benar
Coba lagi. text-orientation mengubah rotasi huruf dalam satu baris.
Salah
Benar. text-orientation mengubah rotasi huruf dalam satu baris. Gunakan text-align untuk menyelaraskan teks ke kiri, kanan, atau tengah (dan lainnya).

Properti CSS mana yang dapat digunakan untuk mengubah ruang di antara baris teks?

line-spacing
Coba lagi.
leading
Coba lagi. Leading adalah istilah yang tepat untuk ruang di antara baris dalam tipografi, tetapi bukan properti CSS yang valid.
baseline-distance
Coba lagi.
line-height
Benar.

Resource