かげさんの111から始まるHistory » CSS » フォントサイズを決めた話

« font-familyの指定を決めた話 | トップページ | 他のテンプレートに反映する前にやりたいこと »

2020.03.09

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

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

引き続き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ミルクというサイトの記事
見やすいサイトを作るときに最低限チェックしたい6項目

によると

  • フォントサイズは、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だ



| | コメント (0)

このエントリーへのリンク

このエントリーのリンクを入れるHTML:

コメント

このブログの新着コメントをRSSリーダに登録する為のxml




←名前とメールアドレスは必須です。
URLも記入すれば、URLのみが公開されます。
メールアドレスのみですと、メールアドレスが公開されてしまいますので、御注意ください。

↓コメント本文では、「a href」「b」「i」「br/」「p」「strong」「em」「ul」「ol」「li」「blockquote」「pre」のタグが使えます。絵文字をクリックすると、本文にタグを挿入できます。