Pratinjau & Penguji Font Gratis

Apa yang Dilakukan Alat Ini

Alat pratinjau font merender string yang sama dalam banyak jenis huruf secara bersamaan sehingga Anda dapat membandingkannya berdampingan tanpa berkomitmen pada satu pun. Ketik teks Anda sekali di bagian atas: nama proyek, judul yang Anda tulis, wordmark merek yang Anda pilih: dan setiap font di galeri menunjukkan string yang sama di wajahnya sendiri. Sesuaikan ukuran, warna, dan latar belakang untuk menguji bagaimana perbandingan terlihat pada ukuran dan kontras yang akan benar-benar muncul dalam produksi. Klik font apa pun untuk menyalin deklarasi font-family CSS-nya. String perbandingan tipografi klasik "The quick brown fox jumps over the lazy dog" adalah pangram (setiap huruf dari abjad bahasa Inggris muncul setidaknya sekali): berguna karena ia melatih setiap glif yang dimiliki jenis huruf untuk ditawarkan dalam satu kalimat pendek.

Font web-safe

Font web-safe adalah karakter yang tersedia di semua sistem operasi utama (Windows, macOS, Linux). Berbeda dengan font kustom yang harus diunduh, font web-safe ditampilkan secara seketika karena sudah terinstal di perangkat pengguna. Alat ini mengelompokkan lebih dari 30 font web-safe dan lebih dari 20 Google Font populer yang dimuat secara seketika dari web.

Google Fonts dan Era Hosting Web Font

Google Fonts diluncurkan pada Mei 2010 sebagai pustaka jenis huruf sumber terbuka yang dihosting CDN gratis. Peluncuran asli memiliki 18 font; pada 2026 katalog melebihi 1.500 keluarga, semuanya dilisensikan di bawah SIL Open Font License atau persyaratan permisif serupa. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt untuk Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011): ini adalah di antara jenis huruf yang paling banyak digunakan di web modern, semuanya tersedia gratis melalui Google Fonts. Mekanisme pemuatan katalog berkembang selama bertahun-tahun: peluncuran asli 2010 menggunakan tag <link> ke endpoint CSS Google; 2018 dan seterusnya menekankan parameter display=swap untuk mengontrol perilaku FOUT/FOIT; Google Fonts API v2 2022 melakukan pra-render subset untuk performa yang lebih baik; penggunaan modern di situs sensitif privasi sering kali meng-host sendiri font untuk menghindari masalah privasi dan kepatuhan GDPR dari CDN Google (putusan pengadilan Jerman 2022 secara khusus menyatakan bahwa memuat Google Fonts dari server Google tanpa persetujuan pengguna melanggar GDPR). Adobe Fonts (sebelumnya Typekit, diakuisisi 2011), Fontshare (font gratis dari Indian Type Foundry, 2021), Bunny Fonts (cermin Google Fonts yang menghormati privasi, 2021) adalah alternatif utama.

Kategori font

• Font serif · Georgia, Times New Roman, Palatino. Tradisional, mudah dibaca, formal. Bagus untuk teks isi dalam artikel dan buku.
• Font sans-serif · Arial, Helvetica, Verdana, Roboto, Open Sans. Modern, bersih, serbaguna. Yang paling populer dalam desain web.
• Font monospace · Courier New, Source Code Pro. Lebar tetap. Sempurna untuk kode, terminal, dan dokumentasi teknis.
• Font display · Impact, Playfair Display, Oswald. Besar, tebal, dekoratif. Ideal untuk judul dan branding.
• Font tulisan tangan dan skrip meniru gaya tulisan tangan. Berguna dengan hemat untuk branding gaya pribadi atau undangan; hampir tidak mungkin dibaca pada ukuran badan; harus digunakan seperti huruf besar digunakan (singkat, sengaja).

Font Variabel: Revolusi Diam Modern

Spesifikasi OpenType Font Variations (TrueType GX Variations Apple dari 1994 + kontribusi Adobe, distandarisasi bersama sebagai OpenType 1.8 pada September 2016) memungkinkan satu file font menggambarkan keluarga tak terbatas dari variasi terkait. Di mana keluarga tradisional mengirim file font terpisah untuk Light, Regular, Medium, Bold, Black, plus italik mereka: enam hingga sepuluh file masing-masing 50-200 KB: font variabel mengirim satu file yang berisi semua desain yang sama sebagai variasi kontinu sepanjang sumbu (berat, lebar, kemiringan, ukuran optik, dan sumbu khusus sembarang yang ditentukan desainer tipe). Dukungan browser mendarat di Chrome 62 (Oktober 2017), Firefox 62 (September 2018), Safari 11.0 / 11.1 (2017-2018), dan Edge dengan Chromium (2020). Rilis font variabel utama termasuk Roboto Flex (Christian Robertson + Font Bureau, Oktober 2022) yang memiliki 13 sumbu; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) dengan sumbu berat + kemiringan; dan sebagian besar keluarga jenis huruf utama sekarang mengirim versi variabel di samping file statis tradisional. Penghematan bandwidth dramatis: satu file font variabel 200 KB menggantikan delapan file statis 100 KB, sambil menawarkan fleksibilitas desain yang lebih besar.

