Space Grotesk + Inter — 開発ツールタイポグラフィ

開発ツールのためのSpace Grotesk + Inter

このペアリングは開発者に直接語りかけます。Space Groteskは見出しに独特のモノスペースにインスパイアされた美学をもたらし、Interは技術コンテンツに利用可能な最も読みやすい本文テキストを提供します。

Space Grotesk：コーダーのディスプレイフォント

Space Groteskは微妙なモノスペースのDNAを持つプロポーショナルサンセリフです。その長方形の文字形、シングルストーリーの'a'、幾何学的な構造が、実際のモノスペーステキストの硬さなしに、見出しに技術的で精密な雰囲気を与えます。

h1, h2, h3 {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

Inter：UIの標準

Interは、Vercel、Linear、Raycastなど多くの開発ツールインターフェースの事実上の標準となっています。バリアブルフォント形式により細かなウェイト制御が可能で、タブラーナンバー機能（font-variant-numeric: tabular-nums）はデータ重視のインターフェースに不可欠です。

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

コードフォントとの組み合わせ

開発ツールでは、コードブロック用の3番目のフォントが必要になることがよくあります。JetBrains MonoやFira Codeは<code>や<pre>要素にこのペアリングを完璧に補完します。視覚的なバランスのためにコードフォントのサイズを本文テキストの90%に設定してください。