Tips Belajar CSS Typography Bag. 1
Typography adalah seni untuk mengatur huruf atau teks untuk menjadi lebih menarik serta mudah dibaca secara visual. Teks merupakan salah satu konten yang utama dari sebuah website, berbagai elemen pada web membutuhkan teks misalnya teks deskripsi pada elemen multimedia gambar dan vidio, menu navigasi juga terdirid dari berbagai teks.
Pada tutorial ini kita akan fokus membahas pada penggunaan property CSS berkaitan dengan typography atau teks. Selain itu akan membahas tentang dasar property CSS seperti nilai piel, em, %, nilai warna atau color.
Property font-family
Proprety ini dugunakan untuk mengatur jenis font, dan nilai dari property ini adalah nama font yang akan dugunakan contoh penulisan sebagai berikut :
P {
font-family: Arial;
}
Kode CSS diatas akan merubah jenis font arial pada semua paragraf didalam website, property font-family akan mencari didalam komputer klien dan menampilkan menampilkan jenis font Arial.
Jika di komputer clien tidak memiliki jenis font arial maka browser akan menentukan sesuai dengan setingan jenis font default
Untuk mengantisipasi tidak adanya font tersebut maka kita bisa memberikan alternatif font pengganti seperti berikut:
P {
font-family: Arial, sans-serif, Helvetica;
}
Kali ini kode CSS memberikan pilihan kepada web browser dengan mencari seluruh tag paragraf <p> apabila arial tidak ditemukan maka diganti dengan sans-serif, apabila tidak ada juka maka akan menampilkan jenis font Helvetica.
Generic Font
Generic font adalah jenis font yang umum digunakan pada pilihan font terakhir dengan menambahkan kata serif bukanlah nama font tetapi jenis font inilah yang biasa disebut Generic Font. Contoh sans-serif, serif, monospace, cursive, fantasi.
Buat file latihan, masukan kode CSS berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS, Font Typographi</title>
<style>
p.arial{
font-family: Arial, Helvetica, sans-serif;
}
p.times{
font-family: "Times New Roman", Georgia, serif;
}
p.sans-serif{
font-family: sans-serif;
}
p.serif{
font-family: serif;
}
p.monospace{
font-family: monospace;
}
p.cursive{
font-family: cursive;
}
p.fantasy{
font-family: fantasy;
}
</style>
</head>
<body>
<p class="arial">Contoh Paragraf dengan jenis font Arial</p>
<p class="times">Contoh Paragraf dengan jenis font Times New Roman</p>
<p class="sans-serif">Contoh Paragraf dengan jenis sans-serif</p>
<p class="serif">Contoh Paragraf dengan jenis serif</p>
<p class="monospace">Contoh Paragraf dengan jenis monospace</p>
<p class="cursive">Contoh Paragraf dengan jenis font cursive</p>
<p class="fantasy">Contoh Paragraf dengan jenis font fantasy</p>
</body>
</body>
</html>
Berikut hasil dari kode CSS diatas :
Web Safe Font, Font yang banyak digunakan.
Font jenis ini banyak dan aman untuk digunakan karena tersedia diberbagai sistem operasi, beberapa font familly yang sering dugunakan :
• Georgia, serif
• “Palatino Linotype”, “Book Antiqua”, Palatino, serif
• “Times New Roman”, Times, serif
• Arial, Helvetica, sans-serif
• “Lucida Sans Unicode”, “Lucida Grande”, sans-serif
• Tahoma, Geneva, sans-serif
• “Courier New”, Courier, monospace
• “Lucida Console”, Monaco, monospace
Ok sekian dulu tutorial tentang font typography, ikuti terus blog ilmu web, akan ada nantinya tulisan dan tutorial menarik lanjutan tentang CSS Typography untuk mengatur ukuran pada font atau Property Font-size dan mengatur Warna Font pada CSS, semoga bermanfaat, salam sukses.
