"Monospaced Font" Family
Font untuk display kode biasanya digunakan pada postingan tutorial. Entah itu tutorial terkait bahasa pemrograman misal: HTML / CSS / Javascript / C++ maupun bahasa pemrograman lainnya. Font tersebut berfungsi khusus untuk menampilkan (display) kode-kode bahas pemrograman yang terkait dihalaman postingan dengan tujuan agar pengunjung dapat dengan mudah membedakan antara teks kode dengan teks paragraf dihalaman postingan tersebut.
Monospace sebenarnya memiliki pengertian jarak tunggal / ukuran tunggal atau lebih tepatnya suatu karakter huruf yang memiliki ukuran lebar (width) sama dengan huruf lainnya, alias satu ukuran (mono). Itulah kenapa karakter huruf tersebut dinamakan Monospace
Jenis font untuk men-display kode-kode pemrograman umumnya adalah family dari font monospace. Karena memiliki karakter dengan ukuran yang sama sehinnga jika dirapatkan, huruf-huruf dari font Monospace masih dapat dibedakan / terbaca meskipun kumpulan huruf tersebut tidak membentuk suatu kata.
Karena karakteristik tersebut Font Monospace dijadikan sebagai font standart untuk menampilkan kode program apapun bahasa pemrogramannya.
Dibawah ini beberapa font dari family mono dengan karakter khasnya masing-masing yang mungkin bisa menjadi alternatif pilihan untuk menampilkan kode di halaman postingan.
Koleksi Font
Fariasi font yang termasuk dalam family Monospace atau setidaknya memiliki karakteristik yang serupa dengan font Monospace. Dibawah ini terdapat beberapa jenis font yang masih serupa ataupun masih family dengan font Monospace. Dan kesemuanya merupakan font alternatif atau dapat digunakan sebagai pengganti atau pilihan selain font monospace yang umumnya dipakai pada tampilan teks editor / template HTML
Inconsolata
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600&display=swap" rel="stylesheet">{font-family: 'Inconsolata';}
Nova Mono
<link href="https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap rel="stylesheet">{font-family: 'Nova Mono',monospace;}
Space Mono
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">{font-family: 'Space Mono',monospace;}
Red Hat Mono
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@400;500&display=swap" rel="stylesheet">{font-family: 'Red Hat Mono',monospace;}
Azeret Mono
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&display=swap rel="stylesheet">{font-family: 'Azeret Mono',monospace;}
Fira Code
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap rel="stylesheet">{font-family: 'Fira Code',monospace;}
B612 Mono
<link href="https://fonts.googleapis.com/css2?family=B612+Mono&display=swap" rel="stylesheet">{font-family: 'B612 Mono',monospace;}
Share Tech Mono
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap rel="stylesheet">{font-family: 'Share Tech Mono',monospace;}
Cousine
<link href="https://fonts.googleapis.com/css2?family=Cousine&display=swap rel="stylesheet">{font-family: 'Cousine',monospace;}
VT323
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap rel="stylesheet">{font-family: 'VT323',monospace;}
Syne Mono
<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap rel="stylesheet">{font-family: 'Syne Mono',monospace;}