フォントサイズ、行間を組み合わせて定義することでテキストの可読性やページ内での一貫した印象を担保します。
フォントサイズは情報整理のために使い分け、行間のとり方で一休らしいゆとりある美しさを表現します。
sans-serif
-apple-system,“BlinkMacSystemFont”,“Helvetica Neue”,“Hiragino Kaku Gothic ProN”,“Hiragino Sans”,sans-serif
serif
游明朝, Yu Mincho, 游明朝体, Times, Times New Roman, ヒラギノ明朝 ProN W3, HiraMinProN-W3, HGS明朝E, serif
基準値を14pxとして、使用可能なフォントサイズを規定します。
Name
CSS
xs
font-size: 10px;
sm
font-size: 12px;
md
font-size: 14px;
lg
font-size: 16px;
xl
font-size: 18px;
2xl
font-size: 20px;
3xl
font-size: 22px;
4xl
font-size: 24px;
5xl
font-size: 26px;
6xl
font-size: 28px;
文字の太さは、以下の2種類を使用します。
Name
CSS
normal
font-weight: 400;
bold
font-weight: 700;
基準値を1.6として、使用可能な行間を規定します。
Name
CSS
none
line-hight: 1;
ラベルテキスト/ボタン
tight
line-hight: 1.25;
段落テキスト（注記などの小さいフォントサイズの文章で使用）
snug
line-hight: 1.4;
見出し
normal
line-hight: 1.6;
段落テキスト
relaxed
line-hight: 1.8;
段落テキスト（目を止めてほしい、店舗や宿の上質さを訴求する文章に使用）
使用ルール
使用するフォントサイズや行間は、モバイルブラウザ/デスクトップブラウザ（SP/PC）で適切なサイズを用途ごとに定義しています。
見出し（タイトル）は、画面内に複数ある場合、画面タイトル > セクションタイトル > ブロックタイトル の順で視覚的なサイズの優位性を保ちます。
※ブロックタイトル が セクションタイトル よりも大きく見える構成はNGとします。
※画面タイトルは1画面につき1つとし、最上位のタイトルとして扱います。
種類
SP
PC
行間
備考
画面タイトル1
4xl（24px）
6xl（28px）
1.4
画面タイトル2
3xl（22px）
6xl（28px）
1.4
施設詳細ページの施設・店舗名などに利用
セクションタイトル1
2xl（20px）
5xl（26px）
1.4
セクションタイトル2
xl（18px）
4xl（24px）
1.4
トップページ、施設詳細ページの連続するコンテンツなどに利用
ブロックタイトル1
2xl（20px）
1.4
ブロックタイトル2
xl（18px）
1.4
ブロックタイトル3
lg（16px）
1.4
本文1
md（14px）
1.6/1.8
本文2
sm（12px）
1.6
補足
xs（10px）
1.25
可読性やアクセシビリティの観点から通常の本文や主要UIのテキストでは推奨しません。
ただし、以下のような「補足的・視認優先ではない」要素に限って、使用することがあります。
・「※」の注記
・件数表示
フォントサイズは12/14/16/18pxを使用します。
行間は上下の余白を踏まえ意図したデザインにするため、1倍（none）です。
複数行にする場合は、line-heightではなくmarginを使って余白を確保します。
フォントサイズは10/12pxを使用します。行間は上下の余白を踏まえ意図したデザインにするため、1倍（none）です。