フォントサイズ、行間を組み合わせて定義することでテキストの可読性やページ内での一貫した印象を担保します。 フォントサイズは情報整理のために使い分け、行間のとり方で一休らしいゆとりある美しさを表現します。
基準値を13pxとして、使用可能なフォントサイズを規定します。
Name
CSS
text-xs
font-size: 10px;
text-sm
font-size: 12px;
base
font-size: 13px;
text-md
font-size: 14px;
text-lg
font-size: 15px;
text-xl
font-size: 16px;
text-2xl
font-size: 18px;
text-3xl
font-size: 20px;
text-4l
font-size: 26px;
文字の太さは、以下の2種類を使用します。
Name
CSS
font-normal
font-weight: 400;
font-bold
font-weight: 700;
基準値を1.6として、使用可能な行間を規定します。
Name
CSS
leading-none
line-hight: 1;
ラベルテキスト/ボタン
leading-tight
line-hight: 1.25;
段落テキスト（注記などの小さいフォントサイズの文章で使用）
leading-snug
line-hight: 1.4;
見出し
leading-normal
line-hight: 1.6;
段落テキスト
leading-relaxed
line-hight: 1.8;
段落テキスト（目を止めてほしい、店舗や宿の上質さを訴求する文章に使用）
使用ルール
フォントサイズは下記のサイズを使用します。行間はフォントサイズの1.4倍（leading-snug）です。
フォントサイズ
行間
サンプルテキスト
14px
1.4
こころに贅沢させよう。
16px
1.4
こころに贅沢させよう。
18px
1.4
こころに贅沢させよう。
20px
1.4
こころに贅沢させよう。
26px
1.4
こころに贅沢させよう。
フォントサイズは12/13/14/16/18pxを使用します。
行間は上下の余白を踏まえ意図したデザインにするため、1倍（leading-none）です。
複数行にする場合は、line-heightではなくmarginを使って余白を確保します。
フォントサイズは下記のサイズを使用します。行間は基本的にフォントサイズの1.6倍（leading-normal）を指定し、表現の都合上必要な場合に1.25倍（leading-tight）や1.8倍（leading-relaxed）を使い分けます。
フォントサイズ
行間
サンプルテキスト
10px
1.25
わたしたちは、上質な宿やレストランなどのWeb予約を通して「こころに贅沢」な時間を世に増やすことを目指しています。
12px
1.6
わたしたちは、上質な宿やレストランなどのWeb予約を通して「こころに贅沢」な時間を世に増やすことを目指しています。
13px
1.6
わたしたちは、上質な宿やレストランなどのWeb予約を通して「こころに贅沢」な時間を世に増やすことを目指しています。
14px
1.6 / 1.8
わたしたちは、上質な宿やレストランなどのWeb予約を通して「こころに贅沢」な時間を世に増やすことを目指しています。
フォントサイズは10/11/12pxを使用します。行間は上下の余白を踏まえ意図したデザインにするため、1倍（leading-none）です。