1. Tipografi
Tipografi merupakan salah satu bahasan dalam bidang desain grafis yang berfokus pada teknik
dan seni membuat teks menjadi dapat dicerna dengan mudah. Perancangan teks pada tipografi
dilakukan melalui typesetting, yaitu pengaturan komposisi huruf dan teks. Komposisi pada
typesetting mencakup jenis huruf yang digunakan, ukuran huruf, panjang baris, jarak antar baris,
jarak antar kata, dan jarak antar huruf. Bagian ini akan membahas bagaimana tipografi
diaplikasikan pada dokumen web, beserta dengan teknik-teknik yang membantu kita dalam
merealisasikan aplikasi tipografi tersebut.
Dasar Tipografi
Sebelum membahas bagaimana teknik aplikasi tipografi pada dokumen web, kita terlebih dahulu
akan melihat berbagai hal-hal mendasar yang harus dimengerti oleh mahasiswa mengenai
tipografi.
Prinsip Utama Tipografi
Sebagai salah satu pembahasan dalam ilmu desain, tipografi memiliki prinsip yang sama dengan
berbagai ilmu desain lainnya: membuat sesuatu menjadi beguna, dan mudah digunakan. Dalam
konteks tipografi, tentunya hal ini diaplikasikan ke teks. Fungsi utama dari tipografi ialah
membuat teks menjadi berguna dan mudah digunakan. Artinya? Tipografi berbicara tentang
kemudahan membaca teks (readability) dan kemudahan mengenali setiap huruf dan kata
(legibility).
Tipografi menghidupkan teks dalam sebuah tulisan. Tipografi membuat teks menjadi menarik,
sehingga pembaca penasaran dan ingin membaca teks. Tipografi memenjara pembaca dalam
teks: sekali pembaca mulai membaca, berhenti membaca dan melakukan hal lain akan menjadi
sulit. Tipografi diciptakan untuk menghargai konten (teks) dengan memaksimalkan penampilan
koten tersebut, dan tipografi diciptakan untuk memanjakan pembaca dengan memberikan
pengalaman yang menarik dalam membaca teks.
Respect the text, respect the reader, respect the type.
—Allan Haley
Kutipan dari Allan Haley di atas merupakan prinsip utama dari tipografi. Penghargaan terhadap
teks, pembaca, dan font (jenis huruf) merupakan hal yang harus dipraktekkan oleh setiap
desainer.
Typeface
Typeface merupakan karakter-karakter yang dirancang secara khusus untuk digunakan bersamasama. Sebagai karakter yang dirancang untuk digunakan bersama-sama, tentunya sebuah

2. typeface memiliki kesamaan fitur-fitur desain. Yang dimaksud dengan fitur-fitur desain ialah
ciri-ciri visual dari karakter-karakter yang ada di dalam typeface. Untuk mendapatkan kesamaan
fitur, beberapa bagian dari sebuah karakter sering kali akan ditemukan pada karakter lain dalam
sebuah typeface yang sama.
Contoh Kesamaan Fitur pada Huruf
Adapun beberapa contoh dari typeface yang umum ditemukan yaitu: “Times New Roman”,
“Arial”, “Helvetica”, “Courier New”, dan “Calibri”. Perlu diperhatikan juga bahwa sebuah
typeface juga mencakup ketebalan, kemiringan, lebar, dan pembuat dari typeface tersebut. Hal
ini menyebabkan “Helvetica” dan “Helvetica Bold” merupakan dua typeface yang berbeda, yang
juga berbeda dengan “Adobe Helvetica” atau “ITC Helvetica”.
Pemilihan typeface pada sebuah teks akan sangat berpengaruh terhadap mood pembaca ketika
membaca atau melihat teks tersebut. Perhatikan gambar di bawah:

