タイポグラフィ

最小限に整理したフォントスタイルは可読性を高め、読み手の体験を妨げません。

書体

ユーザーが慣れ親しんでいる環境を尊重し、以下の書体を指定します。

font-family: system-ui, sans-serif;

フォントサイズ

基準値は16pxです。

セマンティクストークン

トークン名値(rem)基準値を基にした実値(px)
XXS0.667rem10.67px
XS0.75rem12px
S0.857rem13.71px
M1rem16px
L1.2rem19.2px
XL1.5rem24px
XXL2rem32px

セマンティクストークン(旧)

SHORT / TALL / GRANDE / VENTIによる定義は、抽象的な名前から実値を予想しづらいため非推奨となりました。(SmartHR UI v13以降)

トークン名値(rem)基準値を基にした実値(px)
SHORT0.6875rem11px
TALL0.875rem14px
GRANDE1.125rem18px
VENTI1.5rem24px

トークンの新旧対応

新旧における対応は以下のとおりです。

現トークン旧トークン
XXS-
XS-
SSHORT
MTALL
LGRANDE
XLVENTI
XXL-
  • - は対応する値がありません。

行送り

テキストスタイルによって使用する行送りが異なります。以下を参照してください。

テキストスタイル

見出し

Headingコンポーネントを参照してください。

段落テキスト

段落テキストに使用し、強調やリンクのスタイルを併せてとることがあります。
行送りは、基本的にフォントサイズの1.5倍(NORMAL)です。

サイズ小の積極的な使用は避け、レイアウトの都合上、どうしようもない場合に使います。

種類フォントサイズサンプル
標準M

社会の非合理を、ハックする。

サイズ小S

社会の非合理を、ハックする。

ラベルテキスト

段落ではないボタンなどのラベルテキストに使用します。
行送りは、フォントサイズの1倍(NONE)です。

サイズ小の積極的な使用は避け、レイアウトの都合上、どうしようもない場合に使います。

種類フォントサイズサンプル
標準M

社会の非合理を、ハックする。

サイズ小S

社会の非合理を、ハックする。

表中のテキストは、基本的に段落テキストと同じスタイルを使用します。表で固有のスタイルは以下のとおりです。

  • 表の見出し(th)の文字揃えは、データ(td)の文字揃えに合わせます。
  • 表のデータに数字を表示する場合は、列を縦に読んだときに桁数を比較できるように右揃えにします。

強調

WIP

リンク

テキストリンクは、以下の場合に使用します。
リンク以外の操作を表す場合は、Buttonコンポーネントを使用してください。

  • 他の画面やヘルプページに遷移させるために、画面の説明文や補助テキストにリンクを設置する場合
  • 一覧コレクションからシングルに遷移させるために、そのインスタンス名にリンクを設置する場合

テキストリンクの色はTEXT_LINKを使用し、マウスオーバー時を除いて下線は表示しません。

新規ウィンドウを開くリンクや、ヘルプセンターのポップアップダイアログを表示するリンクでは、遷移先を事前に認知できるようにアイコンを組み合わせて使います。 Iconコンポーネントの使い方を参照してください。

関連情報

参考

© 2021, SmartHR, Inc.