WordPress の theme.json での流体タイポグラフィ（Fluid typography）と 6.4 での 最大・最小 ViewportWidth 指定の覚書

今回は theme.json で指定できる settings プロパティのタイポグラフィの fluid について、WordPress 6.4 で最大・最小 ViewportWidth 指定ができるようになるので、あらためておさらいしながら見ていきます。

流体タイポグラフィ（Fluid typography）とは？

現在のウェブサイトはあらゆる画面幅で見られます。読みやすい文字サイズも画面サイズやレイアウトによって異なりますので、大きな画面では大きな文字サイズに、小さい画面では小さい文字サイズに流動的なフォントサイズにする事…という解釈で良いですよね？

流動タイポグラフィを見る前に、例えばフォントサイズ Medium を指定した theme.json が以下のようになっていたとします。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"name": "Medium",
					"slug": "medium",
					"size": "14px"
				}
		}
	}
}

この14pxを流動タイポグラフィにするには theme.json の settings > typography に以下のように書くことで動作します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
		"fluid":true,
			"fontSizes": [
				{
					"name": "Medium",
					"slug": "medium",
					"size": "14px",
					"fluid": {
						"min": "10px",
						"max": "18px"
					}
				}
		}
	}
}

これで、画面サイズが大きい時は 18px で表示し、画面サイズが狭くなるにつれて 10px になるまで縮小します。

6.3 までの仕様での問題

画面サイズに応じて文字サイズが可変するなんて便利！と思うかもしれませんがそうは問屋が卸しません。

文字サイズが可変するのは画面サイズが最小 320px 〜 最大 幅広サイズ（settings > layout > wideSize）あるいは指定がない場合は 1600px。

幅広や1600pxではなくてコンテンツ幅で最大文字サイズになるようにしたいと思っても、今までの theme.json の仕様ではできないので css で指定する必要がありました。

※とは言え今までも theme.json のフォントのサイズ指定で clamp(14px, calc( 14px + (100vw - 360px) * ( (16 - 14) / (1200 - 360) ) ), 16px) ） とか書いてたので、別にそれでもできる。

6.4 で最大幅、最小幅の指定が可能になった

WordPress 6.4 では maxViewportWidth と minViewportWidth というプロパティが追加されました。これを使うと以下のように指定できます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
		"fluid": {
				"maxViewportWidth": "1120px",
				"minViewportWidth": "320px"
			},
			"fontSizes": [
				{
					"name": "Medium",
					"slug": "medium",
					"size": "14px",
					"fluid": {
						"min": "10px",
						"max": "18px"
					}
				}
		}
	}
}

これによって、今までは 幅広サイズ（または 1600px）まで文字が大きくなり続けてしまいましたが、例えば maxViewportWidth を contentSize と同じにする事で、文字の拡大が止まる画面サイズをコンテンツ幅と揃えたり、任意に指定する事ができるようになります。

所感

とりあえず

• 6.3以前のWordPress環境では当然効かないので、汎用テーマにおいては今の段階でこちらに切り替えてしまうのはまずい
• 文字サイズのジャンプ率はちゃんと計算しないときれいに見えないので、そうなると CSSで書いた方が良いのではないかな…

と思ったりもしますが、theme.json で制御できるようになってればノーコードで設定できる拡張機能も作りやすいので良い事ではないかなと思う今日この頃です。

元資料

Fluid typography: add min and max viewport width configurable options by ramonjd · Pull Request #53081 · WordPress/gutenberg · GitHub

What? Welcome to this PR! Please test its exciting features. Wow! We're adding configurable min and max viewport width values to the typography.fluid theme.json schema, to allow theme developers to…

GitHub

この記事を書いた人

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他

最近の投稿

• WordPress2023年12月1日Lightning のヘッダーやフッターをブロックで自由に変更できるよ
• WordPress2023年11月3日WordPress 6.4 で追加された wp_admin_notice() で管理画面に通知を表示してみた
• WordPress2023年11月3日WordPress 6.4 で追加された theme.json でのレイアウトコントロール（ allowEditing ）の無効化設定について
• WordPress2023年11月2日WordPress の theme.json での流体タイポグラフィ（Fluid typography）と 6.4 での 最大・最小 ViewportWidth 指定の覚書

ご好評につきキャンペーン期間延長！
Vektor Passport

を買って

Evergreen を
無料でダウンロードしよう

Lightningで使えるおしゃれなデザインスキン / コンテンツデータを試せるチャンス！

キャンペーンを詳しく見る