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 で指定すると Hiragino Sans + Std と Pro では400, 700で表示されることになります。
上記の表示結果になるため、Boldにすると表示にズレが発生するので font-weight の指定をあえて400, 600にする必要性がどこかで生じるかもしれません。
何かあれば追記したりするかも。
※ 10/2 22:30 Hiragino Sans の表記を追記
※ 10/3 00:15 Codepenのスクリーンショット追加
※ 10/3 17:40 CodepenのBoldの指定の間違いを修正
