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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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}.
Baca artikel kami tentang Variabel Font untuk detail selengkapnya.
Elemen Pseudo
Elemen pseudo ::first-letter
dan ::first-line
Elemen pseudo ::first-letter
dan ::first-line
masing-masing menargetkan huruf pertama dan baris pertama elemen teks.
Elemen pseudo ::selection
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
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
monospace
italic
italic
adalah kata kunci yang valid untuk font-style
, bukan font-family
.sci-fi
fantasy
adalah penggantian generik yang valid untuk font-family
.sans-serif
helvetica
"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;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
Benar atau Salah: Gunakan text-orientation
untuk meratakan teks ke kiri, kanan, atau tengah.
text-orientation
mengubah rotasi huruf dalam baris.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
leading
baseline-distance
line-height
Referensi
- Praktik terbaik font membahas cara mengimpor font, merender font, dan praktik terbaik lainnya untuk menggunakan font di web.
- Gaya teks dan font dasar MN.