Teks dan tipografi

Podcast CSS - 036: Teks & Tipografi

Teks adalah salah satu elemen penyusun inti web.

Saat membuat situs web, Anda tidak perlu menata gaya teks Anda; HTML sebenarnya memiliki beberapa penataan gaya {i>default<i} yang cukup masuk akal.

Namun demikian, teks kemungkinan akan menjadi bagian utama dari {i>website<i} Anda, jadi ada baiknya untuk menambahkan beberapa gaya untuk membuatnya lebih menarik. Dengan mengubah beberapa properti dasar, Anda dapat meningkatkan pengalaman membaca secara signifikan bagi pengguna.

Dalam modul ini, kita akan melihat beberapa properti font CSS dasar seperti font-family, font-style, font-weight, dan font-size. Kemudian, kita akan mempelajari properti yang memengaruhi paragraf teks, seperti text-indent dan word-spacing. Modul ini diakhiri dengan beberapa topik lanjutan seperti font variabel dan elemen pseudo.

Mengubah jenis huruf

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Gunakan font-family untuk mengubah jenis huruf teks Anda.

Properti font-family menerima daftar string yang dipisahkan koma, baik yang merujuk ke jenis font tertentu atau generik. Jenis font tertentu adalah string dengan tanda kutip, seperti “Helvetica”, “EB Garamond”, atau “Times New Roman”. Jenis font umum adalah kata kunci seperti serif, sans-serif, dan monospace (temukan daftar lengkap opsi di MDN). Browser akan menampilkan jenis huruf pertama yang tersedia dari daftar yang disediakan.

Saat menggunakan font-family, Anda harus menentukan setidaknya satu jenis font umum 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), penggantian Anda harus sans-serif agar cocok.

Menggunakan font miring dan miring

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

Menebalkan teks

Dukungan Browser

  • 2
  • 12
  • 1
  • 1

Sumber

Gunakan font-weight untuk menetapkan “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 MDN untuk diagram praktis yang menunjukkan cara menentukan nilai ini.

Mengubah ukuran teks

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Gunakan font-size untuk mengontrol ukuran elemen teks. 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

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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 pewarisan.

Mengubah spasi antarkarakter

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Gunakan letter-spacing untuk mengontrol jumlah spasi horizontal antarkarakter dalam teks. Properti ini menerima nilai panjang seperti em, px, dan rem.

Perhatikan bahwa nilai yang ditentukan akan meningkatkan jumlah ruang alami di antara karakter. Pada demo di bawah, coba pilih satu huruf untuk melihat ukuran tampilan lebarnya dan perubahannya dengan letter-spacing.

Mengubah spasi antar-kata

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Gunakan word-spacing untuk menambah atau mengurangi panjang spasi antara setiap kata dalam teks. Properti ini menerima nilai panjang seperti em, px, dan rem. Perhatikan bahwa panjang yang Anda tentukan adalah untuk spasi tambahan selain spasi 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.

Baca artikel font MDN untuk mengetahui detail tentang cara mengurutkan properti tersebut.

Mengubah kapitalisasi teks

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Gunakan 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 putus-putus ke teks

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Gunakan text-decoration untuk menambahkan baris ke teks. Garis bawah paling umum digunakan, tetapi Anda juga dapat menambahkan baris di atas teks atau langsung melewatinya.

Properti text-decoration adalah singkatan untuk properti yang lebih spesifik, yang dijelaskan di bawah ini.

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 di atas.

Menambahkan indentasi ke teks

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

Menangani konten tambahan atau tersembunyi

Dukungan Browser

  • 1
  • 12
  • 7
  • 1.3

Sumber

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

Mengontrol spasi kosong

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

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

Mengontrol cara pemutusan kata

Dukungan Browser

  • 1
  • 12
  • 15
  • 3

Sumber

Gunakan word-break untuk mengubah bagaimana kata seharusnya “dipatahkan” jika akan melebihi baris. Secara default, browser tidak akan memisahkan kata. Menggunakan nilai kata kunci break-all untuk word-break akan menginstruksikan browser untuk memecah kata pada setiap karakter jika diperlukan.

Ubah perataan teks

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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 meratakan 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). Itu adalah penyelarasan logis. Pelajari lebih lanjut di modul properti logis kami.

Gunakan center untuk meratakan teks ke bagian tengah blok.

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

Mengubah arah teks

Dukungan Browser

  • 2
  • 12
  • 1
  • 1

Sumber

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

Mengubah alur teks

Dukungan Browser

  • 48
  • 12
  • 41
  • 10.1

Sumber

Gunakan writing-mode untuk mengubah alur dan penyusunan teks. Defaultnya adalah horizontal-tb, tetapi Anda juga dapat menyetel writing-mode ke vertical-lr atau vertical-rl untuk teks yang ingin Anda mengalirkan secara horizontal.

Mengubah orientasi teks

Dukungan Browser

  • 48
  • 79
  • 41
  • 14

Sumber

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

Menambahkan bayangan ke teks

Dukungan Browser

  • 2
  • 12
  • 3.5
  • 1.1

Sumber

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

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

Font variabel

Biasanya, {i>font<i} "normal" membutuhkan pengimporan {i>file<i} yang berbeda untuk versi jenis huruf yang berbeda, misalnya tebal, miring, atau dipadatkan. {i>Font<i} variabel adalah {i>font<i} yang dapat berisi banyak varian jenis huruf yang berbeda dalam satu {i>file<i}.

Roboto Flex dalam kombinasi acak dari Lebar dan Berat

Baca artikel kami tentang Variabel Font untuk detail selengkapnya.

Elemen Pseudo

Elemen pseudo ::first-letter dan ::first-line

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

Elemen pseudo ::selection

Dukungan Browser

  • 1
  • 12
  • 62
  • 1.1

Sumber

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

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

font-variant

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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. Periksa link di setiap properti untuk detail selengkapnya tentang penggunaannya.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tipografi di web

Manakah dari kata kunci berikut yang dapat digunakan sebagai penggantian umum 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, tetapi merujuk ke jenis font tertentu.

Pernyataan mana yang digunakan untuk mengubah 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 baris.
Salah
Benar. text-orientation mengubah rotasi huruf dalam baris. Gunakan text-align untuk meratakan teks ke kiri, kanan, atau tengah (dan banyak lagi!).

Properti CSS mana yang dapat digunakan untuk mengubah ruang antarbaris teks?

line-spacing
Coba lagi.
leading
Coba lagi. Leading adalah istilah yang tepat untuk spasi antarbaris dalam tipografi, tetapi itu bukan properti CSS yang valid.
baseline-distance
Coba lagi.
line-height
Benar.

Referensi