タイポグラフィ

書体

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

基準値は16pxです。

Textを使うと、セマンティックトークンを使ってテキストのフォントサイズを指定できます。

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

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

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

Headingを参照してください。
行送りは、フォントサイズの1.25倍（TIGHT）です。

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

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

種類	フォントサイズ	サンプル
標準	`M`	well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。
サイズ小	`S`	well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。
サイズ極小	`XS`	well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

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

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

種類	フォントサイズ	サンプル
標準	`M`	well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。
サイズ小	`S`	well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

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

テキストにウェイトや強調を指定する場合は、Textを使用します。

Headingの見出しのスタイルの一部や、Buttonのラベルテキストが太字を指定しているように、コンポーネントがウェイトも含めて提供している場合もあります。

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

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

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

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