Kita dapat membuat web menjadi lebih menarik dengan mengatur font/tulisan. Kita dapat memperbesar/memperkecil teks, mempertebal/mempertipis teks, mengatur jenis dan lainya. Banyak sekali jenis font yang ada.

Mengatur Ukuran Font

Kita bisa menggunakan properti font-size untuk mengatur ukuran font. Properti ini harus diisi dengan Unit CSS. Contoh:

<style>
.tulisan_besar {
    font-size: 20px;
}

.tulisan_sangat_besar {
    font-size: 72px;
}
</style>
<p class="tulisan_besar">Tulisan besar</p>
<p class="tulisan_sangat_besar">Tulisan sangat besar</p>

Menjadi:

Mengatur Ketebalan Font

Kita bisa menggunakan properti font-weight untuk mengatur ketebalan font. Nilai-nilai properti ini sebagai berikut:

• normal, font normal
• bold, font tebal
• bolder, font yang lebih tebal
• lighter, font yang lebih tipis
• 100, 200, 300, 400, 500, 600, 700, 800, 900, ketebalan berdasarkan angka. 400 sama dengan normal dan 700 sama dengan bold.

Contoh:

<style>
.tulisan_normal {
    font-weight: normal;
}

.tulisan_tebal {
    font-weight: bold;
}

.tulisan_tipis {
    font-weight: 100
}
</style>
<p class="tulisan_normal">Tulisan normal</p>
<p class="tulisan_tebal">Tulisan tebal</p>
<p class="tulisan_tipis">Tulisan tipis</p>

Menjadi:

Mengatur Jenis Font

Kita bisa menggunakan font-family untuk mengatur jenis font. Dapat diisi dengan serif, sans-serif, monospace, atau nama font. Contoh:

<style>
.tulisan_serif {
    font-family: serif;
}

.tulisan_sans_serif {
    font-family: sans-serif;
}

.tulisan_monosapce {
    font-family: monospace;
}

.tulisan_arial {
    font-family: arial;
}
</style>
<p class="tulisan_serif">Tulisan serif</p>
<p class="tulisan_sans_serif">Tulisan sans serif</p>
<p class="tulisan_monosapce">Tulisan monospace</p>

<p class="tulisan_arial">Tulisan arial</p>

Menjadi

Mengatur Gaya Font

Kita bisa menggunakan properti font-style untuk menentukan gaya font yang akan digunakan. Nilai-nilai properti ini sebagai berikut:

• normal, font normal
• italic, font miring atau italic
• oblique, mirip italic

Contoh:

<style>
.teks_normal {
    font-style: normal;
}

.teks_miring {
    font-style: italic;
}
</style>
<p class="teks_normal">Teks normal</p>
<p class="teks_miring">Teks miring</p>

Menjadi:

Font Shorthand

Kita bisa menggunakan properti font untuk mengatur properti font lainya. Sintaksnya sebagai berikut:

font: <font-style> <font-weight> <font-variant> font-size/<line-height> font-family;

Yang di dalam <> merupakan opsional

Contoh:

<style>
    .teks_1 {
        font-style: italic;
        font-weight: bold;
        font-size: 42pt;
        font-family: "Arial";
    }

    .teks_2 {
        font: italic bold 42pt "Arial";
    }
</style>

<p class="teks_1">Teks 1</p>
<p class="teks_2">Teks 2</p>

Menjadi:

Teks 1 dan Teks 2 mempunyai font yang sama walaupun menggunakan properti yang berbeda.

Kesimpulan

Jika kalian ingin memahami CSS Font lebih lanjut kalian bisa membaca tutorial CSS Font di w3schools. Sekian untuk tutorial kali ini. Selanjutnya saya akan membahas tentang CSS Box Model (Margin, Padding, Display Type dan Float). Terima kasih.