コンテンツにスキップ
Theme

タイポグラフィ

タイプシステムは、スイスデザインにインスパイアされた2つのフォントファミリーを組み合わせ、表現力豊かなヘッドラインと実用的な本文テキストの間に明確な階層を確立します。

デザイン哲学

Section titled “デザイン哲学”

フォントのタイポグラフィは、タイプスタイル、スケール、ウェイト、カラー、行送り、水平方向のスペース、垂直方向のスペースによって実現される比率、リズム、テンポを使用して、明確な視覚的階層を生み出します。

  • Neusa Next Wide は初期宇宙探査のタイプトリートメントにインスパイアされており、ヘッドラインやサブヘッドに人間的で表現豊かな個性を加えます
  • Proxima Nova は、本文やユーティリティコピーなど、より実用的な場面に開放感とジオメトリックなスタイリングをもたらします

階層は、降順のタイプサイズおよび小文字・大文字を交互に使用したコントラストによって確立されます。サインオフと CTA は、低い階層位置から目立つようにワイドボールドフェイスを使用します。

フォントファミリー

Section titled “フォントファミリー”

Neusa Next Wide

Section titled “Neusa Next Wide”

役割: ヘッドライン、サブヘッド、プルクォート、CTA、ラベル、数値統計

ブランドセンターのスペシメンには5つのスタイルが表示されています：

スタイルウェイト値CSS font-weightCSS font-style
Light300300normal
Regular400400normal
Italic400400italic
Medium500500normal
Bold700700normal

Proxima Nova

Section titled “Proxima Nova”

役割: 本文コピー、ユーティリティテキスト、セクションヘッダー、UI 要素

ブランドセンターのスペシメンには4つのスタイルが表示されています：

スタイルウェイト値CSS font-weightCSS font-style
Regular400400normal
Regular Italic400400italic
Bold700700normal
Bold Italic700700italic

Proxima Nova は個別にライセンスが必要であり、ブランドセンターのフォントダウンロードには含まれていません。テーマにはノーマルスタイルのウェイト 400、500、600、700 が含まれています。

タイプ階層

Section titled “タイプ階層”

基本原則

Section titled “基本原則”
  • 降順のタイプサイズと大文字・小文字の交互使用を組み合わせて階層を確立する
  • キャンペーンのヘッドラインとサブヘッドには Neusa Wide Bold、センテンスケース を使用する
  • ヘッドラインの行送りはタイプサイズの 1.1 倍に設定する
  • センテンスケースの見出しとコントラストを出すために、セクションヘッダーにはProxima Nova Bold、大文字 (UPPERCASE) とレタースペーシングを使用する
  • サインオフと CTA は、デジタル体験でアクションを示すために Cloud レッドの右向きキャレット (›) とともに Neusa Wide Bold を使用する

階層テーブル

Section titled “階層テーブル”
要素フォントウェイトケース備考
ヘッドラインNeusa WideBold (700)センテンス行送り = タイプサイズの 1.1 倍
アイブロウProxima NovaBold (700)大文字小さめ、レタースペーシングあり
サブヘッド / イントロNeusa WideMedium (500)センテンス本文コピーが直後に続く場合は Proxima Nova
セクションヘッダーProxima NovaBold (700)大文字レタースペーシングあり
サブサブヘッドProxima NovaBold (700)センテンス
本文コピーProxima NovaRegular (400)センテンス
箇条書きProxima NovaRegular (400)センテンス
プルクォートNeusa WideBold (700)センテンスCloud レッドカラー；下に帰属テキストのある大きな赤い引用符
サインオフ / CTANeusa WideBold (700)センテンスCloud レッドの右向きキャレット (›) あり

特殊なトリートメント

Section titled “特殊なトリートメント”
コンテキストフォントウェイトサイズ / 行送り備考
販促物のプルクォートNeusa WideBold (700)9pt / 14ptセンテンスケース
eBook のプルクォートNeusa WideRegular (400)16pt / 19pt上にルールラインあり
インフォグラフィックの数字・ファクトイドNeusa WideLight (300)—大きいサイズでの視覚的インパクトのため
チャート・棒グラフの数字Neusa WideRegular (400)—標準的なチャートラベル

タイトルケースの使用

Section titled “タイトルケースの使用”

タイトルケースが使用できる場合：

  • サブヘッド
  • プルクォート
  • 数値統計
  • ラベル

その他すべての要素はデフォルトでセンテンスケースになります。

実際の例

Section titled “実際の例”

見出し

Section titled “見出し”

見出しレベル 2

Section titled “見出しレベル 2”

見出しレベル 3

Section titled “見出しレベル 3”

見出しレベル 4

Section titled “見出しレベル 4”
見出しレベル 5
Section titled “見出しレベル 5”
見出しレベル 6
Section titled “見出しレベル 6”

テキストスタイル

Section titled “テキストスタイル”

これは強調のための太字テキストです。

これは控えめな強調のための斜体テキストです。

これは非推奨コンテンツのための取り消し線テキストです。

これは技術的な参照のためのインラインコードです。

これは強い強調のための太字斜体テキストです。

これは組み合わせの例です：太字の中にインラインコードを含むと斜体の中にコードを含む。

順序付きリスト

Section titled “順序付きリスト”
  1. 順序付きリストの最初の項目
  2. 太字テキストを含む2番目の項目
  3. インラインコードを含む3番目の項目
  4. Astro へのリンクを含む4番目の項目

順序なしリスト

Section titled “順序なしリスト”
  • 最初の箇条書き
  • 強調を含む2番目の箇条書き
  • コード参照を含む3番目の箇条書き
  • リンクを含む4番目の箇条書き

ネストされたリスト

Section titled “ネストされたリスト”
  1. トップレベルの順序付き項目
    • ネストされた順序なし項目 A
    • ネストされた順序なし項目 B
      1. 深くネストされた順序付き項目
      2. もう一つの深くネストされた項目
    • 最初のネストレベルに戻る
  2. 2番目のトップレベル項目
    • 別のネストされた項目

ブロッククォート

Section titled “ブロッククォート”

これは1行のブロッククォートです。

これは複数行のブロッククォートです。

複数の段落にわたり、太字、斜体、コードのフォーマットを含むことができます。

ネストされたブロッククォート：

これは外側のブロッククォートの中にネストされたブロッククォートです。

独自のフォーマットを含むことができます。

水平ルール

Section titled “水平ルール”

ルールの上のコンテンツ。

ルールの下のコンテンツ。

リンク

Section titled “リンク”

脚注

Section titled “脚注”

これは脚注参照1を含む文です。

そしてこれは別の脚注2を含む文です。

フォントアセット

Section titled “フォントアセット”

テーマには fonts/ ディレクトリに 10 個の woff2 ファイルが含まれています：

Neusa Next Pro Wide

Section titled “Neusa Next Pro Wide”
ファイルウェイトスタイルサイズ
neusaNextProWide-300.woff2300 (Light)Normal~49 KB
neusaNextProWide-400.woff2400 (Regular)Normal~49 KB
neusaNextProWide-400i.woff2400 (Regular)Italic~49 KB
neusaNextProWide-500.woff2500 (Medium)Normal~49 KB
neusaNextProWide-700.woff2700 (Bold)Normal~49 KB
neusaNextProWide-700i.woff2700 (Bold)Italic~49 KB

Proxima Nova

Section titled “Proxima Nova”
ファイルウェイトスタイルサイズ
proximaNova-400.woff2400 (Regular)Normal~18 KB
proximaNova-500.woff2500 (Medium)Normal~18 KB
proximaNova-600.woff2600 (Semi-Bold)Normal~18 KB
proximaNova-700.woff2700 (Bold)Normal~18 KB

命名規則

Section titled “命名規則”

フォントファイルは familyName-weight.woff2 というパターンに従い、斜体バリアントには i サフィックスが付きます（例：neusaNextProWide-400i.woff2）。

カバレッジのギャップ

Section titled “カバレッジのギャップ”

以下の斜体バリアントはまだテーマで利用できません：

不足しているバリアント理由
Proxima Nova 400 italic現在のダウンロードにソースファイルが含まれていない
Proxima Nova 500 italic現在のダウンロードにソースファイルが含まれていない
Proxima Nova 600 italic (Semi-Bold)ソースファイルが利用できない
Proxima Nova 700 italic (Bold)ソースファイルが利用できない

Proxima Nova の斜体バリアントを追加するには、ライセンスされたソースから正規の woff2 ファイルを入手し、命名規則に従ってファイル名を付け（例：proximaNova-400i.woff2）、font-face.css に対応する @font-face ルールを追加してください。

@font-face 宣言

Section titled “@font-face 宣言”

すべてのフォント登録は fonts/font-face.css に記述されています。各宣言では以下を使用します：

  • font-display: swap — カスタムフォントが読み込まれるまでフォールバックフォントでテキストをすぐにレンダリングし、読み込み完了後にスワップする
  • format("woff2") — 現在のすべてのブラウザでサポートされている最新の圧縮フォーマット
  • 相対 URL — ./ パスは CSS ファイルの場所を基準に解決される

新しいフォントバリアントを追加するには、font-face.css に @font-face ブロックを追記してください：

@font-face {
  font-family: "familyName";
  font-weight: 400;
  font-style: italic;  /* or normal */
  font-display: swap;
  src: url("./familyName-400i.woff2") format("woff2");
}

CSS インテグレーション

Section titled “CSS インテグレーション”

テーマプラグイン（index.ts）は config:setup フックを介して両方の CSS ファイルを挿入します：

index.ts → fonts/font-face.css → styles/custom.css → Starlight renders

フォントの割り当て

Section titled “フォントの割り当て”

styles/custom.css の内容：

:root {
  --sl-font: "proximaNova", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}
  • --sl-font（Starlight 本文フォント変数）→ 本文テキストと UI に Proxima Nova を使用
  • --sl-font-heading（カスタムトークン）→ 見出しフォント参照に Neusa Next Pro Wide を使用
  • h1–h6 → Cloud タイプ階層に従ってフォントファミリー、ウェイト、ケースを適用
  • フォールバックスタック：カスタムフォントが読み込まれる前の高速な初期レンダリングのために system-ui, "Segoe UI", Helvetica, Arial, sans-serif を使用

Starlight タイポグラフィトークン

Section titled “Starlight タイポグラフィトークン”

テーマは以下の Starlight CSS カスタムプロパティをオーバーライドします：

トークン値目的
--sl-font"proximaNova", ...本文テキスト、UI 要素
--sl-font-heading"neusaNextProWide", ...見出しフォントのカスタムトークン
--sl-line-height-headings1.1Cloud ブランドのヘッドライン行送り
--sl-text-h1var(--sl-text-5xl)2.625rem ヘッドライン
--sl-text-h2var(--sl-text-3xl)1.8125rem サブヘッド
--sl-text-h3var(--sl-text-2xl)1.5rem セクションイントロ
--sl-text-h4var(--sl-text-lg)1.125rem サブセクション

見出し階層マッピング

Section titled “見出し階層マッピング”
HTMLフォントファミリーウェイトケースブランドの役割
h1Neusa Next Wide700 (Bold)センテンスヘッドライン
h2Neusa Next Wide700 (Bold)センテンスサブヘッド
h3Neusa Next Wide500 (Medium)センテンスイントロ / サブサブヘッド
h4Proxima Nova700 (Bold)大文字セクションヘッダー
h5Proxima Nova700 (Bold)大文字サブセクションヘッダー
h6Proxima Nova700 (Bold)大文字マイナーセクションヘッダー

フォントの置き換え

Section titled “フォントの置き換え”

異なるフォントファミリーを使用するには：

  1. 命名規則 familyName-weight.woff2 に従って woff2 ファイルを fonts/ に追加する（斜体には i サフィックスを追加）
  2. fonts/font-face.css を更新し、ファイル名、ウェイト、スタイルに合わせた新しい @font-face ルールを追加する
  3. styles/custom.css を更新し、--sl-font と見出しの font-family を新しいファミリー名に設定する
  4. フォールバックスタック（system-ui, "Segoe UI", Helvetica, Arial, sans-serif）を維持し、カスタムフォントが読み込まれる前の高速な初期レンダリングを確保する

テーマチェック

Section titled “テーマチェック”
  • H2 と H3 はウェイト 700/500 の neusaNextProWide フォントファミリーを使用する
  • H4、H5、H6 は proximaNova フォントを使用し、大文字で、レタースペーシング 0.05em を適用する
  • リンクのアクセントカラーはダークモードで #f06680、ライトモードで #e4002b
  • インラインコードは --sl-color-gray-5 からの背景色ティントを持つ
  • ブロッククォートの左ボーダーは両テーマで表示される
  • 脚注参照は上付き文字でリンクされている
  • 水平ルールは適切なコントラストを持つ

Footnotes

Section titled “Footnotes”

  1. これは最初の脚注の内容です。ページの下部に表示されます。 ↩

  2. これは2番目の脚注です。フォーマットとコードを含むことができます。 ↩