タイポグラフィは Alius エコシステムにおけるコンテンツの主要な媒体です。プラットフォームの多くがドキュメント、設定、コードを中心に展開しているため、タイポグラフィシステムは可読性、明確さ、技術的精度を優先する必要があります。
フォントレイヤー
Alius タイプシステムは4つのレイヤーに整理され、それぞれ使用コンテキストに最適化されています。
ディスプレイ / ブランド
ヒーロータイトル、ブランドページ、プロモーション素材、ランディングページヘッドラインに使用。
- 目的： 強い第一印象を与え、ブランドパーソナリティを確立
- 特徴： 大きなサイズ、太いウェイト、タイトなレタースペーシング
- コンテキスト： ホームページ、製品ローンチ、イベントバナー、マーケティングセクション
UI
ソフトウェアクライアント、コンソール、設定ページ、ボタン、フォームラベル、インターフェースコントロールに使用。
- 目的： インタラクティブインターフェースで明確、スキャン可能、アクション可能なテキストを提供
- 特徴： 中程度のサイズ、レギュラーからミディアムウェイト、適度な行の高さ
- コンテキスト： ナビゲーション、ボタン、メニュー、フォーム、ツールチップ、ステータスバー、設定パネル
ドックス
ドキュメント、ガイド、チュートリアル、リファレンスページなど長文読み取りに使用。
- 目的： 長時間の可読性を最大化
- 特徴： 快適な本文サイズ、ゆとりある行の高さ、明確な段落スペーシング
- コンテキスト： ドキュメントセンター、チュートリアル、API リファレンス、変更履歴、ナレッジベース記事
モノ / コード
CLI 出力、コードブロック、設定ファイル、インラインコード、ログ、ターミナル表示、技術識別子に使用。
- 目的： コードと技術コンテンツを本文から明確に区別
- 特徴： モノスペース、本文フォントとは異なる、リガチャサポートはオプション
- コンテキスト： コードスニペット、ターミナル出力、ファイルパス、変数名、設定キー、ログエントリ、コマンド例
タイポグラフィックスケール
見出しサイズ
- H1： メインタイトルに1ページ1回使用
- H2： 主要セクション見出し
- H3： セクション内のサブセクション見出し
- H4： サブセクション内の詳細見出し
- H5/H6： ほとんど使用しない；深くネストされたコンテンツのみ
本文サイズ
- ラージ本文： 導入段落、リードテキスト
- 標準本文： ドキュメントと説明のデフォルト読み取りテキスト
- スモール本文： セカンダリ説明、ヘルパーテキスト、メタデータ
注釈サイズ
- キャプション： 画像キャプション、テーブルヘッダー、図ラベル
- オーバーライン： カテゴリーラベル、バージョンタグ、セクションマーカー（通常大文字、小サイズ、ワイドレタースペーシング）
- 脚注： 法的テキスト、免責事項、細字
行の高さ
- 見出し：ビジュアル密度のためのタイトな行の高さ
- 本文テキスト：快適な読み取りのためのゆとりある行の高さ（1.5〜1.7倍）
- コードブロック：ベースライングリッドに整列する一貫した行の高さ
ウェイト
- レギュラー（400）： 本文テキスト、説明、ドキュメントコンテンツ
- ミディアム（500）： 強調された本文テキスト、ナビゲーション項目、フォームラベル
- セミボールド（600）： 小見出し、ボタンテキスト、テーブルヘッダー
- ボールド（700）： ページタイトル、主要見出し、主要コールアウト
レタースペーシング
- タイト： 大きなディスプレイ見出し
- ノーマル： 本文テキスト、UI ラベル
- ワイド： オーバーライン、大文字ラベル、スモールキャップ
フォント選択の原則
- オープンソース、商用利用可能フォントを優先
- フォントはプラットフォーム間（macOS、Windows、Linux、モバイル）で一貫してレンダリングする必要がある
- ウェブフォントは高速読み込みのため最適化されたサブセットを持つべき
- すべてのフォントレイヤーにフォールバックフォントスタックを定義
- コンテンツから注意をそらす過度な個性を持つフォントを避ける