Noto Sans Japanese について、一部の漢字が若干の太字で表示されてしまう。

Question

Noto Sans Japaneseを使用して開発しています。

styleタグ

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gudea" >

cssファイル

    font-family: 'Noto Sans Japanese','Gudea';
    font-weight: normal;
    font-weight: 100;

上記のように設定していますが、一部の漢字が若干太く表示されてしまいます。
以下の場合でしたら、項目の「目」、表示の「示す」。
解消方法をご存知の方がいましたら、ご教授願います。

Comments

[m.ts10806]

そういう書体なのではと思いますが・・。「若干」というと個人的感覚になってしまいがちなので、どうなったらOKかという具体例を提示願います。

[mizutama72]

早速のご連絡ありがとうございます。Noto Sansのページ（https://www.google.com/get/noto/#sans-jpan）で見てみましたら、thinの場合は漢字の横棒（例：自由）が太くなっていました。そういう書体のようですね。。もう少し太くしてみたり工夫してみます。

[m.ts10806]

見た感じ、ひらがな・漢字関係なく交差する線が少し強調表示される書体のようですね。thinに限らず強調表示されているように見えます。

[shimitei]

私の場合はWindowsで見ると違和感がなく、Macで見ると若干気になります。どのようなOS、ブラウザでの表示でしょうか？

[mizutama72]

ご回答ありがとうございます。こちらはOSはMac、ブラウザはChromeです。Windowsでは違和感ないのですね。参考になりました。

Answer 1

Noto Sans JapaneseとMacの組み合わせでも、次の指定を付けるとあまり気にならない表示になります。

body {
  -webkit-font-smoothing: antialiased;
}

他には、高解像度環境かどうかでも見え方が異なるかもしれません。
font-smoothingでOSXでのフォントのレンダリング方法を調整する - Qiitaから、Webブラウザにおける文字のアンチエイリアスの現状の最適解のページが参考になりそうです。

Comments

[mizutama72]

ご回答ありがとうございます。
-webkit-font-smoothing: antialiased; を設定してみたのですが、全体的にうすくなり、やはり一部の文字が太く見えました。
font-weightが100ですと、上記のようになってしまうようなので、font-weightを300にして、-webkit-font-smoothing: antialiased; を設定しましたら、目立たなくなりました。

教えていただいたQiitaのページを読んでみようと思います。ありがとうございました。