CSS Dasar #13 - Typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing

byFerdian Rahabista -
0

Typography adalah seni dan teknik mengatur huruf agar teks mudah dibaca dan enak dipandang. Di CSS, kita memiliki berbagai properti untuk mengontrol tampilan teks. Menguasai typography adalah kunci utama untuk menciptakan website yang nyaman dibaca dan profesional.

Mengapa Typography Penting?

Typography yang baik mempengaruhi:

  • Keterbacaan (Readability) → seberapa mudah teks dibaca
  • Pengalaman pengguna (UX) → pengguna betah membaca konten Anda
  • Kesan profesional → website terlihat lebih kredibel
  • Aksesibilitas → memudahkan pengguna dengan kebutuhan khusus
Properti Typography yang Akan Dipelajari:
- font-family → jenis huruf
- font-size → ukuran huruf
- font-weight → ketebalan huruf
- font-style → gaya huruf (miring/normal)
- line-height → jarak antar baris
- letter-spacing → jarak antar huruf

1. font-family (Jenis Huruf)

font-family menentukan jenis huruf yang digunakan. Kita bisa mendaftarkan beberapa font sebagai fallback (cadangan) jika font utama tidak tersedia.

Contoh:

<style>
    .serif { font-family: Georgia, 'Times New Roman', serif; }
    .sans-serif { font-family: Arial, Helvetica, sans-serif; }
    .monospace { font-family: 'Courier New', Courier, monospace; }
    .cursive { font-family: 'Brush Script MT', cursive; }
</style>

<p class="serif">Ini font serif (Georgia)</p>
<p class="sans-serif">Ini font sans-serif (Arial)</p>
<p class="monospace">Ini font monospace (Courier New)</p>
<p class="cursive">Ini font cursive (Brush Script)</p>

Hasilnya:

Ini font serif (Georgia)

Ini font sans-serif (Arial)

Ini font monospace (Courier New)

Ini font cursive (Brush Script)

Kategori Font Family:

Kategori Contoh Font Kesan
Serif Georgia, Times New Roman, Garamond Klasik, formal, elegan Sans-serif Arial, Helvetica, Verdana, Roboto Modern, bersih, mudah dibaca di layar Monospace Courier New, Consolas, Monaco Setiap huruf sama lebar (cocok untuk kode) Cursive Brush Script, Comic Sans MS Terlihat seperti tulisan tangan Fantasy Copperplate, Papyrus Dekoratif, artistik
Tips font-family:
  • Selalu sertakan font fallback (misal: sans-serif) di akhir daftar font
  • Nama font dengan spasi harus diapit tanda kutip (misal: 'Times New Roman')
  • Untuk website modern, gunakan Google Fonts seperti Poppins, Roboto, Open Sans

2. font-size (Ukuran Huruf)

font-size menentukan besar kecilnya huruf. Bisa menggunakan berbagai satuan: px, rem, em, %, vw, dll.

Contoh:

<style>
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .large { font-size: 20px; }
    .xlarge { font-size: 32px; }
    .rem-example { font-size: 1.5rem; } /* 1.5 x 16px = 24px */
</style>

font-size: 12px (kecil)

font-size: 16px (normal, default)

font-size: 20px (besar)

font-size: 32px (sangat besar)

Perbandingan Satuan font-size:

Satuan Penjelasan Kapan Pakai?
px Pixel (absolut) Paling umum, mudah dipahami
rem Relatif terhadap root (biasanya 16px) Disarankan untuk aksesibilitas
em Relatif terhadap parent Untuk komponen yang skalanya proporsional
% Persen dari parent Responsif
vw 1% dari lebar viewport Typography responsif (teks menyesuaikan layar)
Rekomendasi font-size:
  • Body text: 16px atau 1rem (ukuran default browser)
  • Heading h1: 32px (2rem), h2: 28px (1.75rem), h3: 24px (1.5rem)
  • Gunakan rem untuk aksesibilitas (pengguna bisa mengubah ukuran font di browser)

3. font-weight (Ketebalan Huruf)

font-weight mengatur ketebalan huruf. Nilai bisa berupa kata kunci atau angka.

Contoh:

<style>
    .light { font-weight: 300; }
    .normal { font-weight: 400; }
    .medium { font-weight: 500; }
    .bold { font-weight: 700; }
    .extra-bold { font-weight: 800; }
</style>

font-weight: 300 (light)

font-weight: 400 (normal)

