h1〜h6のfont weightは300に設定するときれいに表示される

当サイトは10月3日にデザインを少し変えました。現在はfont familyを次のように設定しています。ヒラギノ丸ゴはなく、ヒラギノ角ゴの前にヘルヴェティカなどのアップル系フォントを入れています。ヒラギノ丸ゴはフォントがとても丸く、サイトのカテゴリーによって合う合わないがはっきり出てくると思います。

font-family: -apple-system, BlinkMacSystemFont, “Helvetica Neue”, Helvetica, “Hiragino Kaku Gothic ProN”, Meiryo, Arial, sans-serif;

このとき、h1〜h6の太さは300だとちょうどいいことがわかりました。

太さをなにも設定しないと、かなり太く表示されます。ごっついな〜しつこいな〜という感じ。なぜか色も濃く出てしまう。このサイトではフォントカラーを333（333333）に設定していますが、なにも設定しないと「黒！」というしつこさが出るのです。

逆に100では英数字の太さがあまりに細くなり、「数字を3倍する」というタイトルでは「3」が極度に細くなり、日本語と英数字のバランスが悪くなります。

いろいろなweightを試した結果、300がちょうどいいことに気づきました。

サイトではcssのはじめで

a,
blockquote,
body,
br,
button,
code,
div,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
html,
img,
input,
label,
li,
ol,
p,
pre,
small,
span,
strong,
sub,
sup,
table,
td,
textarea,
th,
tr,
ul {
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
border: 0;
border-radius: 0;
font-family: -apple-system, BlinkMacSystemFont, “Helvetica Neue”, Helvetica, “Hiragino Kaku Gothic ProN”, Meiryo, Arial, sans-serif;
font-size: 0;
line-height: 1;
margin: 0;
padding: 0;
}

という正規化をしています。