マテリアルデザインに魂を売った男の末路 Typography編

執筆者：中山大悟

執筆年：2018年

※主は英語と日本語が得意ではありません。

赤文字は間違った例

黄色文字は好ましくない例

緑文字は正しい例

タイポグラフィとは、活字を用い、それを適切に配列し、文字の体裁を整える技能の事をさし、印刷物作成においてはもっとも基本かつ重要なものです。

こう言った印刷物の専門用語が出てくるのもマテリアルデザインの特徴ですね！（最近ではWebデザイン全体で使われたりもしてますが）

また、UIライブラリのコンポーネント名にもなったりしているので、名前も覚えておくといいでしょう。

活字について

タイポグラフィを使用して、デザインとコンテンツを可能な限り明確かつ効率的に表示します。

1. 活字のスケール

マテリアルデザインでの活字のスケールには、製品とそのコンテンツのニーズをサポートするさまざまなスタイルがあります。

活字のスケールは、サポートされている13のスタイルの組み合わせです。

それには、再利用可能なカテゴリのテキストが含まれており、それぞれに意図されたアプリケーションと意味があります

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1W8kyGVruuG_O8psvyiOaCf1lLFIMzB-N%2Ftypesystem-typescale.png

フォントサイズの単位

table:font size units

プラットフォーム Android ios Web

単位 sp pt rem

換算率 1.0 1.0 0.0625

コンバージョンの例

table:example conversion

Android ios web

10sp 10pt 0.625rem

12sp 12pt 0.75rem

24sp 24pt 1.5rem

60sp 60pt 3.75rem

Webブラウザはルート要素のサイズに基づいてREM（ルートemサイズ）を計算します。

現代のWebブラウザのデフォルトは16pxなので、変換はSP_SIZE / 16 = remです。

2. 活字のスケールを適用する

活字の尺度は、コンポーネントと全体のレイアウトにテキストとして表示されます。

活字のプロパティでは、書体、フォント、大文字、小文字、サイズ、文字間隔にカスタム値を使用できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15nZPBuV6ltK2FRwxrUo-RuBW4ODM5x9c%2Fapplyingtypescale-buckets-values.png

見出し

活字のスケールでは、見出しは1から6まで範囲があります。

見出しは、画面上の最大のテキストであり、重要で短いテキストまたは数字のために使用されます。

見出しの場合は、表示、手書き、またはスクリプトスタイルなどの表現力豊かなフォントを選択できます。

これらの独創的でないフォントデザインには、目を引くのに役立つ複雑さがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1foNJWxIuKmdfivR2kYX2rUY1wu8KSkbx%2Fapplyingtypescale-headlines-display.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F14feIkMvQQu0n3786M_3Uv6SQ9MDhfiU0%2Fapplyingtypescale-headlines-script.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F17edAt0f59SI-ecsXSkIQ5rEM457_ajLr%2Fapplyingtypescale-headlines-sans.png

上記のようなSerifまたはSansSerifの書体は、見出しの特に小さいサイズでうまく機能します。

サブタイトル

サブタイトルは見出しよりも小さいです。

SerifやSansSerifの書体はサブタイトルに適しています。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1iLARwpebcdd_z477DVhvhtEJbhYs6Wrj%2Fapplyingtypescale-subtitle-sanserif.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F19gzQPcTg4QGgHO1Zwr4j4Rt3p2iUzm1D%2Fapplyingtypescale-subtitle-expressive-caution.png

サブタイトルの場合、手書き、およびスクリプトスタイルを含む表現力豊かなフォントを使用する場合は注意が必要です。

本文

本文は小さなテキストサイズではうまく動作するため、通常は長形式の書き込みに使用されます。

テキストの長いセクションについては、SerifまたはSansSerifの書体が推奨されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1H1-UQam7N-ya38xVm9SHDIQmVv39LVkm%2Fapplyingtypescale-body-serif.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1-kKVnbAyJPGsd0khY6pWTqhfTdLQJQ4t%2Fapplyingtypescale-body-sanserif.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1lcYhzBfdTNQ_jmbzd9vHJGxOgHgy2fK7%2Fapplyingtypescale-body-decorative-dont.png

本文の表示に手書き、およびスクリプトスタイルを含む表現力豊かなフォントを使用しないでください

キャプションとオーバーライン

キャプションとオーバーラインテキストは、最小のフォントサイズです。

画像に注釈を付けたり、見出しを紹介するために使用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KznrSH-I5yOSCwtxRXBgv_T15TFqXZA9%2Fapplyingtypescale-capover-serif.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1grIVu5x4hImCyZVn6B03UTuhKw_SSy0X%2Fapplyingtypescale-capover-sanserif.png

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1j8o9Xbw_IYxb4cPt6N-imPemJOQsF8-l%2Fapplyingtypescale-capover-decorative-dont.png

