フォントサイズを決めた話

どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか？
初めての方、いらっしゃい！
複数回目の方、再訪問ありがとです(・∀・)

引き続きPC版の「日別、月別のテンプレート」
正式名称：DateBased Archives
で「2カラムレイアウト」にしてCSS調整していきます。

• 横幅の決定
• 2カラムレイアウトにして雰囲気を掴む
• フォントファミリーの決定

まで来ました。

実はフォントファミリー決定前に
フォントサイズを決めていました。

これまでのフォントサイズは？

フォントサイズは、今までピクセル数指定ではなく
smallやx-smallといったサイズ指定をしていました。

Google Search Consoleの「モバイルユーザビリティ」で
「テキストが小さすぎて読めません」というエラーを
解消するには、フォントサイズはどのくらいが良いんでしょう？

ということで、Google の
レスポンシブ ウェブデザインの基本にある
「テキストを読みやすく最適化する」という箇所を読みました。

上記サイトによると

• 1行あたり70～80文字（英単語で約8～10語）
• 1em の Roboto フォントだと 1 行あたりちょうど 10 語
• 上のサイトの例では、最適なコンテンツ幅は550px

となってます。

• 半角英数字で70→全角で35文字と換算
• 550px ÷ 35文字 ＝ 15.7142 ≒ 16px

UXミルクというサイトの記事
「見やすいサイトを作るときに最低限チェックしたい６項目」

によると

• フォントサイズは、16～24を目安
• 行間は、150～200％を目安

とすると良さそうです。

Chrome で調べた computedStyleは以下の通り

xx-small	10
x-small	10
small	13
medium	16
large	18
x-large	24
xx-large	32

これを参考にして
具体的には、既存のCSS内で下記のようにします。

• mediumより小さいものは、mediumに
• コンテンツ本文は、largeに
• 見出し系は、x-largeに

2020年2月で調整した結果を見る

なお、この記事を投稿した段階では「行間」は調整中です。

ここまではOKだ