wired.jpのフォントが好きなので何を使っているのか調査してみた。
結論
Helvetica Neue(英字)、游ゴシック(日本語)というのを使っている。
CSSの指定
font-family属性は左から順に優先度を持つが、描画できない文字があるなど、右側にあるものの方が適切だと判断された場合は右側のものが採用される
123
body{
font-family:Helvetica Neue,Arial,YuGothic,Yu Gothic,游ゴシック体,游ゴシック,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS ゴシック,MS Gothic,sans-serif
}
FontInLogoでの実例
ProductHunt、はてブで話題になっていたFont In Logoで同じフォントを使ったロゴを調べてみた。
結構、身近なブランド、サービスで使われているみたいだ。(さすがに日本語はなかった)
ちなみに、数年前にios/mac共にHelvetica NeueからSan Franciscoというフォントへ乗り換えたらしく、論争が散見された。なんか文字が小さいのが問題らしい。
早速、このブログのフォントも上記CSSを指定してHelvetica Neue、游ゴシックにしてみた。
問題
けれど、同じような見た目にならなかった。
要因
いろいろオンオフして試してみたが、font-feature-settingsと-webkit-font-smoothingが関係していた。
それぞれ、文字詰めを自動で行ってくれるもの、アンチエイリアスをかけてくれるものらしい。
ということでこのブログに同じCSSを記述したところ、文字がかなり洒落乙になった。
でもなんかデザイン全体としてはまだまだダサいので、引き続き気に入ったプロダクトを調査してブラッシュアップしていきたい。
appendix
開発者ツールで矢印打鍵すると指定可能なフォント一覧が出るので1つずつ試すことができる。
Safariの方が数が多いのは、表示できるフォントが多いってことなのか…?
以上。
あとで読む
プロが選ぶ！本当に使える日本語フォント | それからデザイン スタッフブログ
QiitaとかはHelvetica NeueよりもSegoeUIというのを優先させてた
おすすめフォント
欧文はSegoe UI、Cambriaの方がいいという意見も。
現代の最強フォントはなにか？ー5つのベストフォント | 株式会社コミコン
