見出しタグのmarginは何pxにすればよいのか?

|

h1やh2の見出しタグの場合、marginを何も指定していないとブラウザが自動で間隔を取ってしまうため、少し間の抜けた印象が出てきてしまいます。

デフォルトCSSではh1で2emなので、仮に1emを16pxとすると32px程度かと思いますが、この場合ですとmarginの値が0.67emとなるため、上下に約21.44pxになるのかもしれません。

一方、h2の場合は1.5emなので、24px程度かと思います。

ただ、不思議なことに、h2の場合のmarginは0.67emではなく、0.83emとなるため、約19.22pxになるかと思いますが、h1の場合と割合が一致しないようです。

h1 → 2em、marginは0.67em
h2 → 1.5em、marginは0.83em

仮に、1emを16pxとしますと以下のようになります。

h1 → 32px、marginは約21.44px
h2 → 24px、marginは約19.22px

h1の場合は文字の大きさに対して「67%」であるのに対し、h2の場合は「83%」となるため、小さい文字の方が間隔を取る割合が増えることになってしまいます。

おそらく、h1で83%もmarginをとってしまうと間の抜けた印象が出てくるためと思いますが、感覚的にはマージンの割合を同じにするよりもサイト全体のバランスがよいのかもしれません。

概ね、h1もh2もmarginは上下に「20px」程度が最適かと思いますが、h1については気持ち広めで21.5px程度、h2については19px程度にすれば、違和感がなくなるものと思います。