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 mempercantik tampilannya. Dengan mengubah beberapa properti dasar, Anda dapat meningkatkan pengalaman membaca pengguna secara signifikan.
Dalam modul ini, kita akan memulai dengan aturan @font-face
, yang memungkinkan Anda mengimpor font kustom ke halaman web. Tindakan ini memastikan bahwa Anda memiliki tipografi
yang tepat, 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
latar untuk memanipulasi teks untuk gaya dan keterbacaan.
Kita juga akan membahas properti khusus paragraf seperti text-indent
dan
word-spacing
, sebelum menutup dengan topik lanjutan seperti font variabel
dan elemen pseudo, yang makin menyempurnakan kontrol tipografi Anda.
Contoh dan tips praktis akan diberikan di seluruh materi untuk memperkuat pemahaman dan penerapan teknik CSS ini.
Aturan @font-face
Aturan at CSS @font-face
berperan penting dalam desain web, yang 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 dasar pengukuran.
descent-override
- Menyesuaikan metrik penurunan, yang memengaruhi ruang di bawah dasar pengukuran.
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 satu nilai atau rentang.
font-style
- Menentukan gaya font, yang 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 lebih baik atas setelan font variabel.
line-gap-override
- Mengganti spasi baris default font.
size-adjust
- Menerapkan faktor penskalaan ke metrik dan struktur font.
src
- Menentukan sumber font, baik lokal maupun jarak jauh. Tindakan ini diperlukan untuk aturan
@font-face
. Menggabungkanurl()
danlocal()
dalamsrc
adalah strategi umum yang menggunakan font lokal jika tersedia, yang kembali ke file font jarak jauh sebagai penggantian. Browser memprioritaskan resource berdasarkan urutan deklarasi, sehinggalocal()
biasanya harus mendahuluiurl()
. unicode-range
- Membatasi karakter yang harus digunakan 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 yang lancar yang tidak
selalu bergantung pada koneksi internet.
Jenis MIME font
Format | Jenis MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Format Font Terbuka Web | font/woff |
Web Open Font Format 2 | font/woff2 |
Perbedaan antara @font-face dan font-family
Dalam CSS, @font-face
dan font-family
sering kali membingungkan, 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 di aplikasi web. Ini memberi tahu browser tempat mendownload font, cara menampilkannya selama pemuatan (dengan properti font-display
), dan menentukan subset karakter mana 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 dalam
font-family
dapat berupa font yang aman bagi web, font sistem, atau font kustom yang ditentukan dengan
@font-face
.
Untuk meringkas, @font-face
mendeklarasikan font dan memberinya nama, dan
font-family
menerapkan font yang dideklarasikan ini ke elemen HTML.
Berikut adalah 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
menemukan font tersebut. Properti font-family
kemudian menerapkannya ke elemen isi,
dengan Arial sebagai pengganti jika "CustomFont" tidak tersedia.
Mengubah typeface
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 yang diapit tanda kutip, 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 penggantian 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 terbalik
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 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 secara relatif terhadap elemen induk. Lihat Arti Bobot Relatif di MDN untuk melihat 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
. Umumnya, lebih disarankan untuk menggunakan angka, bukan panjang atau persentase untuk menghindari masalah dengan pewarisan.
Mengubah spasi antarkarakter
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 setiap huruf untuk melihat ukuran letterbox-nya dan perubahannya dengan letter-spacing
.
Mengubah spasi antarkata
Gunakan word-spacing
untuk menambah atau mengurangi panjang spasi antar-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 singkatan font
untuk menetapkan banyak properti terkait font sekaligus. Daftar properti yang mungkin adalah font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
, dan line-height
.
Lihat artikel font
MDN untuk mengetahui detail cara mengurutkan properti ini.
Mengubah huruf besar/kecil pada 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 tengah ke teks
Gunakan text-decoration
untuk menambahkan baris ke teks Anda. Garis bawah paling sering digunakan, tetapi Anda juga dapat menambahkan garis di atas atau di tengah teks.
Properti text-decoration
adalah singkatan untuk properti yang lebih spesifik yang dijelaskan di bawah.
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 Anda. Properti ini menggunakan panjang (misalnya, 10px
, 2em
) atau persentase lebar blok penampung.
Menangani konten yang berlebih atau tersembunyi
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 spasi kosong
Properti white-space
digunakan untuk menentukan cara penanganan spasi kosong dalam elemen. Untuk mengetahui detail selengkapnya, lihat artikel white-space
di MDN.
white-space: pre
dapat berguna untuk merender ASCII art atau blok kode yang diindentasi dengan cermat.
Mengontrol cara kata dipisah
Gunakan word-break
untuk mengubah cara kata "dipecah" saat kata tersebut melebihi baris. Secara default, browser tidak akan memisahkan kata. Menggunakan nilai kata kunci break-all
untuk word-break
akan menginstruksikan browser untuk membagi kata pada setiap karakter jika diperlukan.
Mengubah 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 mewakili lokasi awal dan akhir baris teks dalam mode penulisan saat ini. Oleh karena itu, start
memetakan ke left
dalam bahasa Inggris, dan ke right
dalam skrip Arab yang ditulis dari kanan ke kiri (RTL). Ini adalah perataan logis, pelajari lebih lanjut di modul properti logis kami.
Gunakan center
untuk meratakan teks ke 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 menetapkan 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, sehingga direction: rtl
harus digunakan. Untuk bahasa Inggris dan semua bahasa yang ditulis dari kiri ke kanan lainnya, gunakan direction: ltr
.
Mengubah alur teks
Gunakan writing-mode
untuk mengubah cara teks mengalir dan disusun. Defaultnya adalah horizontal-tb
, tetapi Anda juga dapat menetapkan writing-mode
ke vertical-lr
atau vertical-rl
untuk teks yang ingin Anda alirkan secara horizontal.
Mengubah orientasi teks
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
ditetapkan ke sesuatu selain horizontal-tb
.
Menambahkan bayangan ke teks
Gunakan text-shadow
untuk menambahkan bayangan ke teks Anda. Properti ini mengharapkan tiga panjang (x-offset
, y-offset
, dan blur-radius
) serta warna.
Lihat bagian text-shadow
modul kami tentang Bayangan untuk mempelajari lebih lanjut.
Font variabel
Biasanya, {i>font<i} "normal" mengharuskan Anda mengimpor file yang berbeda untuk berbagai versi jenis huruf, seperti huruf tebal, miring, atau dipadatkan. Font variabel adalah font yang dapat berisi berbagai varian typeface dalam satu file.
Lihat artikel kami tentang Font Variabel untuk informasi selengkapnya.
Elemen semu
Pseudo-elemen ::first-letter
dan ::first-line
Pseudo-elemen ::first-letter
dan ::first-line
masing-masing menargetkan huruf pertama dan baris pertama elemen teks.
Elemen semu ::selection
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
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.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang tipografi di web
Manakah dari kata kunci berikut yang dapat digunakan sebagai penggantian generik font-family
?
sci-fi
italic
sans-serif
serif
helvetica
monospace
Pernyataan mana yang digunakan untuk mengonversi huruf pertama setiap kata menjadi huruf besar? misalnya This is a sentence.
➡ This Is A Sentence.
font-style: capitals;
text-case: capitalize;
font-variant: capitalize;
text-capitalize: true;
text-transform: capitalize;
Benar atau Salah: Gunakan text-orientation
untuk meratakan teks ke kiri, kanan, atau tengah.
Properti CSS manakah yang dapat digunakan untuk mengubah spasi antar baris teks?
line-height
line-spacing
baseline-distance
leading
Resource
- Praktik terbaik font membahas mengimpor font, merender font, dan praktik terbaik lainnya untuk menggunakan font di web.
- Gaya visual teks dan font dasar MDN.