タイポグラフィ

通常、テレビ画面は遠くから見るため、大きなタイポグラフィを使用するインターフェースは、読みやすく、快適になります。TV Design のデフォルトのタイプスケールには、幅広いユースケースをサポートする、対照的な柔軟なタイプスタイルが含まれています。

ハイライト

  • テレビ画面で快適に視聴するには、大きいタイポグラフィを優先的に使用します。
  • デフォルトの Android TV 書体は Roboto です。
  • ブランドのスタイルを最もよく表す、はっきりとした読みやすいフォントを選択します。
  • フォントが、適切な幅と光学的サイズで、ひと目で読み取れるようにします。
  • 補完的なフォントをペア設定します。たとえば、本文とラベルには Sans Serif を使用します。
  • 装飾フォントを避けて読みやすくします。

フォント

デフォルトの書体

Android TV には独自のシステム書体である Roboto があり、読みやすさと明瞭さを重視して最適化されています。ブランドのない実用的な UI 要素には、Roboto を使用します。これは、ネイティブ プラットフォーム エクスペリエンスを使用するのに最適です。

Roboto

特徴的な書体

該当する場合は、ブランドのスタイルを反映した特徴的なフォントを使用します。フォントを選択する際は、次の点を考慮してください。

  • 読みやすさ - 離れたところから読みやすくするには、大きなカウンタを備えた適切な光学サイズ調整の書体を使用します。文字を区別できるようにします。
  • 一目で読み取れる - テレビに表示されるテキストは、細い線はすぐには認識できないため、読みやすいフォント幅にする必要があります。
  • 補完的なフォントをペア設定する - 複数のフォントを使用する場合は、本文とラベルに Sans Serif 書体を使用します。
  • 装飾フォントはできる限り使用しないようにします。テレビのフォントサイズは他のディスプレイ サイズよりも大きくなりますが、UI テキストの読みやすさを優先します。本文として機能できないフォントを避けます。

書体の選択

タイプスケール

タイプスケールは、アプリ全体で使用できるフォント スタイルのセレクションです。柔軟でありながら一貫性のあるスタイルで、さまざまな目的に対応します。TV デザインのタイプスケールは 15 のスタイルを組み合わせたもので、それぞれに意図された用途と意味があります。「ディスプレイ」や「広告見出し」などの用途に基づいて割り当てられ、規模(大または小)に基づいてカテゴリに分類されます。TV Design のデフォルトのタイプスケールでは、すべてのタイトル、ラベル、本文に Roboto を使用して、統一されたタイポグラフィ エクスペリエンスを実現します。

タイプスケール

タイポグラフィ トークンと書体のカスタマイズについては、マテリアル デザイン 3 をご覧ください。

タイプの役割

ディスプレイ

デフォルトのタイプスケールには、大、中、小の 3 つの表示スタイルがあります。最大のテキストである大きなディスプレイ スタイルは、短く重要なテキスト文や数字用に予約されています。画面のメインの見出しに使用できます。セクションまたはクラスタの見出しには、大きな表示スタイルを使用しないでください。

タイプ ディスプレイ

見出し

見出しは、短く強調されたテキストに適しています。 これらのスタイルは、テキストの主要な文や重要なコンテンツ領域をマークする場合に便利です。注目のカルーセルや没入型クラスタの見出しに使用されます。見出しでは、行の高さと文字間隔を適切に設定して読みやすさを維持できるように、表現力豊かな書体を使用することもできます。

広告見出しを入力

タイトル

タイトルのスタイルは広告見出しのスタイルよりも小さくなります。簡潔で中強調のテキストにはタイトルを使用しますたとえば、タイトルを使用してテキストの二次的な文やコンテンツの二次的な領域を分割することを検討してください。

カードやリストなどの UI 要素にはタイトルを使用する。タイトルのサイズはコンパクトに抑えられており、妥当なレベルの視認性と読みやすさが確保されています。

タイプ: タイトル

本文

本文のスタイルは、アプリ内の長いテキスト文に使用されます。小さいサイズでも読みやすい、長い文でも読みやすい書体を使用します。本文には装飾フォントを使用しないでください。遠くから読みにくい可能性があります。

タイプ本文

ラベル

ラベルのスタイルは小さく、実用的なスタイルで、コンポーネント内のテキストや、キャプションなどのコンテンツ本文の非常に小さいテキストに使用されます。たとえば、ボタンにはラベル大スタイルを使用します。

タイプラベル