Memilih jenis huruf yang tepat untuk membuat web itu penting.
Pemilihan Jenis Huruf
Memilih jenis huruf yang tepat berdampak besar terhadap pembaca di situs web.
Jenis huruf yang tepat dapat menciptakan identitas yang kuat.
Menggunakan jenis huruf yang mudah dibaca itu penting. Jenis huruf dapat menambah nilai tulisan. Penting juga untuk memilih warna dan ukuran tulisan yang tepat untuk jenis huruf yang akan digunakan.
Font Umum
Dalam CSS ada lima jenis huruf yang umum atau sering digunakan:
- Font serif memiliki goresan kecil di tepi huruf.
- Font sans-serif memiliki garis yang bersih (tidak ada goresan kecil).
- Font monospace semua huruf memiliki lebar tetap yang sama.
- Font cursive meniru tulisan tangan manusia.
- Font fantasy merupakan font dekoratif.
Properti CSS font-family
Dalam CSS, dapat menggunakan properti font-family untuk menentukan jenis huruf pada tulisan.
Tips: Properti font-family harus menyimpan beberapa nama jenis huruf sebagai sistem “fallback”, untuk memastikan kompatibilitas maksimal antara browser/ sistem operasi. Mulailah dengan jenis huruf yang diinginkan, dan akhiri dengan jenis huruf yang umum (agar browser dapat memilih jenis huruf yang umum, jika tidak ada jenis huruf yang diinginkan yang tersedia). Jenis huruf harus dipisahkan dengan koma.
Contoh
Menetapkan beberapa jenis huruf yang berbeda untuk tiga paragraf:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>Jenis font CSS</h1>
<p class="p1">Ini adalah paragraf, ditampilkan dalam font Times New Roman.</p>
<p class="p2">Ini adalah paragraf, ditampilkan dalam font Arial.</p>
<p class="p3">Ini adalah paragraf, ditampilkan dalam font Lucida Console.</p>
</body></html>Properti font-style
Properti font-style sebagian besar digunakan untuk menentukan tulisan miring.
Properti ini memiliki tiga nilai, yaitu:
- normal – Tulisan ditampilkan secara normal
- italic – Tulisan ditampilkan dalam huruf miring
- oblique– Tulisan ditampilkan miring sama seperti dengan italic, tetapi jarang digunakan
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>Properti font-style</h1>
<p class="normal">Ini adalah paragraf dengan font-style normal.</p>
<p class="italic">Ini adalah paragraf dengan font-style italic.</p>
<p class="oblique">Ini adalah paragraf dengan font-style oblique.</p>
</body></html>Properti font-weight
Properti font-weight menentukan bobot ketebalan dari tulisan:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>Properti font-weight</h1>
<p class="normal">Ini adalah sebuah paragraf.</p>
<p class="light">Ini adalah sebuah paragraf.</p>
<p class="thick">Ini adalah sebuah paragraf.</p>
<p class="thicker">Ini adalah sebuah paragraf.</p>
</body></html>Properti font-variant
Properti font-variant dapat menentukan apakah tulisan harus ditampilkan dalam bentuk small-caps atau tidak.
Bentuk small-caps adalah bentuk huruf besar (capital) tapi mempunyai ukuran yang lebih kecil daripada huruf besar pada umumnya.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>Properti font-varian</h1>
<p class="normal">Nama saya Hege Refsnes.</p>
<p class="small">Nama saya Hege Refsnes.</p>
</body></html>Properti font-size
Properti font-size dapat mengatur ukuran tulisan.
Kemampuan mengelola ukuran tulisan sangat penting dalam desain web. Namun, jangan sampai ukuran huruf untuk membuat paragraf terlihat seperti judul, atau judul terlihat seperti paragraf.
Selalu gunakan tag HTML yang tepat , seperti <h1> – <h6> untuk judul dan <p> untuk paragraf.
Nilai ukuran font bisa berupa ukuran absolut atau relatif.
Ukuran absolut:
- Mengatur tulisan ke ukuran tertentu
- Tidak mengizinkan pengguna mengubah ukuran tulisan di semua browser
- Ukuran absolut berguna saat ukuran fisik diketahui
Ukuran relatif:
- Mengatur ukuran relatif terhadap elemen sekitarnya
- Memungkinkan pengguna mengubah ukuran teks di browser
Mengatur Ukuran Huruf Dengan Piksel
Mengatur ukuran jenis huruf dengan piksel dapat mengubah ukuran tulisan sesuai dengan kebutuhan:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lain.</p>
</body></html>Catatan: Jika menggunakan piksel, masih dapat menggunakan alat zoom untuk mengubah ukuran pada suatu halaman.
Atur Ukuran Huruf Dengan Em
Untuk mengizinkan pengguna mengubah ukuran tulisan (di menu browser), banyak developer menggunakan em sebagai pengganti piksel.
Ukuran tulisan secara default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px.
Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini: px/16=em
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Menentukan ukuran font dengan em memungkinkan browser untuk mengubah atau menyesuaikan ukuran teks.
Sayangnya, masih ada masalah dengan versi lama IE. Saat mengubah ukuran teks, teks menjadi lebih besar/lebih kecil dari yang seharusnya.</p>
</body></html>Pada contoh di atas, ukuran tulisan dalam em sama dengan contoh sebelumnya dalam piksel. Namun, dengan ukuran em, ukuran tulisan dapat disesuaikan di semua browser.
Gunakan Kombinasi Persen (%) dan Em
Solusi yang berfungsi di semua browser, adalah mengatur ukuran font secara default dalam persen untuk bagian elemen <body> :
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Menentukan ukuran font dalam persen dan em, akan membuat ukuran yang sama di semua browser, dan memungkinkan semua browser untuk mengubah atau menyesuaikan ukuran teks!</p>
</body></html>Contoh di atas menunjukkan ukuran tulisan yang sama di semua browser, dan memungkinkan semua browser memperbesar atau mengubah ukuran tulisan.
Ukuran Huruf Responsif
Ukuran tulisan dapat diatur dengan unit vw, yang berarti “viewport width”.
Dengan begitu ukuran tulisan akan mengikuti ukuran jendela browser:
Contoh
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Teks Responsif</h1>
<p style="font-size:5vw;">Ubah ukuran jendela browser untuk melihat skala ukuran teks.</p>
<p style="font-size:5vw;">Gunakan unit "vw" saat mengatur ukuran teks. 10vw akan menyetel ukuran menjadi 10% dari lebar viewport.</p>
<p>Viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport lebarnya 50cm, 1vw adalah 0,5cm.</p>
</body></html>Tutorial sebelumnya : Membuat Bayangan Pada Tulisan Dengan CSS
Tutorial setelahnya : Cara Menggunakan Google Font Dengan CSS
Semua Tutorial CSS : Tutorial CSS