用途ごとのフォントサイズ、行間を定義したタイポグラフィ

Webを構成する基礎的な要素はテキストです。タイポグラフィはWebデザインにおける根幹です。

Font Face#

通常のテキストには A P-OTF UD Shin Go Pr6N / M を、ボールドには A P-OTF UD Shin Go Pr6N / DB を用います。

Line Height#

170% を基本とし、必要に応じて 150% や 140% を用います。

Semantic Type Settings#

実際のプロダクトではタイプ、サイズ、行間の組み合わせからなるセマンティックな定義を選択しデザインします。

タイプは Body、Heading、Note、Button、Tag の 5 つが存在します。テキスト全般は原則 Body を使用してください。ただし、見出しや補足分、その他 UI に他の定義が存在します。 Body と Note の行間はデフォルト 170%です。定義は複数あり、レイアウトの都合にあわせて*-narrow（150%）、*-tight（140%）を使い分けてください。

Body#

本文をはじめ、Heading や Note に相当しないものは Body を使用します。

Heading#

ページタイトルやセクションの見出しに使用します。

Button#

Button などアクションを促す UI のラベルに使う

Tag#

属性や分類を表す短いキーワード等に使用します。