Mac OS X El Capitanのヒラギノ角ゴシック

MarvericksからやっとこさEl Capitanにしました。

フォントのレンダリングがシュッとしたりUIがカリッとしたり、色々と見た目がわかりやすくなっていて好印象です。

とそんななかOSをアップデートしてから表示が変になったとの報告があり、自分でも確認しました。

太字の部分が明らかにデブっとしています。これがなんだか分からなく困っていた様子でした。

ということでCodepenにてヒラギノをフォント指定してリストを作りました。

いい感じですね。ただCSSではfont-weight: 0;が指定できないので表現出来なさそうです。

Slackで何故文字が太くなったかというと、Slack側のCSSの指定がfont-weight: 900;で指定されていることが原因でした。

日本語のウェイトが大体二つだったことにより発生していなかっただけで、実のところはこのようになっていたのかもしれません。

またMDNの font-weight の解説によると

600 ～ 900 までの指定不可能なウェイトが指定された場合、太字（700 相当）として解釈されます。400 ～ 500 の場合はnormal として、100 ～ 300 は 細字として解釈されます。但し細字での表示に対応したモダンブラウザは存在しないので、100 ～500 までが通常のウェイトで表示されるでしょう。

さてここで問題です。
weight を normal と bold で指定すると Std と Pro では400, 700で表示されることになります。

上記の表示結果になるため、Boldにすると表示にズレが発生するので font-weight の指定をあえて400, 600にする必要性がどこかで生じるかもしれません。

何かあれば追記したりするかも。