ブログ論

ブログのフォントサイズを変えてみた

投稿日:2018年5月27日 更新日:


こんにちは。プロブロガーのアキラです。

今回は、このブログのフォントサイズ、…フォントサイズとは「文字の大きさ」のことです、を変えてみた、という話です。

「どのフォントサイズがいいのか」、わたしが決めるに至った判断材料を書きますので、現在「ブログのフォントサイズどうしよっかな~」と考えてるブロガーのみなさまの役立てればと思います。

変更前のフォントサイズ

このブログは、有料テンプレート「アフィンガー5」を利用しています。

今まで、フォントサイズは「アフィンガー5」の初期設定のままにしてました。

わたしが「アフィンガー5」を購入の経緯を簡単に説明しますと、以前、「アフィンガー5」が発売された直後に、期間限定セールをやってまして、通常価格の半額くらいだった記憶があるのですが、「アフィンガー5 EX」を9500円で購入しました。

…9500円だったら、さすがにフォントサイズとかは、はじめから、ちゃんと考えて設定されてるだろうという信頼してましたし、そういう細かい設定を自分でするのが面倒だからこそ、有料テンプレートを購入したわけです。

なんで、フォントサイズについては、いままでほったらかし…、つまり初期選定のままにしてました。

「アフィンガー5」のフォントサイズの初期設定は、以下のように、画面の大きさ事に、3パターンに分かれます。

スマホ
font-size: 18px;
line-height: 30px;

タブレット
font-size: 20px;
line-height: 30px;

PC
font-size: 15px;
line-height: 27px;

「アフィンガー5」のマネをしたい方は、この数値にするとよいでしょう。

変更前の不満点

・初期設定だと、スマホは18px、タブレットは20pxですが、これだと少し文字が大きくて、読みにくい感じがします。

なので、スマホとタブレットでは、もう少し文字を小さくしたいな、と。

※PCの15pxについては、ちょうど良い大きさと考え、今回は変えません。

・それと、フォントサイズの指定単位は、「px」より、「rem」の方が良いという記事を読んだので、「px」から「rem」へ変えたい。

・あと、行間、line-heightは、単位を「px」とか指定しない方が良いという記事を読んだので、単位無しへ変更したい。

まとめると、こうなります。

スマホ、タブレットのフォントサイズを小さくする。それに伴い、行間も微調整する。
フォントの指定単位を、「px」から「rem」へ変える。
line-heightの指定単位を、「px」から「指定単位無し」へ変える。

この3点を変えます。

「スマホ」のフォントサイズ、行間をどうするか

まずは「スマホ」から。いろいろ試行錯誤した結果、

変更前
font-size: 18px;
line-height: 30px;

から、

変更後
font-size: 0.9375rem;
line-height: 1.6;

へ、変えました。

変更後の「0.9375rem」とは、「px」でいうところの15pxに相当しますので、3px分、文字を小さくしたことになります。

かなり小さくしました。

スマホで15px(0.9375rem)とした理由

スマホで一般的なフォントサイズは、16pxらしいのですが、

15pxだと、それより少し小さく、文章がスタイリッシュに見えてかっこいいです。

仮に、スタイリッシュさを追求して、14pxまで小さくしちゃうと、目が悪い人には文字が小さすぎて読みにくいかもしれない。一方、一般的な16pxは、スマホだと少し文字が大きすぎる感じがする…。

そこで間を取っての15px(相当の0.9375rem)というわけです。

スマホで行間を「1.6」とした理由

line-heightについては、フォントサイズとの兼ね合いや、PCかスマホか等によって、読みやすい適切な行間幅は異なってきます。

なので、「行間は、この数字が良い」と、一概には言えないのですが、いずれの場合も、「1.5」から「2」の間で、決めるのが良いとされてるみたいです。

スマホでのフォントサイズを「0.9375rem」(15px相当)した場合、行間は「1.5」だと文字が詰まって見え読みにくい。ですが「1.7」まで広げちゃうと、今度は、行の隙間が空きすぎて、次の行に目線を移動しにくい。

そこで、ちょうど良く感じた「1.6」にしました。

満足してる

最適なフォントサイズは、「想定する読者層」、「文章の改行の頻度」、「文章の装飾、たとえば、太字、赤字を使う頻度」によって、異なってきますけど、今のところ、スマホでは、

font-size: 0.9375rem;
line-height: 1.6;

という設定を気に入ってます。

ちなみに、「px」と「rem」の変換は、

rem変換ツール
http://hp-html.jp/px/

というサイトで簡単にできました。

「タブレット」のフォントサイズ、行間をどうするか

次は、タブレットで読むときのフォントサイズについてです。

ふだんタブレットサイズでブログを読むことは無いのですが、「フォントサイズをどう変更しようか」考えるために、いま、ためしに画面をタブレットサイズに縮小して、このブログの記事をいくつか読んでみたのですが、別に、いまのままで、十分読みやすいですね、これ。

アフィンガー5の「タブレット」の初期設定である、

font-size: 20px;
line-height: 30px;

で、まったく問題ありません。

なら、このままでいいや。予定変更。

一応、単位だけ変えときました。

font-size: 1.25rem; ←(20pxに相当)
line-height: 1.5;

タブレットの画面の大きさだと、フォントサイズは大きめで、かつ、行間は狭いほうが、読みやすい、という性質があるのかもしれません。新しい発見でした。

「PC」については初期設定のままで

PCについては、予定通り変えません。

アフィンガー5の初期設定

font-size: 15px;
line-height: 27px;

を、サイズはそのままに、指定単位だけ変えときました。

font-size: 0.9375rem; ←15px相当
line-height: 1.8; ←27÷15=1.8

PCでは、スマホの場合より、行間をやや広めにとるのが、一般的であり、読みやすくするコツみたいです。

変更後まとめ

今回の変更点をまとめます。

変更前(アフィンガー5の初期設定)

スマホ
font-size: 18px;
line-height: 30px;

タブレット

font-size: 20px;
line-height: 30px;

PC

font-size: 15px;
line-height: 27px;

今回、変更後

スマホ
font-size: 0.9375rem;
line-height: 1.6;

タブレット

font-size: 1.25rem;
line-height: 1.5;

PC

font-size: 0.9375rem;
line-height: 1.8;

結局、①スマホのフォントサイズを「3px」分小さくしたことと、②単位を変えたこと以外は、初期設定のままです。

その意味で、アフィンガー5の初期設定は優秀でしたね。

今のところ、かなり満足のいく変更になりました。やって良かったです。
是非、あなたのブログの参考にしてみてください。

関連記事

こちらの記事も参考になるはずです。

ブログの最適なフォントサイズを考察する

アフィンガー5の「フォントサイズの変更」のやり方

-ブログ論

Copyright© 「痛い男」が書くブログ , 2019 All Rights Reserved.