Pemuatan Font dan Masalah FOUT/FOIT

Ketika browser mengambil file font kustom, apa yang ditampilkannya sementara itu? Dua strategi ekstrem. FOIT (Flash of Invisible Text): tidak merender teks sama sekali sampai font tiba, lalu tiba-tiba menampilkan teks. Halaman terlihat rusak sampai font dimuat. FOUT (Flash of Unstyled Text): merender teks segera dalam font fallback, lalu beralih ke font kustom ketika tiba. Halaman dapat dibaca dari frame nol tetapi pertukaran secara visual mengganggu. Properti CSS font-display (ditambahkan dalam CSS Fonts Module Level 4) memberi pengembang kontrol: auto (default browser, biasanya cenderung FOIT), block (FOIT penuh), swap (FOUT penuh: praktik terbaik modern dominan), fallback (blok tak terlihat singkat lalu beralih, dengan fallback "cukup baik" setelah beberapa detik), optional (lewati font kustom sepenuhnya jika tidak dimuat cukup cepat). Untuk Core Web Vitals dan skor Lighthouse pada 2026, font-display: swap adalah rekomendasi standar, dipasangkan dengan petunjuk preload untuk font kritis dan font fallback yang dipilih dengan hati-hati yang secara metrik mirip dengan font kustom (sehingga layout tidak mengalir ulang ketika pertukaran terjadi: properti size-adjust baru di CSS Fonts Module Level 5 menyetel ini dengan cermat).

Memilih Font untuk Pekerjaan

• Teks badan UI: tumpukan font sistem terlebih dahulu (Apple SF, Segoe UI, Roboto, mengikuti OS pengguna) untuk latensi nol dan tampilan yang sesuai platform. Jika font kustom diperlukan untuk alasan merek, pilih sans humanis (Inter, Open Sans, Source Sans Pro) pada 16 px atau lebih besar.
• Pembacaan bentuk panjang (artikel, blog): serif yang dioptimalkan layar (Georgia, Merriweather, Lora) pada 18-22 px dengan line-height yang murah hati (1,6-1,8). Serif membantu pelacakan mata melintasi baris teks yang panjang.
• Wordmark merek: wajah display yang khas digunakan pada satu ukuran besar saja. Pasangkan dengan wajah badan yang lebih netral. Berinvestasi dalam jenis huruf khusus atau yang ditugaskan di sini terbayar: ini adalah keputusan tipografis tunggal yang paling terlihat dalam merek.
• Blok kode: font programmer khusus (JetBrains Mono, Fira Code, Cascadia Code) pada 14-15 px. Ligatur pemrograman adalah preferensi pribadi; banyak pengembang menyukainya, beberapa menemukannya membingungkan.
• Tabel angka: font dengan angka tabular (digit 1 menempati lebar yang sama dengan 2, 3, dll.) sehingga kolom angka berbaris tanpa padding manual. Sebagian besar font modern menawarkan angka tabular melalui properti font-variant-numeric: tabular-nums.
• Penggunaan dekoratif saja: font tulisan tangan, skrip, wajah display retro. Gunakan secara singkat dan sengaja; jangan pernah untuk teks badan.

Pertanyaan umum

Apa perbedaan antara font web-safe dan font kustom?

Font web-safe sudah terinstal di komputer pengguna dan ditampilkan secara seketika. Font kustom (Google Fonts, Typekit, dll.) harus diunduh, yang menambahkan latensi tetapi menawarkan lebih banyak variasi. Sebagian besar situs mencampurkan keduanya: font web-safe sebagai fallback dan font kustom sebagai font utama.

Bagaimana cara menggunakan Google Font di situs saya?

Salin deklarasi CSS font-family yang disediakan oleh alat ini dan tempel di CSS Anda. Google Fonts dimuat melalui tag link di head HTML. Alat ini sudah menyertakan tautan font: cukup terapkan aturan font-family ke elemen Anda.

Apa font serif yang bagus untuk teks isi?

Georgia dan Merriweather sangat baik untuk teks isi. Mereka sangat mudah dibaca di layar berkat jarak yang baik dan bentuk huruf yang khas. Times New Roman terlalu rapat untuk web. Untuk serif modern, coba Playfair Display.

Apakah alat pratinjau ini bekerja offline?

Font web-aman (Arial, Georgia, Verdana, dll.) bekerja offline karena dimuat dari sistem operasi Anda. Google Fonts di galeri memerlukan pengambilan jaringan satu kali dari CDN Google untuk merender: setelah dimuat mereka di-cache dan pratinjau bekerja offline setelahnya. Bawa halaman offline (mode pesawat) setelah pemuatan awal untuk konfirmasi; font yang diinstal OS terus merender, font Google menggunakan apa pun yang di-cache.

Alat terkait