Jenis font mengacu pada klasifikasi bentuk huruf (serif, sans serif, monospace, dan lainnya) serta file dan aturan tipografi yang Anda pakai di web, aplikasi, atau cetak. Memilih font menyangkut hierarki, keterbacaan, aksesibilitas, identitas visual, dukungan bahasa, lisensi, dan waktu muat halaman—not hanya tampilan.
Jadi artikel ini merangkum pengertian font dan typeface, klasifikasi utama, ukuran dan spacing, format file, variable font, sumber unduhan, lisensi, pairing, konversi, self-hosting, serta dampak performa. Panduan simulator pairing tetap terpisah; kami arahkan lewat internal link, bukan menduplikasi daftar tool.
Highlight
Jenis Font: Pengertian, Klasifikasi, Format, Lisensi & Cara Menggunakannya
- Typeface ≠ font: satu family bisa punya banyak face (Regular, Italic, Bold).
- Serif cocok editorial panjang; sans serif dominan UI/web; monospace untuk kode.
- Web modern: utamakan WOFF2, subset hati-hati, cek lisensi web/self-host.
- Variable font fleksibel; ukuran file tetap bergantung glyph dan axis.
- Pairing & uji axis visual → artikel simulator font pairing (internal link).
- Performa: batasi family/weight,
font-display, audit LCP setelah deploy.
Apa itu font dan typeface?
Typeface adalah desain huruf sebagai sistem—contoh konkretnya satu desain “Inter”. Font adalah implementasi file face tertentu: Inter Regular 400, Inter Italic 400, Inter SemiBold 600. Font family mengelompokkan face terkait; font face adalah satu file atau instance dengan kombinasi weight, width, dan style.
Weight umum mengikuti skala 100–900 (Thin sampai Black). Style mencakup normal, italic, atau oblique; width atau stretch (condensed/expanded) memengaruhi density UI. Namun browser bisa mensintesis bold/italic bila file tidak ada—tampilan sering kurang rapi. Lebih aman Anda muat file weight yang benar-benar Anda pakai di CSS.
Jenis font dan contohnya
Bagian ini menjawab “jenis font apa saja?” untuk keputusan desain. Fokusnya ciri, keterbacaan, dan konteks pakai—not sejarah panjang.
Serif dan sans serif
Serif punya goresan kecil di ujung stroke; karakter sering formal, editorial, atau terasa “cetak”. Cocok untuk artikel panjang, buku, luxury branding, sebagian korporat tradisional. Meski x-height rendah, serif bisa terasa kecil di layar kecil bila line-height ketat. Sans serif tanpa serif; bentuk lebih geometris atau humanist. Kategori ini dominan di UI, website, dashboard SaaS, aplikasi mobile, dan corporate modern. Geometric sans terasa tech; humanist sans sering nyaman untuk paragraf panjang di web.
Slab serif, monospace, script, display, dan decorative
Slab serif memakai serif tebal/blok—impact kuat untuk headline atau branding bold. Monospace memakai lebar glyph seragam; standar untuk source code, terminal, dan tabel angka teknis. Pastikan pasangan seperti 0/O dan 1/l/I tetap terbaca. Script meniru kaligrafi; handwriting lebih informal—keduanya jarang untuk body panjang. Display, decorative, atau blackletter cocok untuk ukuran besar atau aksen terbatas—hindari memakainya sebagai body default.
Selanjutnya subklasifikasi serif (old style, transitional, didone) dan sans (grotesque, neo-grotesque) membantu membandingkan mood: didone serif kontras tinggi untuk fashion editorial; old style serif lembut untuk teks panjang. Pilih berdasarkan kontras dengan brand, bukan label akademis saja.
Ukuran, spacing, dan keterbacaan
font-size di CSS mengatur em square tipografi, bukan tinggi piksel glyph literal—dua font 16px bisa terlihat berbeda lantaran x-height, ascender, dan descender. Satuan umum: px stabil di UI; rem relatif root (baik untuk skala aksesibilitas); em relatif parent. Fluid typography memakai clamp(min, preferred, max) supaya heading/body menyesuaikan viewport tanpa lompat breakpoint keras.
Line-height (leading), letter-spacing (tracking), dan kerning (jarak pasangan glyph) menentukan keterbacaan sama pentingnya dengan ukuran. Measure (panjang baris) ideal sekitar 45–75 karakter untuk prosa—lebar kolom penuh di desktop sering perlu max-width. Legibility berarti mudah dibedakan per huruf; readability berarti nyaman dibaca dalam blok panjang. Kontras warna, weight, all caps panjang, font condensed, atau decorative body merusak keduanya.
Anatomi huruf—baseline, x-height, ascender, descender, bowl, counter—menjelaskan mengapa dua family dengan ukuran CSS sama terasa beda “besar”. Baseline dan x-height sering menjadi alasan Anda perlu menaikkan line-height saat ganti font body.
Variable font dan fitur OpenType
Variable font menyimpan variasi (weight, width, slant, optical size) dalam satu resource melalui axis standar seperti wght, wdth, slnt, opsz. Fleksibel untuk animasi tipografi atau mengurangi jumlah file statis—namun ukuran total tetap bergantung subset glyph dan range axis, bukan otomatis lebih ringan dari set statis minimal.
Jadi CSS memakai range font-weight, font-stretch, font-variation-settings, dan font-optical-sizing. OpenType features (ligatures, small caps, tabular numerals untuk dashboard) aktif lewat font-feature-settings atau property khusus bila browser mendukung. Untuk mencoba axis dan pairing secara visual, gunakan font pairing dan variable font simulator gratis—bukan daftar tool panjang di sini.
Format file font
Website modern sebaiknya mengutamakan WOFF2 (kompresi untuk @font-face). WOFF masih relevan untuk legacy. TTF/OTF umum di desktop dan sebagai sumber konversi; OpenType adalah spesifikasi yang bisa membungkus outline TrueType atau CFF. Namun EOT dan SVG font termasuk legacy web. TTC/OTC menggabungkan beberapa face dalam satu koleksi.
TIFF bukan format font—itu raster image; jangan konversi atau host TIFF sebagai webfont.
| Format | Kegunaan utama | Web | Desktop/print | Status |
|---|---|---|---|---|
| WOFF2 | Webfont utama | Ya | Jarang sumber final | Standar modern |
| WOFF | Webfont kompatibilitas | Ya | Jarang | Masih relevan |
| TTF | Universal desktop | Sumber konversi | Ya | Umum |
| OTF | OpenType features | Sumber konversi | Ya | Umum |
| EOT | Legacy IE | Tidak relevan baru | Tidak | Usang |
| SVG font | Legacy web | Tidak disarankan | Tidak | Usang |
Sebelum production, pelajari spesifikasi WOFF2 W3C dan panduan @font-face MDN saat Anda menulis deklarasi load font.
Provider, unduhan, dan lisensi
Hosted service (Google Fonts, Adobe Fonts, Bunny Fonts) memudahkan prototipe; trade-offnya request vendor eksternal, kebijakan privasi, dan ketergantungan CDN. Self-hosting memberi kontrol cache, CSP font-src, dan CORS—asalkan lisensi mengizinkan embedding web.
Selanjutnya sumber unduhan yang sering developer pakai: Fontsource (banyak family Google dan non-Google, file per weight/subset, npm @fontsource/<font>—zip API tidak selalu menyertakan CSS); Fontshare (family ITF, paket WEB dengan woff2 dan CSS, unduh family penuh); Font Squirrel (koleksi gratis, Webfont Generator untuk konversi/subset—kit lama bisa tanpa woff2, generator bisa menghasilkan woff2); google-webfonts-helper untuk mirror Google Fonts self-host.
Namun label “gratis” ≠ bebas untuk logo, app embed, redistribusi, atau broadcast. Periksa SIL OFL, Apache, atau EULA proprietary per family: commercial use, modifikasi, subset, self-host, dan client work. Jangan simpulkan izin dari nama situs hosting saja.
Memilih font menurut penggunaan
Untuk website, prioritaskan legibility body, cakupan glyph bahasa Indonesia/Latin extended, weight yang benar-benar UI pakai, WOFF2, dan lisensi web/self-host. Dashboard/SaaS butuh tabular numerals, label kecil, dan density yang tetap terbaca. Kode membutuhkan monospace dengan glyph distinction. Print/buku menuntut lisensi embed cetak dan optical size. Logo menuntut izin trademark/modifikasi terpisah dari lisensi webfont. Poster/campaign boleh memakai display ekspresif karena teks pendek.
Tipografi selaras dengan gaya layout lebih luas—lihat variasi gaya desain website modern bila Anda menyelaraskan font dengan mood visual halaman. Stack WordPress atau Laravel memengaruhi cara asset font di-enqueue; bandingkan alur WordPress vs Laravel untuk website bila Anda memilih platform sebelum mengunci typography system.
Font pairing: prinsip singkat
Pairing efektif menggabungkan kontras (serif heading + sans body, atau sebaliknya) tanpa bentrok x-height/weight. Satu display font + satu neutral body sering cukup; tiga family sekaligus jarang perlu kecuali design system besar. Tetapi uji paragraf panjang bahasa Indonesia, angka, dan CTA sebelum commit.
Untuk simulator interaktif dan variable font axes, buka simulator font pairing—artikel ini sengaja tidak menduplikasi daftar delapan tool tersebut.
Konversi, subsetting, dan self-host di website
Sebelum subset, ingat proses ini menghapus glyph tidak terpakai untuk mengecilkan file; risikonya karakter/huruf asing, nama, atau bahasa kedua hilang. Jangan subset agresif tanpa audit konten nyata.
Konverter web yang umum: Transfonter (zip berisi font, CSS @font-face, demo, subsetting—batas upload cek di situs saat upload); Online Font Converter; konversi browser-side web-font-codecs (tanpa CSS); CLI fonttools/pyftsubset, glyphhanger untuk subset dari karakter di URL.
Kemudian langkah self-host minimal: simpan woff2 di folder asset, deklarasikan face, terapkan font-family, sediakan stack fallback.
@font-face {
font-family: "NamaFont";
src: url("/assets/fonts/nama-font-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}Di WordPress, muat stylesheet font lewat wp_enqueue_style dari child theme atau plugin asset—jangan taruh file hanya di folder theme vendor yang akan tertimpa update. Pastikan lisensi mengizinkan embed web; audit Network tab dan computed styles setelah deploy. Kemudian praktik clamp() dan property font lain bisa Anda uji di CSS playground simulator layout bila perlu eksperimen cepat.
Performa webfont, fallback, dan aksesibilitas
font-display: swap menampilkan fallback dulu—mengurangi FOIT, namun bisa FOUT dan CLS bila metrik fallback beda jauh. Preload hanya untuk face kritis LCP; jangan preload semua weight. Stack contoh: font-family: "NamaFont", system-ui, sans-serif;.
Meski font bukan faktor ranking langsung, UX, stabilitas layout, Core Web Vitals, dan aksesibilitas (zoom, kontras, spacing) tetap terukur. Tutorial audit muat font dan CDN: LCP WordPress, CDN, dan font. Sementara itu, peran tipografi dalam produk digital lebih luas tercakup di pengertian UI/UX dan tools.
Tetapi jangan andalkan font “khusus disleksia” sebagai solusi universal—kebutuhan baca individu berbeda. Hindari informasi penting hanya lewat bentuk huruf decorative atau teks dalam gambar.
Design system dan token tipografi
Design system sering menetapkan primary/secondary/body/mono font plus skala ukuran. Token CSS seperti --font-family-heading, --font-size-md, --line-height-normal menjaga konsistensi antar komponen. Peran typography—display, H1–H6, body, caption, label, button, navigation—bukan jenis font; mereka mengatur hierarki UI. Jadi batasi jumlah family aktif; token membantu audit weight yang UI benar-benar pakai.
Kesalahan umum dan FAQ
Kesalahan yang sering muncul: terlalu banyak family/weight; display untuk body; line-height rapat; fake bold/italic; preload berlebihan; font tanpa lisensi; subset menghapus glyph penting; menganggap TIFF sebagai font; variable font diasumsikan selalu lebih kecil. Walau deploy sudah rapi, audit loading tetap perlu—font yang tidak terpakai membebani bandwidth.
Font itu apa? Font adalah file face tipografi (weight/style tertentu) dari sebuah typeface/family. Apa perbedaan font dan typeface? Typeface merujuk desain sistem; font adalah implementasi file spesifik (Regular 400, Bold 700). Apa saja jenis font yang paling umum? Serif, sans serif, slab serif, monospace, script/handwriting, display/decorative—masing-masing punya konteks UI, editorial, atau aksen.
Apa beda serif dan sans serif? Serif punya serif stroke; sans tidak. Sans dominan UI web; serif sering editorial—pilih menurut readability di konteks Anda. Format apa yang disarankan untuk website? WOFF2 sebagai delivery; simpan TTF/OTF sebagai master untuk konversi bila perlu. Bolehkah Google Fonts di-host sendiri? Tergantung lisensi masing-masing family; baca ketentuan per font. Apakah font gratis boleh untuk komersial? Tidak otomatis—cek EULA/OFL/Apache pada foundry atau halaman font.
Referensi belajar font dan tipografi
Untuk memperdalam teori dan praktik di luar ringkasan di atas, sumber resmi berikut membahas klasifikasi, kontras, spacing, aksesibilitas, dan spesifikasi teknis—sebagian besar berbahasa Inggris, namun ilustrasi dan prinsipnya tetap relevan untuk keputusan font di web Indonesia.
Google Fonts Knowledge — modul tentang typeface, history, pairing, variable font, dan readability. MDN: fundamentals of styling text — font-family, weight, style, dan dasar CSS tipografi. MDN: web fonts — loading, format, dan fallback di browser.
Microsoft OpenType specification — struktur font, features, dan variable font axis. WCAG: understanding text spacing — jarak baris, paragraf, dan letter-spacing untuk aksesibilitas. SIL Open Font License (OFL) — ketentuan lisensi font open source yang sering dipakai untuk webfont gratis.