キャプションやオーバーラインの表示に手書きやスクリプトスタイルなど、表現力豊かなフォントは使用しないでください

ボタン

ボタンのテキストは、さまざまな種類のボタンとタブ、ダイアログ、およびカードで使用されるアクションの起点になるものです。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1MAj_XQNclJloKf7XuN0UEgbJn1x0xydd%2Fapplyingtypescale-button-sanserif.png

ボタンはserifまたはsans serifにすることができます

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1jyyR9U1HbE4b7WnPgN3rGI-quLGXMrQl%2Fapplyingtypescale-button-sanserif-uplow.png

ボタン付近のサンセリフの書体など、非対話的なテキストとは区別してボタンテキストを表示する場合は注意が必要です

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1anoCY23opbJ9JgbUkHR8beI3lB_ZZ-od%2Fapplyingtypescale-button-decorative-dont.png

表示に手書き、およびスクリプトスタイルを含む、表現力豊かなフォントをボタンテキストとして使用しないでください

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

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

タイポグラフィは、階層とブランドの存在を表しています。

1. 活字のプロパティ

書体は文字の集まりです。

それぞれの文字はユニークですが、特定の図形は文字間で共有されます。

1つの書体は、複数の文字の集合にわたる共有パターンを表しています。

スタイル、読みやすさ、および可読性のために選択された書体は、印刷デザインの基本原則に従うときに最も効果的です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0BzCQdutE8gumVE9NYmg5cU83N2s%2Fanatomy.png

ベースライン

ベースラインは、1行のテキストが置かれている目に見えない線です。

マテリアルデザインでは、ベースラインはテキストと要素の垂直距離を測定する上で重要な仕様です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F19gOJJninWAHgPqTpFgKarVcjI2qz9cJP%2Fbaseline.png

4dp グリッド

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

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1DRioa6-9vycSdT6sMiAwnJIPvrQyRQob%2Ftype-setting-4dp-lineheight.png

pt / spのサイズにかかわらず、テキストのベースラインは4dpグリッド上になければなりません。

線の高さは、グリッドを維持するために4で割り切れる値でなければなりません。

ベースラインからの測定

ベースラインからUI要素との距離を指定します。

ベースラインの値はソフトウェアに依存しないため、どのデザインでも動作し、グリッドで作用します。

AndroidおよびiOSでは、コードをベースライン相対仕様からパディングに変換できます。

ウェブの場合は、SassまたはCSSを使用して計算を自動化します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1XfS9DMhlPihgJmjRFH7r9OYpLbZJGF6A%2Ftype-setting-baseline.png

バウンディングボックスではなく、垂直配置のベースラインを参照します。

これにより、設計ソフトウェアとプラットフォーム全体でより正確な実装が可能になります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1JaZI_etM-JPQp8SgyvVoctB3hZ6oQADo%2Ftype-setting-ex1.png

他のコンポーネントと関連してテキストを測定する。

頂点の高さ(Cap Height)

頂点の高さは、ベースラインから測定した書体の平らな大文字（MやIなど）の高さを指します。

SとAのような丸い小文字と尖った大文字は、キャップの高さよりわずかにオーバーして光学的に調整され、同じサイズの効果が得られます。 すべての書体には一意の頂点の高さがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F18HqmIDXoY-276gkLbeP0DZIlyt_15sQx%2Fcap-height.png

X-height

X-heightは、書体の小文字のxの高さを表し、書体内の各字形の高さまたは短さを示します。

X-heightの高い書体は、各文字の空白が読みやすくなるので、小さなフォントサイズで読みやすくなります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1DwX2JtwAzqLoBSM9-suE5cg4fYkZ0RLE%2Fx-height.png

アセンダ(Ascender)とディセンダ(Descender)

場合によっては、行の高さ（ベースライン間の垂直距離）が狭すぎると、これらの線の衝突が発生することがあります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1OPmUXX8PrNZ-4Ux25xQBrv_xyNljvAXM%2Fascender-descender.png

ウェイト(Weight)

ウェイトとは、フォントのストロークの相対的な太さを指します。

書体には多くのウェイトがあります。 4〜6のウェイトは、書体に使用できる典型的な物です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1aHlWybeCHA3Df5guXtrLF53yn9iNopqO%2Fweight.png

共通のウェイト

2. 活字の種類

Serif

Serifは、文字の上のストロークの始めまたは終わりに現れる出張りが特徴です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F10ePZa-HbOPn2XkygXYKCb2VzaPkV7R8F%2Fserif.png

1. インクで書いたようなオールドスタイルのSerif

2. 太いストロークと細いストロークのコントラストが高いTransitional Serif

3. 太いストロークと細いストロークコントラストが非常に高いディゾン又はネオクラシックなSerif

4. 太いストロークと細いストロークが認識できないSlab Serif