3. Pemilihan Typeface dan mood Pembaca
Sebagai teks yang memberikan peringatan, tentunya kita dapat melihat bagaimana teks yang
berada di bagian atas lebih tidak terkesan “mengancam” dibandingkan teks yang berada di
bawah. Jadi ingat, pemilihan typeface yang tepat untuk dokumen web yang anda rancang akan
sangat penting dalam membangun mood pembaca. Ingat, respect the text, respect the reader,
respect the type!
Font
Istilah typeface dan font seringkali dipertukarkan, dan menyebabkan kebinbungan kepada orang
awam, padahal dalam dunia desain kedua hal ini memiliki arti yang sangat berbeda. Jika typeface
bericara tentang karakter yang dirancang untuk digunakan bersama-sama, font (dalam konteks
tipografi web dan tipografi digital) berbicara mengenai file yang menyimpan typeface.
Untuk mempermudah, bandingkan typeface dan font dengan lagu dan MP3. Sebuah lagu
merupakan karya seniman yang dapat dinikmati dan diinterpretasikan pada medium apapun,
sementara sebuah MP3 merupakan salah satu medium yang digunakan untuk memainkan lagu.
Hal ini sama dengan typeface, yang adalah merupakan karya seorang seniman (type designer)
yang dapat diinterpretasikan secara bebas, sementara font hanyalah medium yang digunakan oleh
komputer untuk menampilkan typeface.
Sebuah font dapat terdiri dari banyak typeface. Misalnya, font “Helvetica Nueue” dapat saja
memiliki typeface “Hevetica Nueue”, “Helvetica Nueue Bold”, ”, “Helvetica Nueue Italic”,
“Helvetica Nueue Condensed”, dst.
Klasifikasi Huruf
Seperti yang telah dijelaskan sebelumnya, pemilihan huruf akan sangat berpengaruh terhadap
mood dari pembaca ketika membaca teks. Terdapat sangat banyak jenis huruf yang dapat dipilih
untuk menyampaikan pesan, dan pada umumnya setiap huruf memiliki kepribadian dan pengaruh
yang berbeda-beda. Pengetahuan akan seluruh jenis huruf beserta dengan kepribadiannya tidak
mungkin dapat dipelajari oleh hanya satu orang, tetapi kita dapat mengklasifikasikan sebuah
huruf untuk mengambil kepribadian umum yang dimiliki huruf tersebut.
Dalam dunia web, terdapat lima klasifikasi huruf yang dapat dicetak oleh browser, yaitu:
Serif
Huruf yang memiliki tanda dekoratif pada ujung dari setiap huruf. Tanda dekoratif
tersebut dikenal dengan nama “Serif”. Jenis huruf ini umum digunakan pada bagian
heading dari dokumen.
Sans-serif
Huruf yang tidak memiliki serif. Jenis huruf ini biasanya digunakan untuk konten utama
dari teks.

4. Serif vs Sans-Serif (Tanda Merah = Serif)
Monospace
Pada jenis huruf ini, setiap huruf memiliki ukuran lebar yang sama, sehingga huruf dapat
disusun dengan rapi (sama panjang dan lebar). Biasanya huruf jenis ini digunakan untuk
kode program.
Cursive
Jenis huruf ini memodelkan cursive, yaitu tulisan tangan manusia. Biasanya digunakan
hanya sebagai dekorasi untuk memperindah bagian tertentu dari dokumen (misal:
kutipan). Huruf jenis ini jarang digunakan untuk seluruh teks.
Fantasy
Huruf yang mengandung simbol atau berbagai jenis dekorasi pada setiap karakter.
Misalnya, huruf “a” dapat saja berbentuk kelinci. Huruf ini biasanya digunakan sama
seperti cursive, untuk memperindah bagian tertentu dari dokumen.
Berikut adalah contoh kelima jenis klasifikasi huruf yang ada pada web:
Kelima Jenis Huruf pada Web
Selain menggunakan kelima jenis huruf yang disediakan browser, tentunya kita juga dapat
menambahkan sendiri huruf lain yang ingin kita gunakan. Cara penambahan huruf menggunakan
CSS, serta penhgunaan huruf-huruf yang disediakan oleh browser dapat dibaca pada bagian Web
Safe Font.

