タイポグラフィ

書体

ユーザーが慣れ親しんでいる環境を尊重し、またOSの設定に委ねることでさまざまな言語で正しくレンダリングされることを期待し、以下の書体を指定します。

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

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

サイズ小S

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

サイズ極小XS

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

ラベルテキスト

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

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

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

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

サイズ小S

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

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

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

強調

WIP

リンク

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

  • 他の画面やヘルプセンターなどに移動させるために、画面の説明文や補助テキストにリンクを設置する場合
  • 一覧ビュー(コレクション)から詳細ビュー(シングル)に移動させるために、そのインスタンス名にリンクを設置する場合(「よくあるテーブル」の遷移リンクのスタイルを参照)

TextLinkが使えないときは、テキストに下線を表示し、文字の色はTEXT_LINKにします。

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

関連情報

参考