有名なWEBサイトから学ぶ。記事ページのフォントサイズまとめ

5 min
記事のおすすめフォントサイズ

皆さん、こんにちは!

WEBサイト・ブログを設計する際によく悩みがちなのがフォントサイズですよね。
見出し2(h2タグ)や本文(pタグ)との差をどれくらいつけるか、line-heightやletter-spacingをどれくらい調節するかなど。

今回は有名なサイトを参考にし自分のサイトにあったフォントサイズを見つけてもらうべく、いろんなサイトのフォントサイズやline-height・letter-spacingをまとめてみました。

記事ページのフォントサイズまとめ

特に紹介している順番に意味は無いので、記事上部から自分のサイトにあったフォントサイズを探してみてください。

font-familyをお探しの方は下記からどうぞ!

UX MILKのフォントサイズ

uxmilk
https://uxmilk.jp/

UX/UIについて海外の記事を翻訳して紹介するメディアサイト「UX MILK」です。

シンプルなデザインかつ見やすいレイアウトが特徴的です。

スタイル
body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  font-size: 0.95em;
  font-weight: 400;
}

h2 {
  margin: 50px 0px 30px;
  font-size: 1.4rem;
  font-weight: bold;
}

h3 {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: bold;
}

p {
  margin: 1.7em 0;
  line-height: 1.7em;
  letter-spacing: 0.4px;
}

bodyのフォントサイズが「0.95em」なので本文のサイズが約15pxほどです。
見出し2はその1.4倍、見出し3は1.2倍となっていました。

line-height・letter-spacingの設定は意外と控えめ。

noteのフォントサイズ

note
https://note.com/

最近は言わずとしれたメディアプラットフォームnote。文字サイズが大きく万人に見やすい印象を与えるサイトだと思います。

スタイル
body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "kern";
  font-kerning: normal;
  font-size: 16px;
}

h3 {
  font-size: 24px;
  margin-top: 50px;
  margin-bottom: -18px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

p {
  font-size: 18px;
  line-height: 36px;
}

文字サイズも行間もかなり大きめでした。
見出し2(h2)は記事内にはありませんでした。

ギズモード・ジャパンのフォントサイズ

ギズモード
https://www.gizmodo.jp/

ガジェット情報を発信する大型メディアサイトです。モノクロのシンプルなサイト。

スタイル
body {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
  line-height: 1.6;
}

h2 {
  font-size: 1.75rem;
  margin: 2.5em 0 1.2em;
}

p {
  margin-bottom: 1rem;
}

めちゃくちゃシンプル。bodyとpのフォントサイズは指定がないので、ブラウザ依存。
h2はその1.75倍といった感じでした。

WIREDのフォントサイズ

WIRED
https://wired.jp/

最新のテクノロジーを発信する有名メディアサイト。ダークモードに対応していました。

スタイル
body {
  font-family: "Helvetica Neue", Helvetica, Arial, YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt", none;
  font-variant-ligatures: none;
  font-size: 1rem;
  line-height: 1;
  text-size-adjust: 100%;
}

h2 {
  font-size: 1.14286rem;
  line-height: 1.53125em;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
  line-height: 1.75em;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

行間・文字間にかなりこだわりがある印象。h2とpのmarginが同じ、フォントサイズもほぼ同じなので少し見辛いかもです。

Qiitaのフォントサイズ

Qiita
https://qiita.com/

エンジニアリングの知識・情報共有のためのキュレーションサービスです。

スタイル
body {
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
  font-size: 1rem;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: 1.5;
  font-feature-settings: "palt";
  margin-top: 2.2em;
  margin-bottom: 2.4rem;
}

h2 {
  font-size: 1.6em;
  padding-bottom: 0.1em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.2em;
}

p {
  line-height: 1.9;
}

bodyに対して「font-size: 1rem;」なので、大体のブラウザで16px。それに対して、h2は1.6倍、h3は1.4倍と0.2刻みで調整つしていました。

本文(p)の行間は割と大きめです。

サルワカのフォントサイズ

サルワカ
https://saruwakakun.com/

RESUMEZennなど作成された、catnozeさんが運営されているメディアサイトです。

スタイル
body {
  letter-spacing: 0.4px;
  font-size: 17px;
  line-height: 1.9;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow-wrap: break-word;
  word-break: normal;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.4;
}

h2 {
  font-size: 24px;
  margin: 3.2em 0 1.8em;
}

h3 {
  font-size: 21px;
  margin: 3em 0 1em;
}

h4 {
  font-size: 18px;
  margin: 3em 0 1em;
}

p {
  margin: 0 0 1.8em;
  line-height: 1.9;
}

行間・文字間も少しとっており、見出しの文字サイズはpx指定で行っていました。

MENJOYのフォントサイズ

https://men-joy.jp/

恋愛にフォーカスした女性向けの大型メディアです。

スタイル
html {
  font-size: 62.5%;
}

body {
  font-size: 1.8rem;
  font-family: "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  line-height: 1;
}

h2 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
}

p {
  line-height: 1.65;
}

htmlに62.5%を設定しているので、1rem = 10px計算になります。
見出しと本文にフォントサイズの大きさの差がそんなに無いので、本文は読みやすい印象です。

Anyushu

Anyushu

1993年生まれのWEBエンジニア。京都のITベンチャー企業で頑張ってます。趣味はサッカー観戦(ドルトムントファン)・映画鑑賞(年間200本観てます!)・メディアサイト巡回を日々しています。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です