font-weight: 500 (medium)

font-weight: 700 (bold)

font-weight: 800 (extra bold)

Nilai font-weight:

Nilai Kata Kunci Penjelasan
100-300 light Tipis
400 normal Normal (default)
500-600 medium, semi-bold Sedang
700 bold Tebal
800-900 extra-bold, black Sangat tebal

4. font-style (Gaya Huruf)

font-style mengatur apakah teks miring atau normal.

Contoh:

<style>
    .normal { font-style: normal; }
    .italic { font-style: italic; }
    .oblique { font-style: oblique; }
</style>

<p class="normal">font-style: normal (normal)</p>
<p class="italic">font-style: italic (miring)</p>
<p class="oblique">font-style: oblique (miring versi lain)</p>

font-style: normal (normal)

font-style: italic (miring)

font-style: oblique (miring versi lain)

Catatan font-style:
- italic dan oblique terlihat mirip, tapi italic menggunakan versi miring dari font, sedangkan oblique adalah versi miring buatan browser.
- Untuk teks biasa, gunakan normal; untuk penekanan, gunakan italic.

5. line-height (Jarak Antar Baris)

line-height mengatur jarak vertikal antar baris teks. Ini sangat penting untuk kenyamanan membaca.

Contoh:

<style>
    .tight { line-height: 1.2; }
    .normal { line-height: 1.5; }
    .relaxed { line-height: 1.8; }
    .spaced { line-height: 2.5; }
</style>

<p class="tight">line-height: 1.2 (rapat). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
<p class="normal">line-height: 1.5 (normal). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
<p class="relaxed">line-height: 1.8 (lega). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>

line-height: 1.2 (rapat). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

line-height: 1.5 (normal). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

line-height: 1.8 (lega). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

Rekomendasi line-height:
  • Body text: 1.5 (tanpa satuan) agar proporsional dengan ukuran font
  • Heading: 1.2 - 1.3 (lebih rapat)
  • Jangan gunakan satuan px untuk line-height, gunakan angka tanpa satuan agar lebih fleksibel

6. letter-spacing (Jarak Antar Huruf)

letter-spacing mengatur jarak antar huruf (kerning). Berguna untuk efek tertentu pada heading.

Contoh:

<style>
    .normal-spacing { letter-spacing: normal; }
    .wide-spacing { letter-spacing: 2px; }
    .wider-spacing { letter-spacing: 5px; }
    .tight-spacing { letter-spacing: -1px; }
</style>

<h2 class="normal-spacing">Letter Spacing Normal</h2>
<h2 class="wide-spacing">Letter Spacing 2px</h2>
<h2 class="wider-spacing">Letter Spacing 5px</h2>
<h2 class="tight-spacing">Letter Spacing -1px</h2>

Letter Spacing Normal

Letter Spacing 2px

Letter Spacing 5px

Letter Spacing -1px

Tips letter-spacing:
  • Gunakan letter-spacing secukupnya untuk heading, jangan untuk body text
  • Nilai negatif (-1px) membuat huruf lebih rapat
  • Cocok untuk efek heading yang mewah atau elegan

Contoh Proyek: Artikel Blog dengan Typography

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typography CSS - Artikel Blog</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 40px auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        
        /* ========== TYPOGRAPHY STYLING ========== */
        .article-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 50px 40px;
            text-align: center;
        }
        
        .article-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.5px;
            margin-bottom: 15px;
        }
        
        .article-meta {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.9;
            letter-spacing: 0.5px;
        }
        
        .article-content {
            padding: 40px;
        }
        
        /* Heading styles */
        .article-content h2 {
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.3px;
            margin: 1.5em 0 0.5em;
            color: #1e293b;
        }
        
        .article-content h3 {
            font-size: 1.4rem;
            font-weight: 500;
            line-height: 1.3;
            margin: 1.2em 0 0.5em;
            color: #334155;
        }
        
        /* Body text */
        .article-content p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.7;
            margin-bottom: 1.2em;
            color: #475569;
        }
        
        /* Special paragraph styles */
        .intro {
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.6;
            color: #334155;
            border-left: 4px solid #3b82f6;
            padding-left: 20px;
            margin: 20px 0;
        }
        
        /* Quote style */
        .quote {
            font-style: italic;
            font-weight: 400;
            line-height: 1.6;
            color: #64748b;
            border-left: 3px solid #cbd5e1;
            padding: 15px 25px;
            margin: 25px 0;
            background: #f8fafc;
            border-radius: 0 12px 12px 0;
        }
        
        /* Code block */
        pre {
            background: #1e1e2e;
            color: #fff;
            padding: 20px;
            border-radius: 12px;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.85rem;
            line-height: 1.5;
            margin: 20px 0;
        }
        
        code {
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.85rem;
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            color: #ef4444;
        }
        
        pre code {
            background: transparent;
            color: #fff;
            padding: 0;
        }
        
        /* Info box */
        .info-box {
            background: #eef2ff;
            padding: 25px;
            border-radius: 16px;
            margin: 30px 0;
        }
        
        .info-box h4 {
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .info-box ul {
            margin-left: 20px;
        }
        
        .info-box li {
            margin-bottom: 8px;
            color: #475569;
        }
        
        footer {
            background: #1e293b;
            color: #94a3b8;
            text-align: center;
            padding: 20px;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }
        
        @media (max-width: 768px) {
            .article-header h1 { font-size: 1.8rem; }
            .article-content { padding: 25px; }
            .article-content h2 { font-size: 1.5rem; }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="article-header">
            <h1>Menguasai Typography di CSS</h1>
            <div class="article-meta">Ditulis oleh Admin | 15 April 2024 | 5 menit membaca</div>
        </div>
        
        <div class="article-content">
            <p class="intro">Typography adalah fondasi dari desain web yang baik. Teks yang mudah dibaca membuat pengguna betah berlama-lama di website Anda.</p>
            
            <h2>Mengapa Typography Penting?</h2>
            <p>Typography yang baik tidak hanya membuat teks terlihat cantik, tetapi juga meningkatkan keterbacaan dan pengalaman pengguna. Lebih dari 95% informasi di internet disajikan dalam bentuk teks, sehingga mengatur typography dengan benar adalah investasi berharga.</p>
            
            <h2>Properti CSS untuk Typography</h2>
            <p>CSS menyediakan berbagai properti untuk mengatur tampilan teks. Berikut adalah properti yang paling sering digunakan:</p>
            
            <h3>1. font-family</h3>
            <p>Menentukan jenis huruf yang digunakan. Selalu sertakan font fallback untuk memastikan teks tetap terbaca jika font utama tidak tersedia.</p>
            
            <h3>2. font-size dan line-height</h3>
            <p>Ukuran font dan jarak antar baris bekerja sama untuk menciptakan keterbacaan yang optimal. Rekomendasi umum: font-size 16px dengan line-height 1.5 untuk body text.</p>
            
            <div class="quote">
                "Typography adalah seni membuat teks tidak hanya terbaca, tetapi juga enak dipandang dan mudah dipahami."
            </div>
            
            <h3>3. font-weight dan font-style</h3>
            <p>Ketebalan dan gaya huruf membantu menciptakan hierarki visual. Gunakan <code>font-weight: bold</code> untuk penekanan dan <code>font-style: italic</code> untuk kutipan atau istilah asing.</p>
            
            <h3>4. letter-spacing</h3>
            <p>Jarak antar huruf bisa membuat heading terlihat lebih elegan. Gunakan secukupnya, jangan berlebihan.</p>
            
            <pre><code>/* Contoh kombinasi typography yang baik */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #334155;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}</code></pre>
            
            <div class="info-box">
                <h4>Properti Typography yang Digunakan di Halaman Ini:</h4>
                <ul>
                    <li><code>font-family</code> → 'Segoe UI', sans-serif</li>
                    <li><code>font-size</code> → 1rem (16px) untuk body, 2.5rem untuk h1</li>
                    <li><code>font-weight</code> → 400 (normal), 500 (medium), 600 (semi-bold), 700 (bold)</li>
                    <li><code>font-style</code> → italic untuk quote</li>
                    <li><code>line-height</code> → 1.7 untuk body, 1.2 untuk heading</li>
                    <li><code>letter-spacing</code> → -0.5px untuk heading, 0.5px untuk meta</li>
                </ul>
                <h4 style="margin-top: 15px;">Rekomendasi Ukuran Font:</h4>
                <ul>
                    <li>Body text: 16px / 1rem (line-height: 1.5 - 1.7)</li>
                    <li>Heading h1: 32px / 2rem (line-height: 1.2)</li>
                    <li>Heading h2: 28px / 1.75rem (line-height: 1.3)</li>
                    <li>Heading h3: 24px / 1.5rem (line-height: 1.3)</li>
                    <li>Small text / footer: 12px - 14px (line-height: 1.4)</li>
                </ul>
            </div>
        </div>
        
        <footer>
            <p>© 2024 - Belajar Typography CSS | font-family, font-size, font-weight, font-style, line-height, letter-spacing</p>
        </footer>
    </div>

</body>
</html>

Hasil visual halaman artikel:

Menguasai Typography di CSS

Ditulis oleh Admin | 15 April 2024

Typography adalah fondasi dari desain web yang baik.

CSS menyediakan berbagai properti untuk mengatur tampilan teks seperti font-family, font-size, line-height, dan letter-spacing.

Properti yang Digunakan: font-family, font-size, font-weight, font-style, line-height, letter-spacing

Tabel Ringkasan Properti Typography

Properti Fungsi Contoh Nilai Rekomendasi
font-family Jenis huruf Arial, 'Segoe UI', sans-serif Sertakan fallback
font-size Ukuran huruf 16px, 1rem, 1.5em Body: 16px/1rem
font-weight Ketebalan huruf normal, bold, 400, 700 Heading: 600-700
font-style Gaya huruf normal, italic, oblique italic untuk penekanan
line-height Jarak antar baris 1.5, 1.6, 1.8 Body: 1.5 - 1.7
letter-spacing Jarak antar huruf normal, 1px, -0.5px Heading: -0.5px

Kesalahan Umum Pemula

  • Lupa font fallback → Jika font utama tidak tersedia, browser akan menggunakan font default yang mungkin tidak sesuai.
  • Menggunakan px untuk line-height → Gunakan angka tanpa satuan (1.5) agar proporsional dengan ukuran font.
  • Font size terlalu kecil → Ukuran minimal untuk body text adalah 14px, idealnya 16px.
  • Letter spacing berlebihan → Terlalu banyak jarak antar huruf membuat teks sulit dibaca.
  • Lupa menambahkan unit pada font-size → font-size: 16 (salah) vs font-size: 16px (benar).
  • Nama font dengan spasi tidak pakai kutip → font-family: Times New Roman (salah) vs font-family: 'Times New Roman' (benar).
Debugging Tips:
  • Buka Developer Tools (F12) → inspect teks → lihat tab Computed → cek nilai font-family, font-size, line-height, dll
  • Jika font tidak berubah, cek apakah selector CSS sudah tepat
  • Pastikan tidak ada CSS lain yang menimpa (lebih spesifik)

Latihan Singkat

  1. Buat halaman dengan 3 paragraf, masing-masing dengan font-family berbeda (serif, sans-serif, monospace)
  2. Buat heading dengan font-weight: 300, 400, 700, 900
  3. Buat artikel dengan line-height: 1.2 (rapat) dan 1.8 (lega), bandingkan keterbacaannya
  4. Buat heading dengan letter-spacing: 2px, 5px, -1px
  5. Kombinasikan semua properti typography dalam satu halaman artikel sederhana

Intisari Hari Ini

  • font-family → jenis huruf (sertakan fallback)
  • font-size → ukuran huruf (gunakan rem untuk aksesibilitas)
  • font-weight → ketebalan huruf (400 normal, 700 bold)
  • font-style → gaya huruf (normal, italic)
  • line-height → jarak antar baris (1.5 untuk body text)
  • letter-spacing → jarak antar huruf (untuk heading)
  • Typography yang baik meningkatkan keterbacaan dan pengalaman pengguna
Tantangan: Buat sebuah Halaman Landing Page dengan typography yang menarik! Persyaratan:
  • Gunakan Google Fonts (misal: Poppins untuk heading, Open Sans untuk body)
  • Hero section dengan heading besar (font-size: 3rem - 4rem, letter-spacing: -1px)
  • Body text dengan font-size 16px, line-height 1.6, font-weight 400
  • Subheading dengan font-weight 500 atau 600
  • Quote atau testimoni dengan font-style italic
  • Tombol CTA dengan font-weight bold
  • Footer dengan font-size kecil (12px - 14px) dan letter-spacing 0.5px
  • Tambahkan kotak penjelasan yang mendokumentasikan semua properti typography yang digunakan

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #12 - Gradient: Linear Gradient dan Radial Gradient
Artikel Selanjutnya: CSS Dasar #14 - Menggunakan Google Fonts di CSS (Lanjutan)

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال