すべての画面でテキストを美しく表示させることは簡単ではなく、ウェブデザイナーは長年、メディアクエリのブレイクポイントを使ってフォントサイズを変更していました。しかしこの方法では、デバイスやスクリーンサイズが増えるにつれて徐々に手が回らなくなります。
WordPress 6.1（2022年11月リリース）では、この課題を解決してくれるFluid Typography（流体タイポグラフィ）が導入されました。theme.jsonファイルで定義したフォントサイズが自動的に調整され、画面の幅や高さに関係なく、自然にテキストが拡大縮小されます。
流体タイポグラフィは、フォントサイズを変更するだけでなく、行の高さ、単語の間隔、余白も微調整してくれるため、一貫性を保ち、読みやすく、あらゆるデバイスで見やすいデザインを実現することができます。
今回は、流体タイポグラフィの仕組み、従来のブレイクポイントを使ったフォントサイズの切り替え方法との違い、theme.jsonとCSSを使った実装方法をご紹介します。
従来のフォントサイズ切り替え方法との比較
流体タイポグラフィを理解するには、それ以前に一般的であったフォントサイズの切り替え方法（ブレイクポイントに応じて文字サイズを切り替える）と比較するとわかりやすいです。
従来のフォントサイズ切り替え方法
通常、ブレイクポイントはビューポート幅の特定の範囲であり、ピクセル単位で定義します。モバイル、ノートPC、デスクトップPC画面をターゲットとする3つの主要なブレイクポイントを設定するのが一般的です。
以下は、CSSファイルにおけるノートPC用の一般的なブレイクポイント設定です。
@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}今後、新たなデバイスや画面サイズが登場することを考慮すると、このような各ブレイクポイントの管理はすぐに非効率的になります。
上のGIFでは、ビューポートが狭くなるにつれて、文字サイズが段階的にガクッと変化しています。この挙動は不自然なスケーリングや予測しづらい表示につながり、滑らかで一貫したテキスト表示を実現するには適していません。
Fluid Typography（流体タイポグラフィ）
2019年のCSS clamp()プロパティの導入により、ビューポート単位（vwおよびvh）とともに、シームレスな自動スケーリングが可能になりました。
ビューポートの寸法に基づいて動的に拡大縮小されるフォントサイズを定義できるため、複数のブレイクポイントが不要になります。
以下は、clamp()を使用した中程度のフォントサイズの例です。
.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}clamp()の仕組みについては後ほど詳しく見ていきますが、ここでは「最小値・推奨値・最大値を設定して、画面サイズに応じて文字がなめらかにスケールするようにするための式」という感じで考えてください。
上のGIFでは、ビューポートが狭くなると、フォントサイズはまさに流れるように調整され、先ほどのようなガクッとした変化は見られません。
この滑らかな動作こそが、従来のタイポグラフィから大きく進化した点であり、テキストを段階的に調整することなく、あらゆるデバイスで自然に感じられるシームレスな拡大縮小を実現することができます。
流体タイポグラフィには他にもいくつかのメリットがあり、柔軟で一貫性のある、アクセシビリティに優れたデザインの構築が用意になります。
Fluid Typographyを利用するメリット
流体タイポグラフィには、以下のような利点があります。
標準でレスポンシブ対応
テキストはビューポートに合わせて自動的に拡大縮小されるため、ブレイクポイントが不要になります。サイトがスマホ、タブレット、ウルトラワイドモニターのいずれで表示されても、余分なCSSなしでフォントサイズが自然に調整されます。
メンテナンスが簡単
複数のメディアクエリを使用する必要がないため、コードがシンプルで読みやすくなります。S・M・L・XL のような段階的なスケールでフォントサイズを定義し、テーマ全体で一貫して適用できます。
一貫したデザイン
フォントサイズはサイト全体で、グローバル設定でも個々のブロック設定でも一貫性を保つことができます。一度スケールを定義すれば、すべてのブロックやパターン、テンプレートに自然に行き渡ります。
アクセシビリティと可読性の向上
流体タイポグラフィはスムーズに拡大縮小されるため、デバイスを問わずテキストは常に読みやすいサイズで表示されます。これにより、特に視力の設定やブラウザのズームレベルをカスタマイズしているユーザーは、より快適にコンテンツを閲覧することができます。
将来を見据えたデザイン
テキストサイズが人為的なブレイクポイントに縛られなくなることから、将来どのようなスクリーンサイズやビューポートにも自動的に対応できます。
スケーリング速度の制御
テキストが拡大または縮小する速度を制御する機能は、ビューポートの幅に応じて変化する優先値によって設定されます。
ブラウザサポート
clamp()は、現在のバージョンのChrome、Edge、Firefox、Safariを含む、すべてのモダンブラウザで十分にサポートされています。
すべてのブラウザに完全に対応する必要がある場合は、Internet Explorer 11や2020年以前のバージョンのSafariやChromeなどのレガシーブラウザ用のフォールバックを以下のように含める必要があります。
/* フォールバック（IE11などの旧ブラウザ向け）*/
li {
font-size: 1.25rem;
}
/* 推奨（モダンブラウザ向け）*/
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}Fluid Typographyの仕組み
流体タイポグラフィの中心となるのは、最小サイズ・最大サイズ・推奨サイズの3つの設定です。推奨サイズは、最小値と最大値の間をスライドする値で、ビューポートの幅によって決まります。
clamp()は、この3つの値を1つの記述でまとめて扱います。
font-size: clamp(min, preferred, max);これにより、小さい画面でテキストが小さくなりすぎたり、大きい画面で大きくなりすぎたりすることがなくなります。例を見てみます。
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);上記の例では、フォントサイズは1remから始まり、ビューポートが拡大するにつれて滑らかに大きくなり、1.25remで拡大が止まります。
WordPressの処理方法
WordPressが複雑な計算をすべて引き受けてくれるため、これらの値を自分で計算する必要はなく、theme.jsonにフォントサイズを定義するだけでOKです。
以下は、WordPressがフォントサイズをJSONでどのように表現するかを示した簡単な例です。
{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}WordPressがこれをもとにCSSを生成します。
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);これにより、流体タイポグラフィの実装が素早く、一貫性があり、エラーのないものになります。theme.jsonで一度値を定義するだけでOKです。
基本用語
次のセクションに進む前に、流体タイポグラフィで使用される単位を表にまとめます。各単位は何かに対して相対的に変化します。
| 単位 | 定義 | 補足 |
| em | 親要素のフォントサイズとの相対値 | ネストが深くなるとサイズが累積して変化 |
| rem | ルート（html）要素のフォントサイズに対する相対値 | サイト全体で一貫してスケーリング |
| vw | ビューポート幅の1% | 幅ベースのスケーリングに使用 |
| vh | ビューポートの高さの1% | 高さベースのスケーリングに使用 |
theme.jsonについて
theme.jsonはデータ駆動型のため、CSSを記述する必要はなく、自動的に生成されます。
WordPressコアにもtheme.jsonが含まれており、ブロックテーマ側のtheme.jsonが参照する基礎的なプロパティが定義されています。流体タイポグラフィの実装もこの仕組みに基づいています。
ほぼすべてのスタイルプロパティと同様、これらの設定は子テーマを使ってグローバルにも、ブロック単位でも変更できます。独自にカスタマイズを行う場合は、子テーマを使用することをおすすめします。
theme.jsonにあまり馴染みがない場合は、theme.jsonでプロパティとキー/値のペアを扱う方法をご覧ください。
Twenty Twenty-Fiveでの使用方法
ブロックテーマのtheme.jsonファイルに設定 "fluid": trueが含まれている場合、WordPressは自動的に CSS clamp()を使用して流体タイポグラフィのルールを生成します。これは、各フォントサイズのスムーズなスケーリングを計算する組み込みアルゴリズムによって処理されます。
{
"settings": {
"typography": {
"fluid": true
}
}
}"fluid"が省略された場合、WordPressのデフォルトはfalseとなり、テキストサイズは固定されたまま、流体的に拡大縮小されなくなります。
流体タイポグラフィを有効にすると、Twenty Twenty-Fiveで5つのプリセットフォントサイズが定義されます。それぞれに最小値と最大値が含まれており、clamp()を使って最終的なCSSを生成する際に使用されます。
| サイズ | Theme.jsonの値 | 生成されるCSSのclamp値 |
| S | 0.875rem | clamp（0.875rem, 0.8125rem + 0.2vw, 1rem） |
| M | 最小：1rem 最大：1.125rem |
clamp（1rem, 0.9375rem + 0.25vw, 1.125rem） |
| L | 最小：1.125rem 最大：1.375rem |
clamp（1.25rem、1.125rem + 0.5vw、1.5rem） |
| XL | 最小：1.75rem 最大：2rem |
clamp（2.25rem、1.75rem + 1.5vw、3rem） |
| XXL | 最小：2.15rem 最大：3rem |
clamp（3rem、2.25rem + 2vw、4rem） |
Fluid Typographyの実際の使用例
Twenty Twenty-Fiveでどのように流体タイポグラフィがどのように扱われるかを押さえたところで、実際にどのようにカスタマイズ・拡張できるのかを見ていきましょう。
以下の例では、Twenty Twenty-Fiveの子テーマを使用します。いつも通り、スクリプトが正しく読み込まれていることを確認してください。
すべてのフォントサイズを25%大きくする
オーディエンスが大きなテキストを好む場合（アクセシビリティ重視のサイトや高齢者向けサイトなど）、すべてのフォントサイズを大きくしたいかもしれません。
方法1. theme.jsonを使う
すべてのフォントを拡大縮小する単一のトグルはありませんが、各フォントサイズを25%ずつ手動で以下のように大きくすることができます。
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}上記はTwenty Twenty-Fiveのパターンに従い、Sサイズは固定されたままで、他のサイズは滑らかに拡大縮小します。
WordPressがそれぞれの最小値と最大値の間の好ましい（流動的な）値をその都度計算してくれます。
方法2. style.cssを使う
スタイルシートの1行ですべてをグローバルに拡大縮小することも可能です。
:root {
font-size: 125%;
}上記はルートフォントサイズを25%増加させ、remを使用するすべての要素を効果的に拡大縮小します。
単一ブロックのカスタム流体タイポグラフィ
必要な箇所だけ、文字サイズを画面幅に応じて滑らかに変化させることもできます。
たとえば、デフォルトではLサイズが使われるリスト（core/list）ブロックを、中サイズに変更するには、theme.jsonに以下の設定を追加します。
"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}これでリスト項目が段落よりもわずかに小さいテキストで表示され、階層がすっきりします。
style.cssで流体タイポグラフィを設定する
クラシックテーマを使用している場合は、style.cssで直接clamp()の値を定義します。
以下は、リスト項目の文字サイズをLの125％に拡大する例です。
li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}
これは、CSSファイルで設定されたリスト項目のフォントサイズを大きく表示します。クラシックテーマの場合は、styles.cssファイルでclamp()プロパティを使用する必要があります。
流体スペーシング
流体タイポグラフィを適用する際に考慮すべき要素は、フォントサイズだけではありません。
パディングやマージン、ブロック間の余白（グループブロック内のスペース）といったレイアウト上の間隔も、同じ仕組みを使って流動的に変化させることができます。
Twenty Twenty-Fiveでは、これらの設定をもとに余白サイズを定義しています。
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}最初の3つのサイズ（tiny、x-small、small）は固定で、それ以上のサイズはclamp()を使って流動的に拡大縮小します。
これにより、文字サイズだけでなくレイアウト上の余白もさまざまな画面サイズに応じて美しく調整されるようになります。
まとめ
ブレイクポイント方式と流体タイポグラフィは、それぞれ異なる役割を持っており、両方を組み合わせて使用することで、画面サイズに応じて自然にスケーリングし、誰にとっても一貫性があり、読みやすいレイアウトを実現することができます。
手動で計算したくない場合は、値を調整したり視覚化したりできる以下の無料ツールが便利です。
デザインスケールに合ったclamp()の値を簡単に生成でき、特にクラシックテーマの構築時に役立ちます。
KinstaでWordPressサイトをホスティングすると、高速TTFB、内蔵CDN、エッジキャッシュを利用できるため、流体タイポグラフィを使用した美しいサイトを高速配信することができます。まずは初月無料プランから、ぜひお試しください。
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
