タイポグラフィー
基本設定
フォント名
基本的に Windows では游ゴシック、Mac では Helvetica を基本的に採用します。
- 基本文:
-
font-family: "游ゴシック", "游ゴシック体", YuGothic, "Yu Gothic","Helvetica Neue","メイリオ", sans-serif; SASS: $font-style
- タイトル:
-
font-family: 'Noto Sans JP', sans-serif; SASS: $title-font-style
フォントカラー
ベースのフォントカラーは「テキスト」、カラー変数は「$color-text」を採用します。
定義一覧
見出しタグに関係なく、CLASS設定にてフォントサイズを設定します。また、行間は1.5倍、Box下の余白は各種CLASSを設定します。
| 名前 | 属性 | サイズ | 行間 | 下余白 | Font Weight |
|---|---|---|---|---|---|
| 画面名 | .titleBig | 1.5rem (24PX) | 1.25rem (30PX) | .mBottom | 500 |
| 見出し | .titleBase | 1.25rem (20PX) | 1.25rem (25PX) | .mHfBottom | 500 |
| 中見出し | .smallTitle | 1.125rem (18PX) | 1.25rem (22.5PX) | .mMinBottom | 500 |
| 小見出し | .fontBig | 1.125rem (18PX) | 1.25rem (22.5PX) | .mMinBottom | 500 |
| 段落見出し | .strong | 1rem (16PX) | 1.5rem (24PX) | --（25PX） | 600 |
| 本文 | -- | 1rem (16PX) | 1.5rem (24PX) | --（25PX） | 500 |
| 本文小 | .fontSmall | 0.875rem (14PX) | 1.5rem (21PX) | .mHfBottom | 500 |
| 補足 | .fontMinimam | 0.75rem (12PX) | 1.5rem (18PX) | .mMinBottom | 500 |
| 太字 | .strong | -- | -- | -- | 600 |
各種設定
set.scssにて設定します。フォントサイズ 1rem のベースとなる数値は、htmlのフォントサイズを変更することで、全体のフォントサイズが変更されます。その他、詳細はファイル構成をご覧ください。
※基本的に初期設定時以外は変更は不可です。
レイアウトパターン
以下、フォントのパターンです。装飾などは実装の際にスタイルシートに記述してください。
画面名：あいうえお かきくけこ
見出し：さしすせそ たちつてと
中見出し：なにぬねの はひふへほ
本文(改行なし)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん 段落改行
本文(改行あり)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも BR改行
BR改行や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
本文小：小さい文字は枠か何かに入る場合？あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
本文小：小さい文字は枠か何かに入る場合？あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
※補足：最小文字は補足？あいうえお かきくけこ さしすせそ たちつてと
※補足：最小文字は補足？あいうえお かきくけこ さしすせそ たちつてと
画面名：あいうえお かきくけこ
見出し：さしすせそ たちつてと
中見出し：なにぬねの はひふへほ
本文(改行なし)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん 段落改行
本文(改行あり)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも BR改行
BR改行や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
見出し：さしすせそ たちつてと
中見出し：なにぬねの はひふへほ
本文(改行なし)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん 段落改行
本文(改行あり)：あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも BR改行
BR改行や ゆ よ わ を んあいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも や ゆ よ わ を ん
装飾の設定
title.scss に見出しタイトルのCLASSがあるので、そちらに追記してください。
※基本的に初期設定時以外は変更は不可です。