Googleマテリアルデザイン⑤(タイポグラフィ)

Googleマテリアルデザイン⑤(タイポグラフィ) UIデザイン
UIデザイン デザイン

タイプシステム

タイプスケール

タイプスケールは、タイプシステムでサポートされている13のスタイルの組み合わせです。再利用可能なテキストのカテゴリが含まれており、それぞれに目的のアプリケーションと意味があります。

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • Subtitle1
  • Subtitle2
  • Body1
  • Body2
  • BUTTON
  • Caption
  • OVERLINE

タイプスケールジェネレータ

搭載 Google Fonts、タイプスケールジェネレータは、タイプスケールと対応するコードを作成するためのツールです。

フォントサイズの単位

  • アンドロイド → sp
  • iOS → pt
  • ウェブ → rem

文字間隔単位

  • アンドロイド → em
  • iOS → pt
  • ウェブ → rem

タイプスケールの適用

◉注意

本文やキャプション、ボタンに表現力豊かなフォントを使用しない

H

見出しは1〜6の範囲です。見出しは画面上で最大のテキストであり、短く重要なテキストまたは数字用です。

見出しには、手書き、スクリプトスタイルなどの表現力豊かなフォントを選択できます。これらの型破りなフォントデザインには、目を引くのに役立ちます。

Subtitle

字幕は見出しよりも小さいです。これらは通常、長さが短い中程度の強調のテキスト用です。

セリフまたはサンセリフ書体が適しています。

Body

本文のテキストの範囲は1〜2で、テキストサイズが小さい場合に適しているため、通常は長い形式の書き込みに使用されます。

セリフまたはサンセリフ書体をお勧めします。

CaptionとOVERLINE

キャプションと線が引かれたのテキストは、最小のフォントサイズです。これらは、画像に注釈を付けたり、見出しを紹介したりするために控えめに使用されます。

BUTTON

ボタンのテキストは通常​​、すべて大文字のサンセリフです。

大文字小文字、サンセリフ、またはセリフにすることができます。

タイポグラフィを理解する

タイププロパティ

ベースライン

ベースラインは、テキスト休符の時に行目に見えないラインです。マテリアルデザインでは、ベースラインはテキストと要素の間の垂直距離を測定する際の重要な仕様です。

4dpグリッド

タイプは4dpベースライングリッドに揃えられます。

UI要素からの距離はベースラインから測定します。

キャップハイト

キャップハイトは、ベースラインから測定された書体のフラット大文字(MやIなど)の高さを指します。

SやAなどの丸くて先のとがった大文字は、キャップの高さより少しオーバーシュートして描画することで光学的に調整され、同じサイズの効果を実現します。すべての書体には固有のキャップハイトがあります。

エックスハイト

エックスハイトは、書体の小文字のxの高さを指し、書体の各グリフの高さまたは短さを示します。

背の高いエックスハイトの書体は、各文字内の空白が読みやすくなるため、小さいフォントサイズでも読みやすくなります。

アセンダーとディセンダー

アセンダーは、キャップの高さまたはベースラインのいずれかを超えて伸びる特定の小文字に見られる上向きの垂直ストロークです。

ディセンダーは、これらの文字の下向きの垂直ストロークです。場合によっては、線の高さ(ベースライン間の垂直距離)がきつすぎると、これらのストローク間の衝突が発生する可能性があります。

重さ

重さは、フォントのストロークの相対的な厚さを指します。書体にはさまざまな重みがあります。また、4〜6個のウェイトは、書体で使用できる一般的な数値です。

タイプ分類

セリフ

セリフは手紙のストロークの最初や最後に表示される小さな形状や突起です。セリフのある書体はセリフ書体と呼ばれます。セリフフォントは、次のいずれかに分類されます。

  • 古いスタイルのセリフ
  • 移行セリフ
  • ディドーンまたは新古典主義のセリフ
  • スラブセリフ
サンセリフ

セリフのない書体は、「なし」を意味するフランス語の「sans」から、サンセリフ書体と呼ばれます。サンセリフは次のいずれかに分類できます。

  • グロテスク
  • ヒューマニスト
  • 幾何学的
モノスペース

等幅フォントは、すべての文字を同じ幅で表示します。

手書き

手書きの書体は型破りで、自然な手書きの感触があります。これらは通常、タイプスケールでH1-H6として使用されます。それらは次の形式で提供されます。

  • ブラックレター
  • スクリプト
  • 手書き
ディスプレイ

大きなポイントサイズでの使用にのみ適しているすべての分類タイプのその他のカテゴリ。表示フォントは通常、タイプスケールでH1〜H6として使用されます。

読みやすさ

文字間隔

トラッキングとも呼ばれる文字間隔は、テキスト内の文字間のスペースを均一に調整することを指します。

見出しなどの大きなタイプサイズでは、読みやすさを向上させ、文字間のスペースを減らすために、より狭い文字間隔を使用します。

タイプサイズが小さい場合、文字間のスペースを増やすと各文字の形状間のコントラストが高くなるため、読みやすさが向上します。

値が頻繁に変更される可能性のある表では、等幅数字を使用してください。

行の高さ

本文の行の長さは通常40〜60文字です。デスクトップなど、行の長さが広い領域では、最大120文字を含む長い行では、行の高さを20spから24spに増やす必要があります

行の高さは、行送りとも呼ばれ、テキストブロック内のベースライン間のスペースの量を制御します。テキストの行の高さは、そのタイプのサイズに比例します。

段落間隔

段落間隔は、タイプサイズの.75xから1.25xの範囲に保ちます。

タイプの配置

タイプの配置は、テキストが表示されるスペースでどのように配置されるかを制御します。3つのタイプの配置があります。

  • 左揃え
  • 右揃え
  • 中央揃え

システムフォント

システムフォントは、コンピューターまたはデバイスにプリインストールされています。通常、幅広い言語をサポートしており、開発者向けのライセンス費用はかかりません。アプリのフォントでシステムのデフォルトフォントを使用すると、プラットフォームの一貫性とアプリのルックアンドフィールが統合されます。ただし、デバイスの多くの場所に表示されるため、目立たない場合があります

ネイティブシステム書体は、テキストの大きなブロックおよび14sp未満のテキストに使用する必要があります

  • Android → Roboto
  • iOS → SanFrancisco

タイトルとURLをコピーしました