タイポグラフィ

Spaceshipのタイポグラフィ環境は、親しみやすくテクニカルなGotham Roundedと、よりシンプルで幾何学的なProxima Novaの2つの書体を使用しています。

Hero Image

Spaceshipのタイポグラフィは自信に満ちていて率直であり、私たちのオーディエンスに対して親しみやすく会話的なトーンを可能にします。



メインフォント

Gotham Roundedは親しみやすさと洗練さを兼ね備えた書体です。Spaceshipのロゴ、製品サブブランド、チームのアイデンティティにのみ使用されます。許可されているウェイトはミディアム、ブック、ライトのみです。









サブフォント

Proxima NovaはSpaceshipのグラフィック環境の重要な要素です。すべてのコミュニケーションのメイン書体です。許可されているウェイトはボールド、ミディアム、レギュラー、ライトのみです。









スケール

タイプスケールシステムと必要なサイズステップは黄金比(1:1.618)を用いて構築・決定されました。私たちは、タイポグラフィスケール計算機を使い、プライマリベースサイズから完全なタイプスケールセットを作成しました。黄金比はサイズ間に大きな差を生むため、より最適な範囲を生成するにはセカンダリベースサイズ(ベースサイズの2倍)が必要です。下記の例は16pxと32pxのベースサイズに基づくタイプスケールを示しています。









テキストスタイル

Proxima Novaは小さな本文テキストと大きな見出しの両方で最大の光学的一貫性を持っています。その幅広いウェイトのバリエーションにより、あらゆるトーンやメッセージに適しています。左揃えのテキストが推奨されますが、必要に応じて中央揃えも使用できます。




大きな見出しには、ボールドウェイト、オプティカルカーニング、自動行送り、80%のワードスペースを使用してください。


通常の見出しには、ボールドウェイト、オプティカルカーニング、自動行送り、80%のワードスペースを使用してください。


短いサブヘッドには、ミディアムまたはレギュラーウェイト、オプティカルカーニング、自動行送り、100%のワードスペースを使用してください。


長いサブヘッドには、ミディアムまたはレギュラーウェイト、オプティカルカーニング、自動行送り、100%のワードスペースを使用してください。


段落には、レギュラーまたはライトウェイト、メトリクスカーニング、自動行送り、100%のワードスペースを使用してください。


小さな本文には、レギュラーまたはライトウェイト、メトリクスカーニング、自動行送り、100%のワードスペースを使用してください。







タイポグラフィ階層

効果的なコンテンツ階層のために、タイポグラフィは見出し、サブヘッド、本文の組織的な関係を伝える必要があります。適切なウェイトとサイズの組み合わせは強い視覚的コントラストを生み出し、読者を導きます。









安全マージン

最大の可読性を保証し、次のテキストブロックのための安全なマージンを確立するために、見出しの行送りを行間の基準として使用します。









カラーバリエーション

テキストをソリッドカラーの背景で使用する場合、下記のカラーバリエーションのみが許可されています。










背景

コントラストと可読性は、画像やカラーバックグラウンド上でテキストを使用する際に考慮すべき重要な要素です。










ガイダンス

テキストを扱う際に避けるべき例をいくつかご紹介します。




定義されたカーニング、ワードスペース、行送りの値を大幅に変更しないでください。


階層を意識してください:強い見出し、軽いサブヘッド、本文など。


右揃えの段落は使用しないでください。


補助色、製品色、サブブランド色など、他の色をテキストに使用しないでください。


カラーバックグラウンド上では白またはダークグレーのテキストのみを使用してください。


可読性が重要です。複雑な画像や類似色の背景の上にテキストを配置しないでください。