こんにちは。プロブロガーのアキラです。
今回は、このブログのフォントサイズ、…フォントサイズとは「文字の大きさ」のことです、を変えてみた、という話です。
「どのフォントサイズがいいのか」、わたしが決めるに至った判断材料を書きますので、現在「ブログのフォントサイズどうしよっかな～」と考えてるブロガーのみなさまの役立てればと思います。
変更前のフォントサイズ
このブログは、有料テンプレート「アフィンガー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」から「２」の間で、決めるのが良いとされてるみたいです。
スマホでのフォントサイズを「0.9375rem」（15px相当）した場合、行間は「1.5」だと文字が詰まって見え読みにくい。ですが「1.7」まで広げちゃうと、今度は、行の隙間が空きすぎて、次の行に目線を移動しにくい。
そこで、ちょうど良く感じた「1.6」にしました。
満足してる
最適なフォントサイズは、「想定する読者層」、「文章の改行の頻度」、「文章の装飾、たとえば、太字、赤字を使う頻度」によって、異なってきますけど、今のところ、スマホでは、
line-height: 1.6;
という設定を気に入ってます。
ちなみに、「px」と「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の初期設定
line-height: 27px;
を、サイズはそのままに、指定単位だけ変えときました。
line-height: 1.8; ←27÷15＝1.8
PCでは、スマホの場合より、行間をやや広めにとるのが、一般的であり、読みやすくするコツみたいです。
変更後まとめ
今回の変更点をまとめます。
変更前（アフィンガー5の初期設定）
font-size: 18px;
line-height: 30px;
font-size: 20px;
line-height: 30px;
font-size: 15px;
line-height: 27px;
今回、変更後
font-size: 0.9375rem;
line-height: 1.6;
font-size: 1.25rem;
line-height: 1.5;
font-size: 0.9375rem;
line-height: 1.8;
結局、①スマホのフォントサイズを「3px」分小さくしたことと、②単位を変えたこと以外は、初期設定のままです。
その意味で、アフィンガー5の初期設定は優秀でしたね。
今のところ、かなり満足のいく変更になりました。やって良かったです。
是非、あなたのブログの参考にしてみてください。
関連記事
こちらの記事も参考になるはずです。