📏
マークダウンにおける見出しのサイズについて
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を真似して実装しました。
以上です！最後まで読んでいただきありがとうございます。
Discussion