見出しは少し太く、表の文字は少し幅を狭くしたい。Webの文字を調整するとき、通常の太さだけでは役割に合う差を作りにくい場合があります。可変フォントは、一つのフォントに用意された変化の軸をCSSから使う仕組みです。
MDNの公式解説では、太さ、幅、傾きなどの軸と、それに対応するCSSの使い方が整理されています。可変フォントならどんな書体も自由に変えられる、という意味ではありません。使える軸と範囲はフォントに依存します。公式：可変フォントの解説
この記事では、架空の講座サイトで本文、見出し、カードの文字を設計する方法を扱います。特定のフォントの購入や利用を勧める記事ではありません。ファイルの確認、役割ごとの値、読み込み前後の点検までを考えます。
1．変えられる軸と、変えたい目的を対応させる
可変フォントを使う前に、何を調整したいかを決めます。見出しを目立たせるなら太さ、限られた領域で情報を整理するなら幅など、目的と軸を結び付けます。ただし文字を詰めれば読みやすくなるとは限りません。
| 調整の目的 | 確認する軸の例 | 点検したいこと |
|---|---|---|
| 見出しの強弱 | 太さ | 本文との階層が分かるか |
| 限られた領域の文字 | 幅 | 文字を読める形で保てるか |
| 大小の文字の見え方 | オプティカルサイズ | その軸がフォントにあるか |
| 強調や引用の表現 | イタリック・傾き | 本来の字形と対応しているか |
軸の名前だけを見て、値を一律に決めないようにします。同じ太さの数値でも、書体によって見え方が違います。複数の書体の値を、同じ線の太さを保証する単位として比較しません。
通常のCSSプロパティで扱える軸は、対応するプロパティを優先します。低水準のfont-variation-settingsは、通常のプロパティにない軸などを扱う場面で検討します。意味を伝えやすい指定を選び、あとから担当者が直せるようにします。
2．ファイルを選ぶ前に、必要な文字を確認する
講座サイトでは、日本語、数字、英字の講座名が混ざります。可変フォントが日本語の必要な文字を持っていなければ、別のフォントへ切り替わる文字が出ます。太さの変化が一部だけ異なる場合もあります。
素材の確認では、対応する文字、使える軸、値の範囲、利用条件、ファイル形式を見ます。イタリック用のファイルが別に用意されている場合などもあるため、「一ファイルですべての表現を使える」と先に決めません。
読み込み量も、実際の必要な表現と比較します。可変フォントは複数の表現を一ファイルへ含められますが、通常のフォント一つより常に小さいとは限りません。使用する文字やスタイルを確認し、必要なファイルを比べます。
同じページに複数のフォントを置く場合は、役割を決めます。本文の可読性、見出しの表現、数値の見つけやすさをそれぞれ確認します。すべてを一つのフォントへまとめること自体を目標にしません。
3．font-faceの範囲を、フォントの実際の軸へ合わせる
次は、太さ100〜900に対応する架空のフォントを読み込む例です。実際のフォントファイルは提供していません。採用するファイルの対応範囲とパスに置き換えてください。ブラウザでの表示は未検証です。
@font-face {
font-family: "CourseText";
src: url("/fonts/course-text-variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
body {
font-family: "CourseText", system-ui, sans-serif;
font-weight: 400;
}
.page-title {
font-weight: 650;
}
.card-title {
font-weight: 550;
}font-faceへ書く範囲は、実際のファイルが持つ範囲へ合わせます。本文で650を使いたいからといって、対応していないファイルへ範囲を書くことで新しい字形ができるわけではありません。
本文、見出し、補助情報の値は、役割として管理します。複数のページで550、560、570がばらばらに使われると、違いが意図した階層なのか、作業中の調整なのか分かりにくくなります。少数の値で始め、差が必要な理由を残します。
font-displayを指定した場合も、読み込み前後を確認します。代替フォントから切り替わると、文字幅や折り返しが変わる場合があります。読み込みの指定があることだけで、レイアウトの変化がなくなるとは判断しません。
4．幅を変える前に、内容と配置を見直す
カードの講座名が二行へ折り返すとき、幅の軸で無理に一行へ収める必要はありません。名称を正しく読めることと、カードを一行でそろえることのどちらが目的かを考えます。
幅の軸を使う場合も、そのフォントが対応する範囲と表示の変化を確認します。小さなサイズで幅を狭くしすぎると、字形が詰まって見える場合があります。数字や英字だけが違う印象になることもあります。
| 起きている問題 | 文字の調整だけで考えない対応 | 確認 |
|---|---|---|
| 長い名称が折り返す | カードの幅や行数を見直す | 正式名称を保てるか |
| 表が横へ広がる | 列と補助説明を整理する | 比較する値が読めるか |
| 見出しが強すぎる | 太さとサイズの役割を分ける | 本文との階層 |
| 小さい補助文が読みにくい | サイズと色、行間も確認 | 必要情報を読めるか |
オプティカルサイズに対応するフォントなら、font-optical-sizingの利用も検討できます。これは文字サイズに合わせた字形の調整に関する軸で、文字を単に大きくする処理とは異なります。実際に軸があるかを確かめ、見た目を比較します。
5．同じ文章で値を比べる、実践手順
文字の見え方を比べるときは、文章、画面幅、サイズをそろえます。太さだけを比べたいのに、一方の見出しを短くすると、内容の違いも混ざります。
- 本文、見出し、カード名に使う文章を決めます。日本語、数字、英字を含む例も用意します。
- フォントの対応する文字、軸、範囲と利用条件を確認します。
- 役割ごとの少数の値を決めます。太さとサイズを同時に変えたら、その条件を残します。
- 同じ文章で値を並べ、階層と字形を見ます。
- 狭い画面、長い名称、拡大した表示で読み直します。
- 読み込み前後と、フォントが取得できない状態を確認します。
記録には、フォント名、ファイルの版、軸と値、対象の役割を残します。画面だけを保存すると、後から同じ見え方へ戻す条件が分からなくなる場合があります。
図解の値は概念として扱い、実際のフォントの表示見本と混同しません。試すときには、採用するファイルを使ったブラウザの画面で確認します。本記事の図解は、設計する項目を整理するためのものです。
6．更新しやすい文字のルールへまとめる
最後に、値を変更しやすいルールへまとめます。たとえば本文400、カード名550、大見出し650を初期案として使う場合、各値が何の役割かを記録します。これらは本記事の架空の設計値で、あらゆる書体に適した推奨値ではありません。
フォントを変更する場合は、以前の数値をそのまま移す前に、同じ文章で見ます。太さの数値が同じでも、文字幅、字形、線の印象が変わります。配色や余白との関係も、実際の画面へ置いて確認します。
動きのある太さの演出を使う場合も、読んでいる途中で折り返しや配置が変わらないかを見ます。文字の変化を見せることより、内容を読む目的を優先します。演出がなくても意味が分かる状態を作ります。
可変フォントを採用しない判断もできます。必要な表現が少ない、対象文字へ対応していない、既存サイトの確認負担が大きいなど、制作条件によって選択は変わります。機能が新しいことだけを採用理由にしません。
今日の練習では、一つの候補フォントと、三つの役割の文章を用意してください。軸と値を変え、階層、長い名称、読み込み前後の条件を記録します。数値を増やすより、なぜその役割に使うかを説明できる文字のルールを作りましょう。
情報確認：2026年10月13日。題材、設計値、CSS例と図解は独自制作です。CSS例は参照仕様と照合していますが、実際のフォントファイルによる読み込み・表示・容量・速度は未検証です。