5. Sistem Pengukuran Huruf
Sistem pengukuran merupakan sebuah hal yang sangat mendasar dalam perancangan apapun.
Dalam merancang sebuah bangunan misalnya, seorang arsitek harus mengetahui dengan baik
sistem pengukuran yang digunakan agar rancangan bangunan yang dibuatnya dapat dibangun
dengan benar oleh kontraktor. Sama halnya dengan arsitek, dalam merancang teks untuk
dokumen web, kita harus mengetahui bagaimana browser melakukan pengukuran font untuk
mendapatkan hasil yang optimal.
Pengukuran teks untuk web dilakukan dengan menggunakan empat satuan, yaitu:
Ems (em)
Unit pengukuran em merupakan unit pengukuran skala, yang meningkat atau menurun
relatif terhadap ukuran teks dasar. Misalnya, jika ukuran teks dasar dari sebuah dokumen
web adalah 12pt, maka 1em dihitung sebagai 12pt. Dengan logika yang sama, 2em adalah
24pt, dan 0.5em adalah 6pt. Pengukuran dengan menggunakan em sangat populer
karena skalabilitas ini, yang menyebabkan kita dapat dengan mudah mengubah
pengukuran untuk seluruh elemen yang ada hanya dengan mengubah ukuran teks dasar.
Pixels (px)
Pixel merupakan unit pengukuran berukuran tetap, yang digunakan pada layar komputer.
Satu pixel merupakan satu titik pada layar komputer. Unit pengukuran ini biasanya
digunakan untuk menghasilkan dokumen yang mementingkan pengukuran tepat (seperti
presentasi), tetapi jarang digunakan karena sulit diubah ukurannya. Pengubahan ukuran
pixel penting untuk skalabilitas, sehingga misalnya satu kode dapat digunakan untuk
tampilan pada desktop dan mobile (handphone).
Points (pt)
Merupakan unit pengukuran yang digunakan pada percetakan tradisional. 1pt sama
dengan 1/72 inch. Seperti pixel, unit pengukuran ini tidak fleksibel, sehingga umumnya
hanya digunakan untuk dokumen web yang akan dicetak.
Percents (%)
Seperti em, percent merupakan unit pengukuran skala yang ukurannya berubah sesuai
dengan ukuran teks dasar. Perbedaan dengan em ialah, jika 1em sama dengan ukuran teks
dasar, pada percent yang merupakan ukuran teks dasar ialah 100%.
Perlu diingat bahwa keempat unit pengukuran di atas digunakan untuk mengubah ukuran teks
pada CSS, dan memiliki arti yang berbeda jika digunakan pada konteks pecetakan tradisional.
Keempat unit ini nantinya akan digunakan sebagai unit ukuran pada properti font-size dari
CSS, yang akan dibahas pada bagian Font Size.
Jarak Antar Baris
Sebuah teks yang panjang akan memiliki beberapa baris. Jarak antar baris sangat penting untuk
memastikan pembaca mendapatkan pengalaman membaca yang maksimal. Jarak antar baris yang
terlalu dekat akan menyebabkan teks sulit atau bahkan tidak dapat dibaca. Di sisi lain, jarak antar
baris yang terlalu jauh akan menyebabkan teks terasa aneh untuk dibaca.

6. Contoh Perbedaan Jarak Antar Baris

7. Gambar Contoh Perbedaan Jarak Antar Baris memperlihatkan bagaimana teks dengan jarak
antar baris yang berbeda akan mempengaruhi kemudahan membaca. Teks pada paragraf pertama
tidak memiliki jarak antar baris, sementara paragraf kedua memiliki jarak antar baris sebesar
0.5em, dan paragraf ketiga memiliki jarak antar baris sebesar 1.5em. Manakah teks yang lebih
mudah dibaca?
Penentuan jarak antar baris seperti yang diperlihatkan pada gambar Contoh Perbedaan Jarak
Antar Baris di atas dilakukan dengan menghitung nilai leading, istilah tipografi untuk jarak antar
baris, pada percetakan tradisional. Gambar di bawah memperlihatkan contoh area font dan
leading:
Ukuran Font dan Leading
Perhitungan jarak antar baris pada dokumen web dilakukan dengan cara yang berbeda. Untuk
mendapatkan jarak antar baris, kita harus memberikan ukuran tinggi baris kepada browser.
Tinggi baris dihitung dengan menambahkan setengah jarak antar baris pada atas dan bawah font,
seperti yang ditunjukkan pada gambar berikut:

8. Perhitungan Jarak Antar Baris pada Browser
Seperti namanya, pengaturan jarak antar baris pada dokumen web dilakukan dengan
menggunakan properti line-height, yang akan dibahas pada bagian Line Height.
Jarak Antar Kata dan Huruf
Selain jarak antar baris, faktor lain yang mempengaruhi kemudahan pembacaan sebuah teks ialah
jarak antar kata dan karakter. Idealnya, setiap paragraf dan baris memiliki jarak antar kata dan
karakter yang dibuat khusus untuk memaksimalkan kemudahan pembacaan teks. Gambar
dibawah menunjukkan perbandingan teks dengan jarak antar kata standar, rendah, dan tinggi.

9. Contoh Jarak Antar Kata Standar, Tinggi, dan Rendah
Seperti yang dapat dilihat, jarak antar kata yang terlalu rendah akan menyebabkan pembaca sulit
membedakan antara satu kata dengan kata lainnya, sementara jarak antar kata yang terlalu tinggi
akan menyebabkan kesulitan pembacaan karena secara otomatis mata kita akan mengikuti alur
ruang kosong yang terbuka. Alur ini dikenal dengan istilah river.
River
River seringkali ditemukan ketika kita menggunakan rata kiri dan kanan (justified) pada teks
paragraf. Penambahan dan pengurangan jarak antar kata utamanya dilakukan untuk mengurangi
river, agar pembaca dapat membaca dengan lebih nyaman. Sayangnya, CSS belum memiliki
properti yang mampu mengatur jarak antar kata dengan sempurna (kata per kata atau baris per
baris). Properti untuk perubahan jarak antar kata, word-spacing, hanya dapat mengubah jarak
antar kata secara keseluruhan.

10. Jarak antar huruf, seperti jarak antar kata memiliki kegunaan yang kurang lebih sama. Bedanya
hanya pada pengontrolan jarak. Sesuai dengan namanya, jarak antar kata mengatur jarak di
antara dua kata, sementara jarak antar huruf mengatur jarak antara setiap huruf yang ada di
dalam teks.
Contoh Jarak Antar Huruf Standar, Tinggi, dan Rendah
Seperti yang dapat dilihat, jarak antar huruf yang terlalu tinggi akan menghasilkan banyak river,
sementara jarak antar huruf yang rendah akan menyebabkan kesulitan dalam membaca kata.
Properti CSS untuk Tipografi
Bagian ini akan membahas berbagai properti CSS yang dapat digunakan untuk mengontrol
berbagai aspek tipografi dari dokumen web.
Warna Teks
Salah satu hal pertama yang umumnya dilakukan oleh seorang desainer atau pengembang yang
ingin memperindah web yang dikembangkan ialah dengan mengubah warna dan typeface dari
teks. Tentu saja terdapat banyak properti lain yang dapat digunakan, tetapi penrubahan typeface
dan warna merupakan salah satu perubahan yang memiliki dampak cukup besar pada dokumen,

11. dengan hanya sedikit usaha. Mengganti warna dan jenis tulisan milik browser secara otomatis
akan membuat halaman menjadi lebih unik.
Perubahan warna teks dapat dilakukan dengan mudah: menggunakan properti color dari CSS.
Properti ini menerima hanya satu nilai saja, tetapi nilai yang diterima dapat diberikan dalam
berbagai format. Kita dapat memberikan kata kunci, nilai heksadesimal, RGB, RGBa, HSL, dan
HSLa ke properti ini. Begitupun, properti yang paling populer digunakan hanya ada dua, aitu
nilai heksadesimal dan nilai RGBa. Nilai heksadesimal digunakan karena kemudahan dan
interoperabilitas nilai ini (program pengolah grafis biasanya menggunakan nilai ini), sementara
nilai RGBa populer karena dukungan transparansi dari CSS3.
Kode di bawah memberikan contoh penggunaan properti color dari CSS:
/*
Warna dengan kata kunci
*/
p {
color: blue;
}
/*
Warna dengan kata nilai heksadesimal
*/
p {
color: #0000FF;
/* Penulisan singkat */
color: #00F;
}
/*
Warna dengan nilai RGB
Sintaks: rgb(merah, hijau, biru)
*/
p {
color: rgb(0, 0, 255);
}
/*
Warna dengan nilai RGBa
Sintaks: rgba(merah, hijau, biru, transparansi)
*/
p {
color: rgba(0, 0, 255, 1);
}
/*
Warna dengan nilai HSL
Sintaks: hsl(warna, kejenuhan, intensitas-cahaya)
*/
p {
color: hsl(202, 100%, 50%);
}