Sans Serif

Serifのない書体は、フランス語の "sans"から "without"を意味するSans Serif Typefaceと呼ばれます。

Sans Serifは、次のいずれかに分類できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1skKtua4brK2NbH-bgSLD3Tp69oR_9383%2Fsan-serif.png

1. Grotesque: 太いストロークと細いストロークとのコントラストが低くもっとも滑らか

2. Humanist: 太いストロークと細いストロークのコントラストが中程度あり、少し傾いている

3. Geometric: 太いストロークと細いストロークの間のコントラストが低く、丸みがかっている

Monospace

Monospaceの書体は、すべての文字を同じ幅で表示します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F18zBg6eKgJOiCChOFDpw7TPOiQae1T_5C%2Fmono.png

1. Roboto Mono, monospace

2. Space Mono, monospace

3. VT323, monospace

Handwriting

手書きの書体は、自然で手書きの感じで独創的です。

以下のような種類があります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Xr5NZbocdRHNaL0xb9j0OIr2N2SG5wuu%2Fhandwriting.png

1. Black letter: 高コントラストで狭く直線と角が曲線になっているのが特徴

2. Script: 書道様式を形式的に複製したもの

3. Handwriting: 手書きを非形式的に複製したもの

Display

大きなポイントサイズでの使用にのみ適している分類タイプの中では雑多なカテゴリです。

表示フォントは通常、タイプスケールでH1〜H6として使用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1JgG5igqKFKfaroMD3ZJxMEfs4hXSfBFO%2Fdisplay.png

3. 読みやすさ

読みやすさは書体の文字によって決定されます。

書体のスタイルの影響を受ける単語やブロックが読みやすいことも指しています。

文字間隔

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

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1MF4_nE-ir17w9_GDsUtpkQvcPqtpe8hM%2Fletterspacing.png

見出しなどの大きなフォントサイズは、読みやすさを向上させ、文字間のスペースを減らすために、文字間隔を狭めます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1kmoGz95zXbNF1AgK_sNwuUJcP1eDKB10%2Freadability-tight-tracking.png

より小さいフォントサイズの場合、文字間のスペースが広がると読みやすさが向上します。

すべてのキャップテキストは、小さい文字サイズであっても、文字間隔が広がっているため、読みやすさが向上します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F12FMbXCIWVulSJyiEugdH1ObnxEvKOJah%2Freadability-looser-tracking.png

テーブルの数字

値が頻繁に変更される可能性のあるテーブルまたは場所では、比例数字ではなく表形式の数値（固定幅の数値）を使用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1g9IYzpn4DfEGFQB0o_Ne-fOubSh3FFVu%2Freadability-tabular-figures.png

行の長さ

本文の行の長さは通常40〜60文字です。

デスクトップのように線の長さが長い領域では、120文字までの長い行には20spから24spまでの行の高さが必要になります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1XJOxoakBnzdtPjP_jW3CiE2IW4KEv1TO%2Freadability-ideal-linelength.png

理想的な行の長さは、英語本文の行あたり40〜60文字です

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1OXnWttyjybed9benMpAxN0grQdxoUwTN%2Freadability-short-linelength.png

英語のテキストの短い行の理想的な行の長さは、1行に20-40文字です。

行の高さ

行の高さは、テキストブロック内のベースライン間のスペースの量を制御します。

テキストの行の高さは、そのフォントの大きさに比例します

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1b_eDSKKx55WjClBzCdioFKBIS0MuQXvp%2Freadability-line-height.png

段落の間隔

段落の間隔は、フォントのサイズの0.75xと1.25xの間の範囲にとどめてください。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1ds3iRNQHtmi0o_iWfhluLFQudei9Sygq%2Fparagraph-spacing.png

文字の整列

文字の整列は、テキストが表示されているスペース内のどのように整列するかを制御します。

以下のように3つのタイプがあります。

Left

左揃えのテキストは、英語などの左から右の言語で最も一般的な設定です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1LIN3XBf8vHAxgGWX38YOkOEvOe5cISbE%2Ftypealign-left.png

Right

右揃えのテキストは、アラビア語やヘブライ語など、右から左に表示される言語の最も一般的な設定です。

左から右の言語でも右揃えのテキストを使用することができ、レイアウト内の短いタイポグラフィ要素（サイドノートなど）を区別するのに最適ですが、長いコピーにはお勧め出来ません。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1D6M41t996wRXomG63AjfXD9zTUsm2vCc%2Ftypealign-right.png

Centered

中央揃えのテキストは、レイアウト内の短い書体要素（引用符を引くなど）を区別するのに最もよく使用され、長いコピーには推奨されません。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1UEEn7jrvFC5_DtZfwoYj3mqVlNPboj1z%2Ftypealign-center.png

4. システムフォント

システムフォントは、コンピュータまたはデバイスにあらかじめインストールされています。

