サイト本文の最適なフォントサイズは16pxと言われていますが、少し大きめの18pxに変更しました

2022.09.262023.03.04

この記事は約8分で読めます。

当サイトの文字サイズを少し変更しました。見出し文字が大きいわりに本文文字が小さくて読みにくいという感想をお持ちの方がかなりいらっしゃいましたのでその対応です。
タイトル文字は少し小さめにし、本文文字は少し大きめに変更しました。
ワードプレス（WordPress）で文字サイズ変更する場合は、使用するテーマによってやり方が異なります。ライトニング（Lightning）の場合は、ExUnitという専用プラグインに「CSSカスタマイズ」という設定項目がありますので、そこに追記すればOKです。この手法だと、テーマ本体のアップデートやカスタマイズに関係なく、設定を維持できるのがいいですね。

このページの目次

文字サイズをみなおす
テーマをコクーンに変更しました（本文文字サイズは初期設定で18でした）

文字サイズをみなおす

本文の文字サイズはどれくらいが適切か

基本的な文字サイズは16px

もっとも多いのが本文の文字サイズ16pxだと思われます。これはブラウザが推奨している標準的な文字サイズが16pxだということが大きな理由になります。

文字サイズとは「フォントサイズ」のことで、数字が大きくなるほど文字のサイズも大きくなります。単位はpx で表します。

Googleが「文書で読みやすいフォントサイズが使用されていない (web.dev)」というページで推奨している文字サイズは「12px以上」と明記されています。ただし、実際にそのページでは「18px」で表示されています。

英文と日本語の違いもあるので一概に言い切るのは難しいですが、「Googleは18pxが最適である」というように考えているのかもしれません。

一般的に12pxから18pxの範囲内が本文の文字サイズとして適しています

フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント
https://japan-design.jp/design/0052/

Webにおけるフォントサイズの基準は16pxなのか
https://zatta.link/web/standard-font-size-is-16px-or-not.html

上記２つの記事は参考になりました、ありがとうございます。

本文の文字サイズは16pxが標準ということですが、読むニーズやユーザー層にあわせて多少の増減はOKということですね。そして適正範囲は12px 〜18px ということがわかりました。

設定しなおした文字サイズは本文を18pxです

当サイトの文字サイズはこれまで16pxでした。それでも文字が読みにくいという方が一定程度いらっしゃるのは文字が中心の読み物（ブログ記事）が多いこともあるでしょう。

そこで、本文の文字サイズを「18px」としました。

これまでより、ちょっと文字が大きくなり、読みやすくなったのではないでしょうか。

また、見出しやタイトル文字のサイズは、本文文字サイズに合わせて見直しをかけます。どちらかというとこれまでは本文と見出しの文字サイズの差が大きく強調されていました。本文文字サイズと見出し文字やタイトル文字のサイズ差を「ジャンプ率」というようですが、これまではこのジャンプ率が高すぎるようでした。そこで少しジャンプ率を小さめにしました。

結果的に、以下の文字サイズにしました。

・h1の文字サイズは24px
・h3の文字サイズは22px
・h4の文字サイズは18px
・本文の文字サイズは18px
・グローバルメニューの文字サイズは14px

h4と本文の文字サイズが同じ18pxですが、見出しのh4は太字で背景色がついているので十分に見出しっぽくなっており、本文との差がわかると判断しました。

ワードプレス（WordPress）での文字サイズの変更方法

ワードプレスで文字サイズを変更する場合は、CSSの設定や操作が必要になります。
実際には利用する「テーマテンプレート」で設定してある文字サイズになるのですが、テーマによっては文字サイズを変更できる仕様になっているものがあります。

直接、CSSファイルを編集してしまうか、テーマの追加設定で文字サイズだけを設定するかのどちらかになります。

直接CSSファイルを編集する方法

ワードプレスで利用しているテーマのCSSを書き換えてしまう方法です。もっとも柔軟性が高く自由に設定が可能ですが、デザインを壊してしまう恐れもあります。専門的な知識がない場合はやらないほうがいいでしょう。

また、ワードプレスのアップデートなどでせっかく設定した内容が書き換えられてしまうことも起きやすいです。なので、私はまずこの方法を選びません。

上記は「TwentyTwenty」というテーマのCSS編集画面です。

設定はExUnitの「CSSカスタマイズ」に記述します

ライトニング（Lightning）を使っている場合は、左メニューの下のほうに「ExUnit」という項目があります。その「ExUnit」の下に「CSSカスタマイズ」という設定欄があります。

CSSカスタマイズの中身ですが最初はなにもありません。自由に追加すればいいです。

以下のように設定しました。

設定の内容

/* hタグ文字サイズ変更 */
h1.entry-title {
font-size: 24px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}

/* 本文文字サイズ変更 16→18　*/
p {
font-size:18px;
}

/* グローバルメニューの文字サイズ変更 12→14 */
.global-nav-list .sub-menu li {
font-size: 14px;
}

この設定内容は
・h1の文字サイズは24pxにする（元はたぶん32px）
・h3の文字サイズは22pxにする（元はたぶん28px）
・h4の文字サイズは18pxにする（元はたぶん22px）
・本文の文字サイズは18pxにする（元はたぶん16px）
・グローバルメニューの文字サイズは14pxにする（元はたぶん12px）
ということです。

これから簡単に設定変更もできそうなのでいいですね。ワードプレスやテーマのアップデートがあってもここで設定した内容は維持されます。

当面はこの設定で運用することにします。

引き続きサイト内の整備を進めます

Lightningのコピーライトを自社名に変更

このLightningというテーマは便利なので今後も使い続けるつもりです。
有料版もありますが、そこまでの機能を要求していませんし、サブスク契約で毎年更新料金が必要なので購入はしませんでした。
代わりといってはなんですが、コピーライト表示だけを変更するための追加機能だけ購入しました。1650円（消費税込み）です。

この機能で、Lightningのコピーライトを自社名に変更できます。

Lightning Copyright Customizer
https://vws.vektor-inc.co.jp/product/lightning-copyright-customizer