本文のフォントサイズ
本文のフォントサイズは、14px〜18pxに指定する。
Googleが推奨しているフォントサイズは16pxなので、そこからサイトのコンセプトによってプラスマイナス2pxを目安に指定する。
- 本文のフォントサイズは14px～18pxで指定する
- 14pxは若い世代に対して高級感やおしゃれな印象を与える時に使用する（逆に余白は大きめに取る）
- 18pxは年齢層の高い世代に対しての優しさ（スマホを持つ年齢層が高くなってきている）
ヘッダーの高さ
- ヘッダーの高さは70～100pxに指定する（多くのサイトで使用されているため）
- ヘッダーのフォントサイズは本文と同じにするのがおすすめ
※最近では、ファーストビューに大きく綺麗な画像を使用しているサイトではヘッダーの背景を透明にしたり、PCサイトでもハンバーガーメニューを使用しているサイトもある
本文の文字色
#000（真っ黒）を使用するとユーザーの目が疲れやすく、離脱率をあげてしまう。目が疲れやすくなってしまう理由としては、背景が#FFF(真っ白)であった場合にコントラストが強すぎてしまうことが考えられる。
そのため、ブログやメディアなど文字量の多いサイトでは特に#000は使用しないように注意する。
- 本文の文字色は#000にしない
- 本文の文字色は#333がおすすめ（背景とのコントラストを弱める）
文字間の調整
文字間 letter-spacing: 0.05em〜0.1emで指定する。（値が高すぎると文字間が広がりすぎて読みにくくなる）
サイトの余白
- セクション間で同じ余白を繰り返す（余白にリズムが生まれ、読みやすいデザインになる）
- 高級感を出したい場合、セクション間や行間など多めに余白を取ることで、上品さが出る
- 要素を目立たせたい場合、行間や写真の周囲などの余白を多く取りメディアを強調する
- 楽しい雰囲気を出す場合、余白を小さく取り、イラストや写真を全体に入れることでワクワク感や楽しさが伝わるデザインになる
- テキストで余白を取る時も、必ず階層やまとまりを意識して取り入れる（タイトル⇔本文⇔リンク など）
- 余白は「8の倍数」で取る。一般的に使用されているスクリーンの解像度が8の倍数であることが多く、解像度が異なるスクリーンでも同じように表示することができる。また、後から修正した場合でも割合を変えれば端数が出なくなるので調整しやすいというメリットもある
