マークダウンにおける見出しのサイズについて

1 min read読了の目安(約1400字

Gatsby を用いてブログ作成をしてるのですが、その中でマークダウンの見出しのフォントサイズに悩んでいたので、Zenn,SUZURI,GitHubでマークダウンの見出しのフォントサイズを調べました。

chromeのデベロッパーツールにて調べました。レスポンシブル時のフォントサイズも調べるため、デベロッパーツールにおいてiPhone Xで調べました。

それぞれのサイトについて

Zenn

おもなコンテンツ:テキスト
zennはエンジニアのための新しい情報共有コミュニティで知見を記事として投稿することのできるサイトです。

GitHub

おもなコンテンツ:プログラムなどのソースコード
Githubはソフトウェア開発プラットフォームです。

SUZURI

おもなコンテンツ:写真や画像
SUZURIはオリジナルアイテムを販売できるサイトです。画像を投稿することでTシャツやバックとして販売できます。SUZURIにジャーナルと呼ばれる機能があり、販売主が記事を投稿できます。あくまでも画像を投稿してアイテムをつくることを目的としており、記事投稿はメインの機能ではありません。

結果

PC

サービス Zenn GitHubI SUZURI
1em 15px 16px 16px
h1 1.7em 2em 2.5em
h2 1.5em 1.5em 2.0em
h3 1.3em 1.25em 1.5em
h4 1.1em 1em 1em
h5 1.0em 0.875em 0.875em
h6 0.85em 0.85em 0.875em
p 1em 1em 1em

モバイル

サービス Zenn GitHub SUZURI
1em 14.25px 16px 16px
h1 1.6em 2em 2.5em
h2 1.4em 1.5em 2.0em
h3 1.2m 1.25em 1.5em
h4 1.1em 1em 1em
h5 1.0em 0.875em 0.875em
h6 0.85em 0.85em 0.875em
p 0.95em 1em 1em

それぞれを比べてみて

ここからは個人的な感想になります。

Zennは環境ごとに異なる表示を行っていました。テキスト主体のコンテンツなので細かく調整されておりさすがだなと感じました。
SUZURIは見出しごとのサイズの変化が分かりやすかったです。ただ見出しとして大きく感じました。
GitHubはh1は大きくし、それ以外は同じようなサイズの変化であるため、h1がどれかわかりやすかったです。
自分にブログはZennを真似して実装しました。

https://blog.yukyu.net/

以上です!最後まで読んでいただきありがとうございます。