Neat Design Journal

こんにちは。ブログを構成する要素の一つとしてフォントサイズが挙げられます。読みやすい文章を書くにはその内容や構成ももちろんですが、見た目の印象も読み手に大きな影響を与えることになります。そこで、今回は見出しや本文、注釈などブログ内で使われるフォントのサイズについて改めて見直してみましたのでご紹介したいと思います。

フォントサイズとは

ここでは、本文中のh2～h6までの見出し（h1はブログのタイトルにしか使ってないです）とpタグで囲まれた本文、アイキャッチ画像や本文中の画像のキャプション（注釈）の3つについて主にお話ししたいと思います。

1. 見出しのフォントサイズ
2. 本文のフォントサイズ
3. キャプション（注釈）のフォントサイズ

と、ここでいきなり脱線しますが、そもそもフォントサイズの指定はどのように行っているか（行っていたか）についても少し触れておきます。これまでは、

html {
    font-size: 62.5%; /* 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

以上のようにhtml要素のフォントサイズを10pxに設定してbody要素を1.6rem（16px）としていました。このようなremを使ったサイズ指定はルート要素のフォントサイズ（10px）を基準としていますので他の要素のサイズ指定が行いやすく扱いやすいと考えていました。ただ、色々なサイトを見て検討した結果、今回のフォントサイズ見直しに併せてサイズ指定もpx指定に統一しました。

body {
    font-size: 16px;
}

細かいところは崩れているかもしれませんが徐々に直していきたいと思います。

見出しのフォントサイズ

まずは本文中の見出しについてです。当ブログの本文中で使用しているのは主にh2、h3、h4の3つだけです。h1はブログタイトルでしか使っていませんしh5やh6については恐らく使ったことすらありません。ということで、本文のフォントサイズを16pxにすると仮定した場合の各見出しのサイズが以下の通りです。

• h2：37px（h3の約1.31倍）
• h3：28px（h4の約1.31倍）
• h4：21px（h5の約1.31倍）
• h5：16px（基準サイズ＝本文サイズ）
• h6：12px

本文のサイズを16pxとして、小見出しのh4をその約1.31倍（数値は四捨五入）に設定しました。その他のサイズも全て1.31倍で統一しました。1.31という倍数については以下のサイトを参考にさせていただきました。

この他にも興味深い記事ばかりでとても勉強になりました。ありがとうございます。

本文のフォントサイズ

続いては本文のフォントサイズです。これは上にも書きましたが16pxとしています。各ブラウザのデフォルトサイズがこの16pxなのでそれに合わせている感じです。一応他のサイズも試しては見ましたが、個人的にしっくりきたのがやっぱりこれでした。

キャプション（注釈）のフォントサイズ

最後はアイキャッチ画像と本文中の画像のキャプション（注釈）についてです。

アイキャッチ画像

当ブログのアイキャッチ画像にはクレジット表記を付与していますが、こちらのフォントサイズは11pxとしています。例えば以下の記事をご参照ください。

アイキャッチ画像の下に「PHOTO CREDIT: HEREISTOM VIA PHOTOPIN (LICENSE)」というクレジット表記があります。

この辺は私の感覚から見た目の印象で決めています。10pxは小さいし12pxは大きいと感じましたので11pxに落ち着きました。

本文中の画像

こちらも私の感覚で決めたんですが、本文中の画像キャプションについては14pxとしています。位置づけとしては本文に準ずるようなものなので、全体のバランス等も考慮して本文の16pxよりもやや小さめの14pxにしました。

最後に

その他にも個別記事の下にあるページナビ（前後の記事）や関連記事の見出しはh3でマークアップしているので28pxとし、それぞれの記事タイトルはh4なので21pxとするなど、ブログ全体のフォントサイズを見直しました。これまで漠然と感覚だけで決めていたものを今回のように根拠のある数値に変更したことで全体のバランスも良くなったと思いますし、サイズ指定に迷いがなくなったかなと思います。本文と見出しのメリハリも効いて少しは見やすくなったのではないかと感じています。