12. /*
Warna dengan nilai HSLa
Sintaks: hsl(warna, kejenuhan, intensitas-cahaya, transparansi)
*/
p {
color: hsla(202, 100%, 50%, 1);
}
Jika ingin melihat efek tiap warna dengan jelas, anda dapat bereksperimen secara langsung
dengan kode yang dibuat di atas. Nilai warna sendiri disarankan diambil langsung dari program
pengolah grafis seperti Photoshop untuk menghemat waktu dalam pengembangan. Program
pengolah grafis umumnya memiliki fitur untuk konversi warna ke berbagai format.
Font Properties
CSS memberikan banyak properti untuk mengubah tampilan teks dari sebuah dokumen web.
Properti-properti yang ada dibagi ke dalam dua kateogri besar, yaitu properti berbasis font dan
properti berbasis teks. Mayoritas properti ini diawali dengan nama kategorinya, sehingga
kebanyakan properti yang ada nantinya akan memiliki format font-* ataupun text-*.
Pembahasan akan dimulai dengan properti font.
Font Family
Properti font-family merupakan properti yang menentukan font yang digunakan untuk
menampilkan teks. Properti ini dapat berisi beberapa nilai, sehingga kita memiliki font pengganti
yang dapat dipilih oleh sistem jika sistem pengguna tidak memiliki font utama yang diingnkan.
Font yang paling pertama kali diberikan (berada di paling kiri) merupakan font utama yang akan
digunakan jika sistem pengguna memiliki font tersebut. Jika tidak, browser akan terus mencari
pada daftar font di properti font-family, terus sampai pada akhir di mana browser akan
menggunakan font standar sesuai dengan jenis font yang ditentukan. Font yang memiliki nama
lebih dari satu kata harus diapit dengan tanda petik.
Berikut adalah contoh kode penggunaan font-family:
h1 {
font-family: Georgia, "Times New Roman", "Book Antiqua", serif;
}
Font Size
Properti font-size memberikan kemampuan untuk mengubah ukuran teks dengan
menggunakan sistem pengukuran huruf yang dibahas pada bagian Sistem Pengukuran Huruf.
Berikut adalah contoh penggunaan properti ini:
a {
font-size: 12px;
}
p {

13. font-size: 10pt;
}
h1 {
font-size: 1.25em;
}
h2 {
font-size: 110%;
}
Font Style
Untuk memberikan cetak miring terhadap teks, kita dapat menggunakan properti font-style.
Properti ini menerima empat nilai standar, yaitu normal, italic, oblique, dan inherit.
Perbedaan antara italic dan oblique biasanya tergantung kepada font yang dipilih, karena
tidak setiap font memiliki typeface jenis ini. Nilai yang paling sering digunakan ialah normal
dan italic.
Berikut adalah contoh penggunaan properti font-style:
strong {
font-style: italic;
}
Font Variant
Properti font-variant digunakan untuk memberikan tampilan small caps, yaitu seluruh teks
ditulis dengan huruf kapital yang berbeda ukuran. Huruf kapital ukuran standar digunakan pada
tempat yang memang merupakan huruf kapital, sementara huruf standar (kecil) menggunakan
model huruf kapital yang diperkecil. Untuk lebih jelasnya, coba lakukan eksperimen dengan
browser pada properti ini.
Properti font-variant menerima tiga buah nilai, yaitu small-caps, normal, dan inherit.
Berikut adalah contoh penggunaan properti font-variant:
h1 {
font-variant: small-caps;
}
Perlu diingat juga bahwa sama dengan penggunaan nilai oblique pada font-style, nilai
small-caps bergantung kepada dukungan dari font yang digunakan. Untuk mendapatkan efek
maksimal, pastikan font yang digunakan memang memiliki typeface jenis small caps.
Font Weight
Terkadang kita perlu mengubah ketebalan dari sebuah teks pada bagian tertentu dari sebuah
dokumen, misalnya untuk memberikan penekanan teks, atau menarik perhatian pembaca pada
singkatan. Untuk kasus seperti ini kita dapat menggunakan properti font-weight. Properti ini

14. dapat diisikan dengan nilai kata kunci khusus seperti normal, bold, bolder, lighter, dan
inherit. Yang paling sering ditemui ialah penggunaan nilai normal dan bold untuk mengubah
teks dari standar menjadi cetak tebal, atau sebaliknya.
Selain menggunakan kata kunci, kita juga dapat mengisikan properti ini dengan nilai angka,
yaitu dengan angka 100, 200, 300, 400, 500, 600, 700, 800, dan 900. Nilai-nilai angka ini
merepresentasikan tingkat ketebalan teks, mulai dari paling tipis (100) sampai yang paling tebal
(900). Nilai angka pada teks normal ialah 400, dan nilai bold ialah 700. Sebelum menggunakan
nilai angka ini, pastikan typeface yang digunakan mendukung ketebalan tersebut, karena jika
tidak maka pengisian nilai tidak akan memberikan efek.
Berikut ialah contoh penggunaan properti font-weight:
h1 {
font-weight: bold;
}
em {
font-weight: 700;
}
Line Height
Seperti yang telah dijelaskan pada bagian Jarak Antar Baris, properti ini digunakan terutama
untuk mengubah jarak antar baris dari sebuah teks. Nilai yang dapat diisikan pada bagian ini
sama dengan font-size, yaitu nilai Sistem Pengukuran Huruf.
Berikut ialah contoh penggunaan properti line-height:
p {
line-height: 24px;
}
Penulisan Singkat Properti Font
Seluruh properti font yang diberikan pada bagian-bagian sebelumnya dapat dikombinasikan dan
dituliskan dalam hanya satu properti font. Jika ingin menyingkat penulisan, kita harus
memberikan urutan properti yang tepat, yaitu: font-style, font-variant, font-weight,
font-size, line-height, dan font-family. Seluruh nilai-nilai yang akan diisikan tersebut
harus dipisahkan dengan spasi (" "), kecuali utnuk font-size dan line-height. Properti
font-size dan line-height dipisahkan dengan slash (/).
Perlu diingat juga bahwa nilai-nilai dari properti yang diisikan pada penulisan singkat bersifat
opsional (boleh tidak diisi), kecuali untuk font-size dan font-family. Karena hal ini pula,
yang paling sering dijumpai pada penggunaan penulisan singkat ialah hanya font-size dan
font-family.
Kode berikut memberikan contoh penulisan singkat properti font:

