Belajar CSS Part 13 - Font

Tutorial CSS3

CSS Fonts

Properti font pada CSS mendefinisikan font-family, ketebalan, ukuran (size), dan teks style.

Perbedaan antara Fonts Serif dan Sans-serif:

Dalam CSS, ada dua jenis nama font family:

generik family - kelompok font family dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
font family - font family tertentu (seperti "Times New Roman" atau "Arial")

Font Family

Jenis font pada teks diatur dengan menggunakan properti font-family.

Properti font-family harus memiliki beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya, dan seterusnya.

Mulailah dengan font yang kita inginkan, dan akhiri dengan generik family, untuk membiarkan browser memilih font yang serupa di generik family, jika tidak ada font lain yang tersedia.

Catatan : Jika nama font family lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".

Apabila font family sudah lebih dari satu yang ditentukan dalam daftar, harus dipisahkan dengan koma.

Contoh


p {
    font-family: "Times New Roman", Times, serif;
}

Font Style

Properti font-style ini kebanyakan digunakan untuk menentukan teks miring.

Properti ini memiliki tiga nilai:

normal - Teks ditampilkan biasanya
italic - Teks ditampilkan dalam huruf miring
oblique - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)

Contoh

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="normal">Paragraf ini memiliki teks yang normal.</p>
<p class="italic">Paragraf ini memiliki teks yang miring.</p>
<p class="oblique">Paragraf ini memiliki teks yang oblique.</p>

</body>
</html>

Hasilnya:

Font Size

Properti font-size digunakan untuk menetapkan ukuran teks.

Mampu mengelola ukuran teks sangat penting dalam desain web. Namun, kita sebaiknya tidak menggunakan penyesuaian ukuran font 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 font-size bisa menjadi ukuran absolute (mutlak), atau relative (relatif).

Ukuran absolut:

Mengatur teks ke ukuran tertentu
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
ukuran absolut berguna ketika ukuran fisik dari output diketahui

Ukuran relatif:

Mengatur ukuran relatif terhadap elemen sekitarnya
Memungkinkan pengguna untuk mengubah ukuran teks dalam browser

Catatan: Jika kita tidak menentukan ukuran font, ukuran default untuk teks normal, seperti paragraf, adalah 16px (16px = 1em).

Mengatur Ukuran Font Dengan Pixel

Mengatur ukuran teks dengan piksel memberikan kita kendali penuh atas ukuran teks.

Contoh

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah sebuah paragraf lain.</p>

</body>
</html>

Hasilnya:

Mengatur Ukuran Font Dengan Em

Untuk memungkinkan pengguna dalam mengubah ukuran teks (dalam menu browser), banyak developer menggunakan em daripada piksel.

Catatan: Menggunakan em direkomendasikan penggunaannya.

1em sama dengan ukuran font default saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default dari 1em adalah 16px.

Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini: pixels/16=em

Contoh

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 */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

<p>Ini adalah sebuah paragraf.</p>

<p>Menentukan ukuran font di em memungkinkan semua browser utama untuk mengubah ukuran teks. Sayangnya, masih ada masalah dengan IE versi lama. Saat mengubah ukuran teks, itu menjadi lebih besar / lebih kecil dari ukuran seharusnya.</p>

</body>
</html>

Hasilnya:

Dalam contoh di atas, ukuran teks dalam em adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan menggunakan ukuran em, memungkinkan kita untuk menyesuaikan ukuran teks dalam semua browser.

Sayangnya, masih ada masalah dengan versi IE. Teks menjadi lebih besar dari yang seharusnya ketika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.

Menggunakan Kombinasi Persen dan Em

Kita juga bisa mengkombinasikan persen (%) dan em dalam menentukan ukuran huruf.

Contoh berikut ini menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks.

Contoh

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

<p>Ini adalah sebuah paragraf.</p>
<p>Contoh ini adalah menentukan ukuran font dalam persen dan em dan ukuran teks yang dihasilkan adalah sama di semua browser utama, dan memungkinkan semua browser mengubah ukuran teks</ p>

</body>
</html>

Hasilnya:

Font Weight

Properti font-weight digunakan untuk menentukan berat (ukuran ketebalan) font.

Contoh

p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="normal">Ini adalah sebuah paragraf.</p>
<p class="light">Ini adalah sebuah a paragraf.</p>
<p class="thick">Ini adalah sebuah paragraf.</p>
<p class="thicker">Ini adalah sebuah paragraf.</p>

</body>
</html>

Hasilnya:

Responsif Ukuran Font

Ukuran teks juga dapat diatur dengan menggunakan satuan vw, yang berarti "viewport width". Dengan cara itu ukuran teks 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 menentukan ukuran teks. 10vw akan mengatur ukuran hingga 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>

Hasilnya:

Font Variant

Properti font-variant digunakan untuk menentukan apakah teks harus ditampilkan dalam huruf kecil.

Dalam huruf small-caps, semua huruf kecil dikonversi menjadi huruf besar. Namun, huruf besar yang dikonversi muncul dalam ukuran font yang lebih kecil dari huruf besar asli dalam teks.

Contoh

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="normal">Nama saya Octavianus Hasan.</p>
<p class="small">Nama saya Octavianus Hasan.</p>

</body>
</html>

Hasilnya: