Berikut adalah contoh gaya editorial yang tersedia di situs ini. Dari heading hingga blok kode, temukan bagaimana konten Anda akan terlihat.

Headings

Tag heading adalah yang menjaga konten Anda dari kekacauan visual. Mereka membantu pembaca memahami tulisan Anda dan membantu mesin pencari menentukan konten Anda.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Callouts

Pernah ingin menambahkan styling ekstra pada informasi penting di postingan Anda? Anda bisa melakukannya dengan callout. Setiap callout dapat menyertakan emoji, teks dengan berbagai gaya dan tautan.

Quotes

Anda dapat membuat kutipan menonjol dengan gaya blockquote yang dapat diaplikasikan langsung.

“Tipografi adalah kerajinan memberikan bahasa manusia bentuk visual yang tahan lama.”

— Robert Bringhurst, The Elements of Typographic Style

Blockquote sempurna untuk menyoroti kutipan penting, testimonial, atau poin-poin utama.

Pro Tip: Gunakan blockquote dengan bijak. Ketika semua ditekankan, tidak ada yang menonjol.

Images

Setelah Anda mulai mencampur teks dan gambar secara kreatif, seluruh narasi cerita berubah. Anda dapat memadukan gambar ke dalam konten Anda dengan berbagai ukuran (normal, wide, dan full) dan menambahkan caption di mana diperlukan.

Normal size

Wide size

Gallery

Galeri gambar mendukung layout masonry yang responsif, di mana gambar ditampilkan dengan tinggi alami mereka dalam kolom yang mengalir.

Banner

Buat pernyataan dengan banner section lebar penuh di postingan dan halaman Anda. Banner dapat menyertakan judul, subjudul, warna aksen atau latar belakang gambar, dan tombol.

File

Anda dapat menambahkan file yang dapat diunduh ke postingan Anda. Upload file dapat digunakan untuk berbagi berbagai jenis konten dengan audiens Anda. File ditampilkan dengan nama dan caption kustom, seperti ini:

Lists

Unordered list

• Item nomor satu
• Item nomor dua
  • Item bersarang
  • Item bersarang lainnya
• Item terakhir

Ordered list

1. Item nomor satu
2. Item nomor dua
   1. Item bersarang
   2. Item bersarang lainnya
3. Item terakhir

Task list

• Membuat style guide
• Menambahkan contoh kode
• Review dan publikasi
• Bagikan ke komunitas

Links

Jika Anda menempelkan URL, seperti https://arifiskandar.com - URL tersebut akan otomatis menjadi tautan. Tetapi jika Anda ingin menyesuaikan teks anchor, Anda juga bisa melakukannya! Ini adalah tautan ke halaman utama.

Text Styling & Emphasis

Ada banyak cara untuk menata teks Anda:

• Teks tebal untuk penekanan kuat
• Teks miring untuk penekanan halus
• Tebal dan miring untuk dampak maksimal
• Strikethrough untuk koreksi
• inline code untuk istilah teknis
• Hyperlink untuk navigasi

Highlighting

Menyoroti teks pada halaman web dapat membantu membawa informasi penting langsung ke perhatian pembaca. Saat membuat teks yang disorot, gunakan shortcode highlight.

Highlighting text pada halaman web dapat membantu membawa informasi penting langsung ke perhatian pembaca. Saat membuat highlighting text, cukup gunakan shortcode highlight di sekitar teks Anda.

Responsive Tables

Tabel responsif akan menampilkan scroll bar horizontal jika layar terlalu kecil untuk menampilkan konten penuh.

Code

Kode dapat disajikan inline, seperti code. Saat membuat teks kode, cukup tambahkan ` sebelum dan sesudah teks Anda.

Inline Code

Gunakan const variable = "value" untuk snippet kode inline dalam paragraf.

Code Blocks

// Fungsi greeting sederhana
function greet(name) {
    const message = `Hello, ${name}!`;
    console.log(message);
    return message;
}

greet("World");

/* Styling CSS modern */
.typography-guide {
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.7;
    color: #1a1a1a;
}

.dark-mode .typography-guide {
    color: #f5f5f5;
}

<!-- Struktur HTML semantik -->
<article class="post">
    <header>
        <h1>Style Guide</h1>
        <time datetime="2025-12-05">5 Desember 2025</time>
    </header>
    <main>
        <p>Konten Anda di sini...</p>
    </main>
</article>

Horizontal Rules

Gunakan horizontal rules untuk memisahkan bagian utama:

Seperti yang di atas. Mereka menciptakan jeda visual tanpa mengganggu alur.

Special Characters & Symbols

Tipografi juga mencakup penggunaan karakter khusus yang tepat:

• Em dash — untuk interupsi
• En dash – untuk rentang (1–10)
• Ellipsis… untuk pikiran yang menggantung
• “Smart quotes” bukan “straight quotes”
• Apostrophe yang tepat: it’s, don’t, won’t
• Matematika: × ÷ ± ≠ ≤ ≥ ∞
• Panah: → ← ↑ ↓ ↔

Buttons

Tombol digunakan untuk memicu aksi atau navigasi. Berikut adalah beberapa gaya tombol yang tersedia:

<!-- Primary -->
<a href="#" class="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
    Primary Button
</a>

<!-- Secondary -->
<a href="#" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition-colors dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
    Secondary Button
</a>

<!-- Outline -->
<a href="#" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
    Outline Button
</a>

Putting It All Together

Tipografi yang baik melayani pembaca Anda. Ini menciptakan hierarki, menetapkan ritme, dan menjamin kejelasan. Baik Anda menulis tutorial teknis atau esai pribadi, alat tipografi ini membantu kata-kata Anda beresonansi.

Ingat: Tipografi terbaik adalah yang tidak terlihat. Ketika pembaca memperhatikan pilihan font Anda, ada yang salah.

Tips Cepat untuk Tipografi Lebih Baik

1. Batasi font — gunakan maksimal 2-3 typeface
2. Perhatikan ukuran — 45-75 karakter per baris adalah ideal
3. Buat kontras — gunakan ukuran, berat, dan warna dengan sengaja
4. White space adalah teman Anda — biarkan konten Anda bernafas
5. Uji di semua perangkat — apa yang terlihat bagus di desktop mungkin gagal di mobile

Terima kasih telah menjelajahi style guide ini. Sekarang pergi dan buat konten yang indah dan mudah dibaca!