Typography (タイポグラフィ)

Indigo.Design システムには、タイポグラフィを構成し、テーマの書体を設定できる 12 のテキスト (文字) スタイルがあります。デフォルトで Titillium Web を使用していますが、すべてのデザイナーがアプリケーションを柔軟にカスタマイズできるようにする必要があります。Indigo.Design は、マテリアルタイプシステムでタイポグラフィが定義されている方法に従い、Ignite UI for Angular タイポグラフィの実装に準拠しています。

Sketch では、これらは 🎨 Typography という名前の別のページにあり、任意テキスト要素に適用できる Text Styles として利用できます。Adobe XD では、ライブラリファイルの左側の列にある同じ名前のアートボードに配置され、コンポーネントやパターン全体で使用される Character Styles として存在します。

Typography のスタイル

プロジェクトでタイポグラフィシステムを使用するには、ライブラリで定義されているテキスト (文字) スタイルの 1 つをネイティブテキスト要素に適用するだけです。Sketch は、さまざまなサイズ、カラー、および配置のタイププリセットの幅広い選択肢を提供しますが、Adobe XD はサイズのみを定義し、配置を調整してカラースタイルを適用できます。

タイトルの H1 から H6 までの 6 つの見出し。
2 つの Subtitle サイズ。
2 インターフェイスの段落コンテンツの Body サイズ。
無料のコンテンツに使用できる Caption と Overline スタイル。
Button コンポーネントでのみ使用される BUTTON スタイル。

これらのスタイルは、アプリケーションの関連レイヤーに対して生成されるテキスト要素とタイポグラフィクラスのタイプも決定します。以下の要素は、一般的なテキストレイヤーに適用されるタイポグラフィテキストスタイルに基づいて生成されます。

見出しのタイポグラフィスタイルの見出し <h1> から <h6>。
タイポグラフィクラスの段落 <p>:
- 2 つの字幕タイポグラフィスタイルの場合は、igx-typography__subtitle-1/igx-typography__subtitle-2。
- 2 つの本体タイポグラフィスタイルの場合は、igx-typography__body-1/igx-typography__body-2。
- キャプションタイポグラフィスタイルの場合は igx-typography__caption。
- オーバーラインタイポグラフィスタイルの場合は igx-typography__overline。

これらのスタイルは、Sketch プラグインを介してさらに変更し、アプリケーションレベルのテーマ設定を介して要素の外観を変更できます。

記事、ブログ投稿などの高度なレイアウトを作成する場合に使用します。Indigo.Design システムの Text Styles は、デザインのすべてのテキストに一貫性のあるテーマとスタイルを定義します。

Warning

Sketch には、検証や特殊なケースのためにコンポーネント内で使用される Internal テキストスタイルのコレクションもあります。これらのスタイルは、アートボードに直接挿入されることは想定されていませんが、使用されるコンポーネントのタイポグラフィの一貫性を確保するために存在します。

コンポーネント固有のタイポグラフィ

Avatar、Button、Grid、Slider および Tooltip は、コンポーネント固有のタイポグラフィを使用して、それぞれのコンポーネントで使用されるスタイリングの詳細に対応します。たとえば、イニシャル付きの Avatar と Button は大文字のスタイルを使用します。以下に、Sketch で Avatar 用に定義されたテキストスタイルを示し、フォントのカラーをより多様に使用できるようにします。

Sketch のタイポグラフィカラーバリアント

Sketch では、テキストスタイルにテキストのカラーが含まれているため、それぞれが複数のプリセットカラーで提供されます。たとえば、grays.900 に対応する active、grays.700 に対応する inactive、grays.500 に対応する disabled、white および secondary などです。success、warn、および error カラーが必要な文字列の特別なカラーのスケールがあり、Indigo.Design コンポーネント固有のバリアントもあります。

Sketch で書体を変更

Sketch で Titillium Web から別の書体に書体を変更するには、Indigo.Design ライブラリファイルを開き、View / Components を選択します。Sketch メニューに 4 つのボタンのグループがあります。2 つ目のボタンは文字アイコンで、Show Text Styles 表します。

選択後、Indigo.Design システムが定義するすべてのテキストスタイルを参照できます。左側のパネルで All Text Styles が選択されていることを確認し、Sketch の中央部分をクリックして command + A を押してすべてのスタイルを選択します。

右側のパネルにあるすべての Text Styles に別の書体を選択できるドロップダウンがあります。これで設定が完了し、変更はすべての Text Styles を更新するだけでなく、すべてのコンポーネントとパターンに自動的に反映されます。

Sketch の Text Styles はカラー変数を使用してテキストの color プロパティを定義します。したがって、Colors のトピックで説明されている手順に従って primary カラーを変更すると、すべてのプライマリ Text Styles が自動的に更新されます。

Adobe XD で書体を変更

Adobe XD で書体を Titillium Web から別の書体に変更するには、Indigo.Design ライブラリファイルを開き、Libraries パネルを選択します。次に、Character Styles までスクロールして、そのうちの 1 つを右クリックし、表示されるコンテキストメニューから Edit を選択します。ポップオーバーでは、上部にドロップダウンがあり、別のフォントファミリを選択できます。すべてのタイポグラフィでこの変更を修正するには、すべてのスタイルに対して同じ手順を個別に実行する必要があることに注意してください。

カスタム Typography の作成

さまざまなユーザーインターフェイスをデザインするには、タイポグラフィのさまざまなスタイルで十分です。ただし、特別なユースケースのために追加のスタイルを作成する必要がある場合があります。すべてのプロジェクトに対してグローバルに定義する場合は、Indigo.Designライブラリで定義します。現在のプロジェクトの範囲内でのみ意味のあるものである場合は、代わりにプロジェクトファイルで実行してください。