モノスペースコードフォント — プログラミングフォントとUIタイポグラフィの組み合わせ

タイプシステムへのコードフォントの追加

開発者向けWebサイトでは、見出しフォント、本文フォント、コードブロック用のモノスペースフォントの3つのフォントが必要になることがよくあります。コードフォントを正しく選ぶことは、見出し/本文のペアリングと同じくらい重要です。

トップGoogle Fontsモノスペースオプション

フォント	特徴	特性
JetBrains Mono	リガチャ、高いxハイト	モダン、コーディング用に設計
Fira Code	リガチャ、広範	Mozillaのコーディングフォント
Source Code Pro	クリーン、Adobe品質	プロフェッショナル、ニュートラル
IBM Plex Mono	IBM Plexファミリーと一致	企業的、正確
Roboto Mono	Robotoファミリーと一致	クリーン、Googleネイティブ

本文テキストに対するコードのサイズ調整

コードフォントは通常、より広い文字形のため、同じピクセルサイズで本文テキストよりも大きく見えます。コードフォントのサイズを本文テキストの85-90%に設定してください：

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
  font-size: 0.875em;
}

リガチャの考慮事項

JetBrains MonoとFira Codeにはプログラミングリガチャが含まれています（=>が矢印に、!=が不等号になる）。ターゲットオーディエンスの好みに基づいて有効化または無効化してください。