通常、言語サポートは広く、開発者のライセンス費用はありません。

アプリのフォントでシステムのデフォルトフォントを使用すると、アプリのルック&フィールとプラットフォームの一貫性が得られます。

しかし、デバイスの多くの場所に表示されるため、目立たないことがあります。

ルック&フィールとは、「見ため・感じ」の意味で、コンピューターやOSなどのデザインと操作感の総称である。ユーザーの使用体験（印象）を向上させる、あるいはシステムの独自性を確保するための重要な要素である

システムフォントを使う

ネイティブシステムの書体は、大きなテキストブロックと14sp以下のテキストに使用する必要があります。

RobotoはAndroidのデフォルトのシステムフォントです。

Android以外のプラットフォームやWeb製品の場合は、そのプラットフォームで使用するシステム書体を使用してください。

たとえば、iOSアプリケーションでは、Appleのサンフランシスコフォントを使用する必要があります。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

言語をサポート

言語のサイズと表示スタイルは、文字セットが英語のようなものか、背の高いものか、密なものかによって異なります。

1. 言語の考慮事項

グリフ

グリフとは、「絵文字」という意味で、コンピューター関連では、文字の実際のイメージ(ビットパターンやアウトラインなど)を指す。 たとえば、イタリック体やボールド体など、同一フォントの同一文字でも、文字属性が異なると実際の文字イメージは異なる。

書かれた各言語は、グリフと呼ばれる独自の文字セットを使用します。

UIが複数の言語を使用する場合、タイポグラフィのレイアウトは言語によって異なるはずです。

言語ごとの単語の長さの平均と高さは異なるため、UI全体でどのように表示されるかに影響します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1E5qitXzF0zEuTAaPV2vlJ9UTmh3XOzzI%2F15-b-language.png

長さ

単語の長さは、英語やドイツ語など、同様のグリフを使用する場合でも、言語によって大きく異なる場合があります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1HNd9cWLNsLPv3kCCLEOd3m7pD2-seXni%2Flength.png

英語はしばしば他のヨーロッパ言語よりも短いです。

例えば、ドイツ語には長い複合語が多く、より多くの行や行間が必要です。

整列

アラビア語やヘブライ語などの一部の文字体系は、右から左に表示される文字で表示されます。

これらのフォントは、同じフォントサイズのラテン文字よりも小さく表示されることがあり、すべての言語のUIでタイポグラフィがうまく機能するように、行間隔や配置を調整する必要があります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1sXgv0wH7wYdaxUsCpF_oSBJujD34G30U%2Fhebrew.png

高さ

多くの書込みシステムでは、英語よりも多くの縦書きスペースが必要です。

したがって、これらの異なるシステムには十分な垂直スペースが必要です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1_ohgmqTcutqh_BvSN7KZDMQ2-Z-RH3s1%2Flanguage-support.png

ベトナム語はラテン語で書かれていますが、アクセントは特定の文字に高さを加えています。

縦書き

縦書きは、めったに使用されませんが、文字を横方向ではなく縦方向に表示できます。

中国、日本、韓国のタイポグラフィは、通常はモノスペースであり、各文字が他の文字と同じ量のスペースを占めることを意味します。

それはしばしば、左から右、上から下に設定されます。 また、上から下、右から左の順に設定することもできます。

言語オプション

多言語コンテンツを表示するために複数の書体を同じUIで使用する必要がある場合があります。

ライティングシステムは、次の3つのカテゴリに分類できます。

英語のような書体

西ヨーロッパ、中央ヨーロッパ、東ヨーロッパ、そして多くのアフリカの言語は、通常、ラテンアルファベットで書かれています。

ベトナム語は、ラテン語の書記体系のローカライズされた形式を使用していますが、アクセント付きグリフは西欧言語よりもはるかに大きくなることがあります。

ギリシア語とキリル文字の書記体系は、ラテン語に非常に似ています。

背が高い書体

アラビア語、ヒンディー語、テルグ語、タイ語、ベトナム語などの南、東南アジアおよび中東の言語を含む、より大きなグリフに対応するために余分な行の高さが必要な言語スクリプト。

密な書体

中国語、日本語、韓国語を含む、より大きなグリフに対応するために余分な行の高さが必要な言語スクリプト。

2. Notoガイダンス

Notoは、Robotoの対象外のすべての言語のデフォルトの書体です。

Droidから派生した、高さとストロークの厚さが互換性のある言語とスクリプトで視覚的に調和するように設計されています。

このファミリーには、Unicodeバージョン6.0で定義された93のスクリプトがあります。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

以上でタイポグラフィの話は終了です。

だいぶフォントの勉強になりました、フォントの種類を知っていいれば探すのも捗りそうです！

フォントの知識はプレゼン資料作成にも有効です。

次回は「」です。