タイポグラフィ
UIにおけるタイポグラフィ
現状のデンソーCISに設定されているコーポレートフォントだけではなく、各実装環境に最適化されたシステムフォントを使用することで機能的メリットを享受できます。
コーポレート色が強く求められる場合以外にはシステムフォントの使用を推奨します。
CISで設定されているフォント
システムフォント
CISとの差分
CISでは、汎用フォント和文にはYu Gothic UI、英文にはVerdanaが設定されています。
しかし、Yu Gothic UIは長体のデザインで、限られたエリアに多くの文字を収めるのには向いていますが、読みやすさには欠けています。そのためUI向けには游ゴシック（Yu Gothic）を推奨します。
また、英文については、VerdanaよりもSegoe UIの方がDENSOフォントに近いセリフ形状をしているので、DENSOフォントとの相性を鑑みSegoe UIを推奨します。
サイズと用途
可読性を担保するために、それぞれの端末・用途にあった適切な文字サイズとウェイトを選択してください。
推奨サイズを下記に記載します。
参照:WCAG 2.1
https://waic.jp/translations/WCAG21/Understanding/text-spacing.html| サイズ名 | px | weight | rem | line-height | letter-spacing | 使用用途 |
|---|---|---|---|---|---|---|
見出しL |
32 |
Bold |
2rem |
1.5 |
0.04em |
各画面の見出し |
見出しM |
28 |
Bold |
1.75rem |
1.5 |
0.04em |
各画面の見出し |
見出しS |
20 |
Bold |
1.25rem |
1.5 |
0.04em |
概要ラベル |
|
ボタン・文字ラベル |
16 |
Bold |
1rem |
1.5 |
0.04em |
ボタンラベル |
|
本文 |
16 |
Regular |
1rem |
1.7 |
0.04em |
本文テキスト |
|
補足
|
12 |
Regular |
0.75rem |
1.5 |
0.02em |
グラフラベル等 |
*和文の游ゴシックフォントは細身なフォントのため、「本文」「補足」の和文フォントはRegularではなく、Mediumを使用してください。
また実装時にはweight：400とし、font-familyに「Yu Gothic Medium, 游ゴシック Medium」を追加してください。
