WordPressのバージョン6.1からtheme.jsonで指定できるようになった流動フォントサイズ。
この機能は、フォントサイズが流動的に指定できるという意味で、CSSででいうclampを使うのと同じような挙動をします。
まあ平たく言うと、画面サイズに応じて文字サイズが可変するというものですね。
これがWordPress6.3.xまでは、モニタ画面の最小サイズ（それ以下の画面幅では同じサイズ）から最大サイズ（それ以上の画面幅では同じサイズ）の範囲が768px、1600pxと固定されていて、theme.jsonで書く時には以下の赤文字の部分のように指定すれば、以下のような感じにフォントサイズが可変するようです。
- 768px以下の時は「min」の値が採用されて「1rem」
- 基本幅（サイトの幅指定）までは「size」の値が採用され「1rem」のまま
- そこから1600pxまでの間に「max」の値の「1.75rem」まで徐々に拡大され、1600pxを超えたらそのまま「1.75rem」を保持
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"slug": "small",
"size": "1rem",
"name": "Small",
"fluid": {
"min": "1rem",
"max": "1.75rem"
}
}
]
}
}CSSのclampと比べると、最小幅、最大幅がなんとなく実用性に欠ける値だったこともあるのか、Twenty Twenty-Threeまでは、素直にclampが使われていました。
これが、WordPress6.4以降では「fruid」という属性（っていうのかな？）が使えるようになり、最小（minViewportWidth）・最大（maxViewportWidth）の値を指定できるようになります。
以下の場合は画面幅320px～1120pxに応じて、中央値（サイト幅）を14pxとして、10px～18pxまで可変させるという記述になるようです。
．．．ようです、と連発しているのは、自身あまりこの流体フォントサイズに興味がない（というのか、おおーーっと思うような可変をさせる必要もないと思っている）からです
"settings": {
"typography": {
"fluid": {
"maxViewportWidth": "1120px",
"minViewportWidth": "320px"
},
"fontSizes": [
{
"name": "Medium",
"slug": "medium",
"size": "14px",
"fluid": {
"min": "10px",
"max": "18px"
}
}
}
}これで万全！でWordPress6.4のデフォルトテーマであるTwenty Twenty-Fourも早速この指定をしているのかな？と覗いてみましたが、幅の指定はされておらず、かつ、Stylesの指定はほぼclampが使われていたので、この機能についてはまだまだ変更の余地があるのかないのか．．という感じだというのが、それとなくつかみ取れました。
clampの代用として便利になりそうではあるものの、WordPress6.3以前と6.4以降で振る舞いが変わるので注意が必要ですから、もう少し世代が進むと（WordPress6.3以前のユーザーが減る頃になれば）多分これがスタンダードになるのでしょう。
clampの指定はツールなどを使って算出しないといけないので面倒という方は試してみる価値があるかも知れません。
以上、メモでした。
参考：Theme.json typography options: Font family and size
参考：WordPress の theme.json での流体タイポグラフィ（Fluid typography）と 6.4 での 最大・最小 ViewportWidth 指定の覚書
コメントを残す