見出し画像

[日本語]マテリアルデザイン 『Understanding typography』#18

UNI | UI designer

はじめに
今回は『マテリアルデザインガイドライン』の『Understanding typography
』について解説していきます。なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

Typography(文字組み)

マテリアルデザインでは「Typography」に関する基本原則を設けています。
UIデザインをする際は、この基本原則に従う必要があります。

Baseline

「Baseline」は、「文字が置かれている基本的なライン」のことです。
また、「Baseline」は、「行間」を決めるための重要なラインの役割もあります。

4dp grid

「Baseline」は文字のサイズに関係なく、「4dp」の「Gridline」上に配置することが規定されています。
そのため、行の高さは「4」で割り切れる単位にする必要があります。

行間は、「Baseline」を基準に指定します。
また、「Baseline」の値は「Grid」と連動し、ソフトウェアに依存しないため、どのプログラムでも機能します。

(左)「Baseline」を基準に、行間を指定
(右)コンポーネント内で行間を規定


Cap height

「Cap height」とは「文字の高さ」を指します。
全ての文字は固有の「Cap height」を持っています。

X-height

「X-height」とは、「小文字の高さ」を指します。

Ascenders and descenders

「Ascender」とは、「Cap height」を上にはみ出す小文字に適用される高さのラインです。

「Descender」とは、「Baseline」を下にはみ出す小文字に適用されるラインのことです。

Ascenders and descender

Weight

「Weight」とは、フォントの「太さ」を指します。
1つのフォントに対して基本的には、4〜6種類ほどの「Weight」があります。

1. Light 2. Regular 3. Medium 4. Bold

Type classification(フォントの種類)

Serif

「Serif(セリフ体)」は、文字の書き出しや書き終わりに「突起」が付いているのが「Serif」の特徴です。

1. EB Garamond, old-style serif 2. Libre Baskerville, transitional serif 3. Libre Bodoni, didone / neoclassical serif 4. Bitter, slab serif

Sans Serif

「Sans Serif(サンセリフ体)」は「Serif」とは反対で、文字の書き出しや書き終わりに「突起」が付いていないフォントです。
また、「Sans 」は、フランス語で「無し」という意味です。

1. Work Sans、grotesque sans serif 2. Alegreya Sans、humanist sans serif 3. Quicksand、geometric sans serif

Monospace

「Monospace」は、全ての文字が等幅(同じ幅)のフォントです。

1. Roboto Mono, monospace 2. Space Mono, monospace 3. VT323, monospace

Handwriting

「Handwriting」は、手書き感のあるフォントです。
また、「Handwriting」のフォントは、基本的に「Type scale」のH1〜6(見出し)に対して使用されます。

1. UnifrakturMaguntia, black letter 2. Dancing Script, script 3. Indie Flower, handwriting

Display

「Display」は、「Handwriting」と同様で、基本的には「Type scale」の「H1〜6(見出し)に対して使用されます。

1. Shrikhand, display 2. Chewy, display 3. Faster One, display

Readabilitylink(可読性)

Letter-spacing

「Letter-spacing」は、「tracking」とも呼ばれ、文字と文字の間隔を均一に調整することを指します。

また、見出しなどの大きなフォントサイズの場合は、「Letter-spacing」を狭くすることで、読みやすさが向上します。

反対に、小さいフォントサイズの場合は、「Letter-spacing」を広くすることで、読みやすさが向上します。

Tabular figures

「Tabular figrures」とは、「数字を使用する表」を指します。
また、「Tabular figrures」では、文字詰めした数字ではなく等幅(同じ幅)の数字を使用します。

Line length

「Line length」は、「文章の1行の長さ」を指します。
「Line length」は、基本的には英字で「40〜60文字」が理想とされています。

ただし、デスクトップなどの表示領域が広い画面では最大 で「120文字」まで表示できますが、その際は「行間」を「20〜24sp」ほど確保する必要があります。

短い文章の「Line length」は、 20 ～ 40 文字が理想です。

Line height

「Line height」は、「leading(行送り)」とも呼ばれ、「行間(行の高さ)」を指します。
テキストの「Line height」は、フォントサイズに比例します。

1. Type size 14, Line-height 20dp 2. Type size 20, Line-height 28dp

Paragraph spacing

「Paragraph spacing(段落の間隔)」は、フォントサイズの「0.75〜1.25倍」の高さとすることが推奨されています。

Type size 20sp, line-height 30dp, paragraph spacing 28dp

Type alignment

「Type alignment(文字の整列)」には、以下の3つの種類があります。

  • Left-aligned(左揃え):テキストを左に揃える場合

  • Right-aligned(右揃え):テキストが右に揃える場合

  • Centered(中央揃え):テキストが表示される領域の中央に揃える場合


(左揃え)英語などの「左から右へ書かれるテキスト」に対して一般的に使用される「Type alignment」です。
(右揃え)補足説明などに適していますが、長い文章への使用には適していません。
(中央揃え)区別して強調したい場合などに「Centered」は使用されます。

System fonts

「System font」は、各プラットフォーム(OS)にあらかじめインストールされているフォントのことです。
なお、Android OSでは「Roboto」、iOSでは「San Francisco」がデフォルトの「System font」です。

まとめ

今回は、マテリアルデザインの「Understanding typography(文字組みの理解)」の種類について解説しました。

ちなみに、マテリアルデザインでは、英字の場合は「Roboto」を使用しますが、日本語の場合は「Noto Sans」を使用することが推奨されています!
(知らずにしばらくRobotoで作っていたのは私です!)

また、次回の言語サポートの記事で詳しく書かれていますので読んでいただけましたら幸いです。

最後まで読んでいただきありがとうございました!

いいなと思ったら応援しよう！