search
New サムネイル PythonでSchema.orgのDate形式(ISO 8601)を扱う New サムネイル 分断するメディアとインターネットのユーザー:ライトノベル、キズナアイ、TikTokに思うこと New サムネイル Golangのchiを使ったrouterの例

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;
}

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

広告

広告

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy