タイポグラフィー／Typography

使用する文字サイズは、定義された範囲内で使用します。
統一されたタイポグラフィを維持するため、規定外のサイズは使用を避けてください。

書体｜フォントファミリー

日本語サイトにおいては全てNoto Sans JPを、欧文サイトにおいては全てHindを使用します。

フォントファミリー：Noto Sans JP, Hind

太さ｜フォントウェイト

全ての文字ウェイトは以下の中のいずれかを使用します。

フォントウェイトの一覧

日本語基本文字スタイル（太さ・文字サイズ・行間・文字間）

文字サイズ（font-size）及び行間（line-height）、文字間（letter-spacing）、文字の太さ（font-weight）はセットで定義され、以下の種類が定義されます。また、Body以外のサイズには font-feature-setting: "palt" 1; を設定します。

以下の書式：（スタイル名） - （文字の太さ）（文字サイズ/行間_その比率）（文字間）

日本語フォントの基本文字スタイル

英語基本文字スタイル（太さ・文字サイズ・行間・文字間）

文字サイズ（font-size）及び行間（line-height）、文字間（letter-spacing）、文字の太さ（font-weight）はセットで定義され、以下の種類が定義されます。日本語で設定していた font-feature-setting: "palt" 1;は欧文では設定しません。

Hindフォントについて

全てのフォントには独自の文字サイズがあり、同じ数値の文字サイズを指定しても、視覚的に文字の大きさが異なることがあります。本スタイルガイドで設定しているNoto Sans JPとHindにおいては、フォント独自のサイズの違いが大きく、そのままの数値では期待された文字サイズを実現することが困難です。このため、Hindの文字サイズは、Noto Sans JPのフォントサイズに対して1.06倍を指定することで、視覚的なバランスを取っています。このルールは実装上日本語と英語で同じスタイルに対して文字サイズが異なることを意味します。特に実装を行う際にご注意ください。

以下の書式：（スタイル名） - （文字の太さ）（文字サイズ/行間_その比率）（文字間）

英語フォントの基本文字スタイル

日本語・英語の文字スタイルの切り替え

日本語と英語の文字スタイルは、<html>要素のlang属性に基づいて切り替わります。

<html lang="en">
html要素がlang="en"の場合、英語フォントスタイルが適用されます。
</html>

<html lang="ja">
それ以外（lang="ja"など）の場合、日本語フォントスタイルが適用されます。
</html>