Utilia
Kategori ▾
Bahasa: id ▾

Pratinjau Kombinasi Font

Coba kombinasi font untuk judul dan teks isi dengan 20 font berlisensi terbuka, atur ukuran dan tinggi baris, lalu salin kode CSS font-family.

Pasangan yang disarankan

Pratinjau

Instal paket npm dan impor hanya ketebalan yang Anda pakai. Font lalu disajikan dari situs Anda sendiri, tanpa CDN font.

Cara menggunakan pratinjau kombinasi font

  1. Mulai dengan salah satu Pasangan yang disarankan (Editorial, Blog modern, Landing page, Berita, Elegan, Majalah teknologi, Buku, Klasik, Dokumentasi, Ceria). Setiap tombol menampilkan font judul dan font isi yang diterapkannya.
  2. Atau pilih sendiri Font judul dan Font isi. Daftarnya dikelompokkan menjadi font sans-serif, serif, display, monospace, dan tulisan tangan. Tukar font menukar keduanya.
  3. Sesuaikan Ukuran judul, Ukuran isi, dan Tinggi baris, lalu pilih Ketebalan judul (Tebal (700) atau Reguler (400)). Centang Latar gelap untuk memeriksa pasangan font dalam mode gelap.
  4. Ganti Teks judul dan Teks isi dengan kata-kata Anda sendiri: judul dan paragraf sungguhan memberi tahu jauh lebih banyak daripada pangram. Sisakan satu baris kosong di antara paragraf.
  5. Salin Kode CSS, lalu ikuti Self-hosting dengan Fontsource untuk menambahkan font ke proyek Anda.

Font dimuat saat pertama kali Anda memilihnya (sekitar 12 sampai 50 KB per ketebalan). Font disajikan dari situs ini, tidak pernah dari CDN font.

Bahasa Indonesia hanya memakai huruf Latin dasar, jadi semua 20 font menampilkan teks berbahasa Indonesia dengan lengkap, tanpa huruf yang jatuh ke font cadangan.

Ciri kombinasi font yang baik

  • Kontras, bukan bentrok. Resep klasiknya adalah serif untuk satu peran dan sans-serif untuk peran lainnya: Playfair Display di atas Lato, atau Montserrat di atas Merriweather. Dua font yang mirip tetapi tidak sama (misalnya dua sans-serif geometris) sering terlihat seperti kesalahan.
  • Font isi yang tenang. Teks isi adalah tempat pembaca menghabiskan waktunya. Pilih font dengan bentuk huruf yang terbuka dan x-height yang lega (Inter, Lato, Open Sans, Source Serif 4, Merriweather), dan simpan font display seperti Playfair Display, DM Serif Display, Oswald, atau Caveat untuk judul pendek.
  • Proporsi yang serasi. Font dengan x-height yang mirip tampak serasi pada baris dan kolom yang sama.
  • Dua font sudah cukup. Bangun hierarki dengan ukuran, ketebalan, dan spasi, bukan dengan jenis huruf ketiga.

Untuk teks isi yang mudah dibaca, 16 sampai 20 px dengan tinggi baris antara 1,4 dan 1,7 adalah titik awal yang baik, dengan sekitar 60 sampai 75 karakter per baris. Judul biasanya membutuhkan tinggi baris yang lebih rapat (1,1 sampai 1,3), dan kode CSS mengaturnya untuk Anda.

Kode CSS

Kode ini mendeklarasikan dua custom property, --font-heading dan --font-body, masing-masing dengan rangkaian font cadangan: jika web font belum dimuat, browser menampilkan font sistem yang mirip (Georgia untuk serif, font UI sistem untuk sans-serif). Ukuran ditulis dalam rem (16 px = 1rem), sehingga mengikuti pengaturan ukuran font di browser pembaca.

Self-hosting dan lisensi

Semua 20 font berasal dari Fontsource, yang mengemas font open source untuk npm. Kotak instalasi memberikan perintah npm install dan baris import untuk subset latin dan hanya ketebalan yang Anda pakai; bundler Anda lalu menyalin file woff2 ke hasil build. Menyajikan font dari domain Anda sendiri lebih cepat (tanpa koneksi tambahan), berfungsi offline, dan menghindari pengiriman alamat IP pengunjung ke layanan font pihak ketiga, masalah GDPR yang sudah dikenal di Uni Eropa.

Setiap font di sini menggunakan SIL Open Font License 1.1, menurut metadata paketnya: Anda boleh memakainya di situs web, aplikasi, dan media cetak, untuk keperluan komersial maupun nonkomersial, serta menyematkannya. Anda tidak boleh menjual file font itu sendiri. Jika Anda memodifikasi font, hasilnya harus tetap memakai OFL dan tidak boleh menggunakan nama asli yang dicadangkan. File lisensi disertakan di setiap paket.

Pertanyaan yang sering diajukan

Apakah alat ini menggunakan Google Fonts?

Tidak. Banyak dari keluarga font ini juga tersedia di Google Fonts, tetapi di sini filenya berasal dari paket npm Fontsource dan disajikan oleh situs ini. Tidak ada permintaan yang dikirim ke Google atau CDN font lainnya.

Mengapa sebagian judul tidak menjadi lebih tebal?

DM Serif Display hanya tersedia dalam ketebalan reguler. Alat ini lalu menampilkannya dalam 400, memberi tahu hal itu di bawah kontrol, dan kode CSS memakai 400.

Bisakah saya memadukan dua font serif atau dua font sans-serif?

Bisa, asalkan peran dan ketebalannya jelas berbeda, misalnya judul tebal yang ramping dengan font isi yang tipis dan terbuka. Alat ini menampilkan catatan jika kedua font memiliki gaya yang sama, karena kontras serif dan sans-serif lebih mudah dibuat dengan tepat.

Karakter apa saja yang tersedia?

Pratinjau memuat subset latin (bahasa Indonesia, Inggris, Prancis, dan sebagian besar bahasa Eropa Barat, dengan aksen, œ, « », dan tanda euro) dan, jika font memilikinya dan teks Anda membutuhkannya, subset latin-ext (huruf Eropa Tengah seperti č, ł, ő, ț), Sirilik, dan Yunani. Font tanpa subset tersebut menampilkan huruf-huruf itu dengan font cadangan: Lato, Work Sans, dan Space Grotesk tidak memiliki huruf Sirilik, dan hanya Inter, Roboto, Open Sans, Source Serif 4, dan Fira Code yang memiliki huruf Yunani. Tidak satu pun dari 20 font ini memiliki huruf Arab; teks Arab memakai font sistem.

Bisakah saya memakai font ini untuk proyek komersial?

Bisa. SIL Open Font License mengizinkan penggunaan komersial tanpa biaya dan tanpa atribusi di desain Anda. Yang tidak diizinkan hanyalah menjual ulang file fontnya saja.

Alat terkait