はてなブログをカスタマイズする

WebエンジニアのHTML/CSS備忘録的な。

【モバイルファースト】ブログのスマホページに最適なフォントサイズと余白

業務でCSS等でフロント部分のデザインを行なっているので、その知識を備忘録として残します。

 

今回のテーマは「モバイルファースト」。

細かいデザインよりもまずはスマホで見て読みやすいかが前提になくてはなりません。

 

読みやすさに直結する、最も重要なフォントサイズ余白について設定しました。

 

フォントサイズ 

  • 本文:16px
  • H3 大見出し:22px
  • H4 中見出し:20px

余白

  • 記事の左右の余白:15px
  • 段落(pタグ)の余白:18px
  • 行間の余白:17px

 

以上です。

これは私の好きな某プロブロガーさんの設定を参考にしています。