見出しと本文の強弱と、セクションの切れ目のつけ方

見出しと本文に差をつけながらセクションの分かれ目をしっかりつける、そんなスタイルを探り探り。

まずは余白と文字サイズのみで強弱をつける。これを基本型として考えてみる。

• 本文に対して見出しの文字サイズを 2倍にする
• 見出しと本文の間は見出し文字サイズの半分（本文と同じサイズ）空ける
• セクションの切れ目は見出し文字サイズの 2倍（本文文字サイズの 4倍）空ける

例:

見出し文字サイズ	本文文字サイズ	見出し本文間の余白	セクション間の余白
32px	16px	16px	64px

ウエイト

見出しと本文の文字サイズにウエイト差をつける。見出しをボールド、本文をライトにする。

ベーシックだけど非常にわかりやすくなった気がする。

明度

見出しと本文の文字色に明度差をつけて強弱を出す。見出しを hsl(0,0,100%)、本文を hsl(0,0,40%) にする。

色相差は他の邪魔をしそう（青を使うとリンク色と被るとか）だし、彩度差は分かりにくいので明度で差をつけるのが良いかと思う。

ずらし

本文を一文字分内にずらし、見出しがその分飛び出るようにする。

ずらした分、本文に収められる文字数が減る。

アクセント

見出しにアクセントをつける。

一文字目の横に置いたり、上下に線を引いたり。

他

こういうのもある。