文字

書体

• 端末に入っている日本語の書体を使います。 ヒラギノ角ゴ → Noto Sans JP → 游ゴシック の順で、どれもなければ端末の標準の書体です。
• 外部のフォントは読み込みません。 表示が速く、通信が少なく、どの端末でも同じ読みやすさになるためです。
• Jost はロゴの文字にだけ使います。 ロゴは文字を線に変えた画像なので、フォントを読み込む必要はありません。
• 数字を縦にそろえたい表や金額では、等幅の数字（tabular-nums）を使います。コードや ID には等幅の書体を使います。

font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;

大きさの段

用途	大きさ / 行の高さ	太さ	コード
画面の題（h1）	20 / 28 px	600	text-xl font-semibold
節の見出し（h2）	16 / 24 px	600	text-base font-semibold
本文（読み物・ヘルプ）	16 px / 1.75	400	text-base leading-7
本文（業務画面の密な表示）	14 / 20 px	400	text-sm
補足・ラベル	12 / 16 px	400〜500	text-xs

• 読ませる文章（ヘルプ・説明・お知らせ）は 16 px、行の高さ 1.75。一行は全角 35〜40 文字を目安に、長くても 45 文字（45rem）で折り返します。
• 一覧や詳細などの業務画面は、情報を多く見せるために 14 px を使ってよいことにしています。
• 12 px より小さい文字は使いません。 「小さい補足」が必要なときも text-xs にそろえます。

よくない例

• text-[11px]・text-[0.6875rem]・text-[8pt] のように、段の外の大きさを書く（同じ 11 px が何通りにも書かれ、そろわなくなります）。
• 同じ種類の画面で、題の大きさを変える（ある画面は 20 px、別の画面は 18 px）。
• 太字（700）を本文の強調に多用する。強調は 600 までで足ります。

数字・単位・日付

• 数字は 3 桁ごとに区切ります：1,234
• 単位は数字のすぐ後に、スペースなしで：12件、3.5%、20万円
• 日付は 2026-10-14 の形。画面で読ませるときは「10月14日（火）」のように書いてもかまいません。一つの画面の中ではどちらかにそろえます。
• 時刻は 24 時間制：14:05