タイポグラフィ
基本設定
フォント名
基本的に Windows では游ゴシック、Mac では Helvetica を基本的に採用します。
- 基本文:
-
font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; SASS: $font-style
- 行政など:
-
font-family: "IBM Plex Sans JP","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; SASS: $font-style
- タイトル:
-
font-family: 'Noto Sans JP', sans-serif; SASS: $title-font-style
フォント定義
見出しタグに関係なく、CLASS設定にてフォントサイズを設定します。
また、見出し下の余白は各種CLASSを設定します。
カラー
ベースのフォントカラーは「テキスト」、カラー変数は「$color-text」を採用します。
フォント設定一覧
| 名前 | 属性 | 変数 | PX | 行間 | 下余白 | Font Weight |
|---|---|---|---|---|---|---|
| 画面名（ページタイトル） | .text-5xl | $font-size-5xl | 48px | 1.25 | .mb-12 | - |
| 大見出し（H2相当） | .text-4xl | $font-size-4xl | 36px | 1.25 | .mb-8 | - |
| 中見出し（H3相当） | .text-3xl | $font-size-3xl | 30px | 1.25 | .mb-4 | - |
| 見出し（H4相当） | .text-2xl | $font-size-2xl | 24px | 1.5 | .mb-4 | - |
| 小見出し（H5相当） | .text-xl | $font-size-xl | 20px | 1.5 | .mb-2 | - |
| 大文字（H6相当） | .text-lg | $font-size-lg | 18px | 1.5 | .mb-2 | - |
| 本文 | .text-base | $font-size-base | 16px | 1.75 | - | - |
| 本文（小） | .text-sm | $font-size-sm | 14px | 1.25 | - | - |
| 補足（小） | .text-2sm | $font-size-2sm | 13px | 1.25 | - | - |
| 補足（最小） | .text-xs | $font-size-xs | 12px | 1.25 | - | - |
各種設定
set.scssにて設定します。フォントサイズ 1rem のベースとなる数値は、htmlのフォントサイズを変更することで、全体のフォントサイズが変更されます。その他、詳細はファイル構成をご覧ください。
※基本的に初期設定時以外は変更は不可です。
レイアウトパターン
以下、フォントのパターンです。装飾などは実装の際にスタイルシートに記述してください。
画面名：あいうえお かきくけこ
見出し：さしすせそ たちつてと
中見出し：なにぬねの はひふへほ
本文(改行なし)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん 段落改行
本文(改行あり)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも BR改行
BR改行や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
本文小：小さい文字は枠か何かに入る場合？あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
※補足：最小文字は補足？あいうえお かきくけこ さしすせそ たちつてと
※補足（小）：最小文字は補足？あいうえお かきくけこ さしすせそ たちつてと
画面名：あいうえお かきくけこ
見出し：さしすせそ たちつてと
中見出し：なにぬねの はひふへほ
本文(改行なし)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん 段落改行
本文(改行あり)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも BR改行
BR改行や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
見出し：さしすせそ たちつてと
中見出し：なにぬねの はひふへほ
本文(改行なし)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん 段落改行
本文(改行あり)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも BR改行
BR改行や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
装飾の設定
title.scss に見出しタイトルのCLASSがあるので、そちらに追記してください。
※基本的に初期設定時以外は変更は不可です。