WordPress Luxeritas 文字サイズの設定で難儀する

WordPress Luxeritas Theme 詳細なカスタマイズが出来てとても重宝しています。
今回は文字サイズを Google も推奨している 16px をベースに設定してみる事に。

文字サイズの確認

PC の Firefox で自サイトの記事を開発ツールで覗いてみると font-size: 14px となっている。
変更した記憶は無いんだけど、Luxeritas の基準が 14px なのかな。とか思いながら設定を見てみる。

「Luxeritas」→「カスタマイズ (外観)」→「文字サイズ」の設定を確認してみると、
記事全体 デフォルト : 16px / 1.6rem となっている。

他の項目も設定の値より開発ツールで調べる値の方が 12.5% 程小さくなっているけど何でだ。
それに一番上にある「基準値 62.5%」って何だ？
中途半端な値だけに何か意味は有るんだろうけど、CSS 初心者の自分には何に対する基準値なのかも分からない。

em と rem と 基準値

em とか rem とか % とか、実は見た事が無い訳ではないんです。見ない様にしてたんです。
親要素とか相対値とか面倒そうじゃないですか。px で数値指定した方が簡単だし、分かり易いでしょ。
なんて自分に言い聞かせて来た訳ですが、やっぱりちゃんと勉強してないとこうなるんですね。

ここは素直に Google 先生に教えて貰いましょう。
いくつかサイトで調べてみると、デフォルトの文字サイズ 16px に対して 62.5% を指定すると 10px が基準値となり、その後の計算がし易い。と言う様な事らしい。

ああ、なるほど。中途半端な値には実に考えられた理由が有ったんですね。
ところで、デフォルトの 16px ってのは何処から来たのか、指定しなければ 16px で考えれば良いのかな。とか思ってたらこれが間違いだった。

em と rem も調べてみると、em は親要素に影響を受けるが、rem は HTML の基準値、ここでは 10px にしか影響を受けない素敵な単位だと知る。

文字サイズは環境次第

ここでもう一度 Luxeritas の文字サイズ設定に戻ると、
記事全体 デフォルト : 16px / 1.6rem
あれ？ 何も問題無いんじゃないの？

基準値を 72% 位にすると開発ツールで調べてみても 16px 近くにはなるんだけどな。
また Google 先生に聞いてみると、今度はブラウザの設定により～の記述が。
ん？ そんな事？ と思いつつ Firefox の規定フォントサイズを見ると 14px になっている。

いえ、分かってましたよ。変更した記憶もあるし、みんな変更して使ってるものだと思ってました。
それでデフォルトの 16px が何処から来たのかと思った訳です。変更してない前提でどのサイトも 16px と言っていたんですね。
規定のフォントサイズを 16px にしたら無事に設定通りの表示になりました。

ですがこれ、Luxeritas 側で基準値をいくら調整しても、閲覧者の環境次第で文字サイズが変わるって事ですよね。
レスポンシブデザインと言えばそうなんでしょうけど、だったらここは相手の環境に委ねて基準値は変更せず、文字サイズのバランスだけ手を入れた方が良さそうです。
結局、ほぼ何もしないという結果になりましたが、とても良い CSS の勉強になりました。