15. p {
font: italic small-caps bold 13px/20px 'Helvetica Neue',
Arial, Helvetica, sans-serif;
}
Text Properties
Mengetahui cara untuk mengatur pilihan font dan berbagai propertinya tentu saja tidak cukup
untuk menghasilkan tipografi dokumen web yang maksimal. Selain mengubah berbagai properti
font, kita juga dapat mengatur berbagai hal yang berhubungan dengan teks.
Text Align
Melakukan pelurusan (align) teks merupakan bagian penting untuk mendapatkan ritme dan alur
pembacaan sebuah dokumen. Selain itu, kita juga dapat memperbaiki permasalahan seperti river
dengan memiliki pelurusan teks yang benar.
Pelurusan teks pada CSS diatur dengan menggunakan properti text-align, yang dapat diisikan
dengan lima nilai, yaitu: left, right, center, justify, and inherit. Seluruh nilai tersebut
sama artinya dengan nilai pelurusan teks pada program pengolah kata seperti Microsoft Word,
sehingga penjelasan lebih lanjut tidak akan dilakukan lagi.
Berikut adalah contoh penggunaan properti text-align:
p {
text-align: justify;
}
Text Decoration
Properti text-decoration memberikan kemampuan untuk menghias teks, yang dapat diisikan
dengan nilai-nilai berikut: none, underline, overline, line-through, blink, and inherit.
Mayoritas penggunaan properti ini dilakukan untuk menghilangkan garis bawah pada teks dari
link, tetapi tentunya kita dapat menggunakan text-decoration untuk berbagai keperluan lain.
Kegunaan tiap-tiap properti sendiri sama seperti namanya: overline memberikan teks garis di
atas tulisan, underline memberikan garis di bawah tulisan, line-through membuat teks
dicoret, dan blink membuat teks berkedip. Dari seluruh properti, yang tidak disarankan untuk
digunakan ialah blink, karena properti ini membuat pengguna sulit membaca teks.
Nilai line-through sendiri dapat digunakan untuk menandakan teks yang akan dihapus dari
sebuah dokumen (semantik: tag del) atau teks yang telah tidak relevan atau akurat (semantik: tag
s).
Berikut adalah contoh penggunaan properti text-decoration:
h1 {

16. text-decoration: underline;
}
Text Indent
Properti text-indent dapat digunakan untuk memberikan indentasi terhadap teks, seperti yang
sering tampak pada tulisan di buku. Properti ini dapat digunakan untuk memberikan indentasi ke
dalam (nilai positif) maupun ke luar (nilai negatif), dan dapat diisikan dengan nilai-nilai pada
Sistem Pengukuran Huruf.
Berikut adalah contoh kode penggunaan properti text-indent:
p {
text-indent: 72pt;
}
Text Shadow
Properti text-shadow, seperti namanya, memungkinkan kita menambahkan bayangan, atau
beberapa bayangan, ke teks. Properti ini harus diisikan dengan empat nilai secara terurut dari kiri
ke kanan. Adapun nilai-nilai yang harus diisikan ialah sebagai berikut:
1. Jarak bayangan pada sumbu x, diisikan dengan satuan Sistem Pengukuran Huruf kecuali
%,
2. Jarak bayangan pada sumbu y, diisikan dengan satuan Sistem Pengukuran Huruf kecuali
%,
3. Tingkat pengaburan bayangan, diisikan dengan satuan Sistem Pengukuran Huruf kecuali
%, dan
4. Warna dari bayangan, diisikan dengan nilai warna pada CSS.
Properti ini juga dapat diisikan dengan beberapa nilai, agar teks yang diaplikasikan dapat
memiliki beberapa bayangan. Jika ingin mengisikan beberapa nilai, pisahkan setiap nilai
bayangan dengan tanda koma (,).
Berikut adalah contoh kode dari properti text-shadow:
h1 {
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
/*
Banyak Bayangan
*/
h2 {
text-shadow:
}
Text Transform
4px 4px 2px rgba(150, 150, 150, 1),
1em 1em 2em rgba(125, 255, 255, 1);

17. Properti text-transform sama dengan properti font-variant, dalam hal properti ini
memberikan perubahan huruf (kapital ke standar atau sebaliknya) terhadap teks yang
ditampilkan. Jika font-variant mencari typeface huruf kapital kecil, maka text-transform
menggunakan typeface yang umum ada untuk mengubah teks.
Nilai yang mungkin diisikan dengan properti ini yaitu: none, capitalize, uppercase,
lowercase, and inherit. Nilai uppercase dan lowercase sudah jelas kegunaannya, sementara
nilai capitalize digunakan agar seluruh awal kata dari teks dibuat menjadi huruf kapital. Nilai
none akan menyebabkan teks ditampilkan sebagaimana ia diketikkan.
Berikut adalah contoh penggunaan properti text-transform:
a.sponsor {
text-transform: capitalize;
}
Letter Spacing dan Word Spacing
Properti letter-spacing dan word-spacing digunakan untuk mengatur jarak antar huruf dan
jarak antar kata. Penjelasan mengenai kedua hal tersebut dapat dibaca pada bagian Jarak Antar
Kata dan Huruf. Nilai yang diterima ialah unit pada Sistem Pengukuran Huruf.
Kode di bawah memberikan contoh penggunaan kedua properti ini:
p {
letter-spacing: 0.7em;
word-spacing: 0.9em;
}
Web Safe Font
Ketika kita memilih font untuk digunakan dalam dokumen web, browser akan mencari font yang
disebutkan dari sistem operasi terlebih dahulu. Jika font tidak ditemukan, browser akan secara
otomatis menggunakan font yang standar, antara serif atau sans-serif.
Untungnya, ada beberapa jenis font yang hampir selalu ada pada komputer, tablet, handphone,
ataupun berbagai perangkat yang dapat melakukan browsing. Beberapa font yang selalu ada ini
hampir dapat selalu digunakan oleh desainer, karena kemungkinan besar perangkat yang
membuka akan dapat menampilkan font dengan benar. Karena keamanan yang ditawarkan, font
jenis ini dikenal dengan nama “Web Safe Font”.
Adapun beberapa contoh dari web safe font ialah sebagai berikut:
Arial
Courier New
Courier
Garamond

18. Georgia
Lucida Sans
Lucida Grande
Lucida
Palatino
Linotype
Tahoma
Times New Roman
Times
Trebuchet
Verdana
Web Font
Adanya keterbatasan dalam memilih font yang dapat digunakan tentu saja akan membatasi
kreatifitas seorang desainer. Untuk menanggulangi hal ini, browser modern telah mendukung
sebuah properti yang dikenal dengan nama “Web Font”. Properti yang digunakan ialah @fontface dari CSS. Langsung saja, berikut adalah contoh kode dari properti @font-face:
@font-face {
font-family: 'Windings';
src: url('windings.eot');
src: url('windings.eot') format('embedded-opentype'),
url('windings.woff') format('woff'),
url('windings.ttf') format('truetype'),
url('windings.svg') format('svg');
}
body {
font-family: 'Windings', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
Seperti yang dapat dilihat pada kode di atas, pengunaan properti @font-face sangatlah
sederhana dan langsung: spesifikasikan font-family, kemudian rujuk ke URL tempat kita
menyimpan font tersebut, dan panggil pada elemen lain.