本記事は200弱ツイート、500弱のはてブと16000PVを2日で稼ぎ出した(稼いだからってどうもないけど)
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！ | DevAchieveの反省会会場となります。
未読の方は先に読んでおくと話がわかりやすいかと思います。指定だけ見たい人は
こちら。
タイトルではてブや検索流入を狙う
本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Lifeで
解説されている通り、はてブは全角32文字までに入れないとトランケートされてしまうので短めに。
はてブユーザーが大好きな最強とか入れておいて、読んでブクマしてもらえるようにしておきます。
「font-family 指定 オススメ」というキーワードを埋め込んでおけば今後の検索流入も見込めます。
上記の狙いが上手くハマった結果です。もはや「font-family 指定」でググると2位に出てきます。
ちなみに「font-family 指定」でググって出てきた下記のサイトを参考にしているのでそんなに外れてないはず。
font-familyなに指定する？ | Tips Note
資料：日本のコーダーのfont-family指定 | ウェビンブログ
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
いまさら聞けないCSS font-familyのまとめ: 小粋空間
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn | DAICHIFIVE blog
適当にぶっこんでおくと訂正してもらえるメソッド
フォントに詳しくないからある程度調べてそれっぽいこと書いておいたら後は
はてブユーザーが何か指摘してくれると信じてました。
Exactly(その通りでございます)
line-height の値には単位なしが良いとされる理由 - lucky bag
line-height の値には単位なしが良いとされる理由を知らなかったので勉強になりました。
コレは知りませんでした。
僕の中では三点リーダは...のイメージなので問題ないんですがそうでないデザインの時は気をつけまます。
これなんかは普通にググってもわからない情報ですよね。上手くメソッドが実行されていて嬉しいです。
しかしWindows XP以前の人たちはメイリオ指定できなかった場合は
MS Pゴシックしかない気がするのですが、他に何を指定すればいいのでしょうか？
フォント云々の前にパソコンを買い換えて欲しいところです。
その他のフォント指定おすすめなど
id:sunoho
最初はHelvetica(Neue)で安定だと思います
id:Shir
Arialより前にHelveticaを・・・
id:gmsniper2
メイリオより前にヒラギノを表記するんだったらHelvetica(Arial)と組み合わせた方がいいと思うんだよなあ
id:n-yuji
ダメダメ。5年前ならコレでよかったかもしれんが。ヒラギノはProNにすべし、Osakaは入れる必要なし。
id:masamune61
参考に。ヒラギノは馬鹿にできません。
id:solidstatesociety
ヒラギノを甘く見すぎ
id:gnta
Verdanaは横幅を取り過ぎるし極小サイズでの視認性に優れてるだけでフォントフェイスも美しくないのでBodyフォントには向かない。
id:Falky
最近はfont-familyの指定順序だけで正しくクロスブラウザ和欧混植できるの？つい1年くらい前まではWebkit以外グダグダで、表示ブチ壊れるUAもあったはず。@font-face unicode-rangeめんどくさいですね。
などなど様々な意見がありました。
ヒラギノで批判されているようですが、いまいち意図がつかめないところが残念な所です。
ヒラギノはProNにすべしと言われたので調べてみるとProNでは略字体が正しい字になるようです。
Leopardの新フォント、ヒラギノ角ゴ ProNとは | トブ iPhone
iOS 6におけるブラウザの表示フォントについて（Hiragino Kaku Gothic ProとProNでも違いが...）｜Blog｜Skyward Design
iOSでもヒラギノはProNが良さそうですのでProNで行く事にしましょう。
あと、Mac OS 9以前のために一応残しておいたけどやっぱりOsakaはいらないみたいです。
@font-face unicode-rangeまで踏み込むのはよくわからないし面倒臭すぎるのでこのへんでお茶を濁します。
最強のfont-family指定(旧)
CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fontsや
Bootstrapを参考にして最強のfont-family指定決定版を作りました。
body {
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 14px;
line-height: 1.3;
font-weight: normal;
}
個人的にはこのブログで見る分にはVerdanaが幅広で英数字が読みやすく感じるのですが
他のサイトで使う用と考えてHelvetica系列に先を譲りました。
これで決定版を名乗ってもいいだろう。何かあったらまたご指摘下さい。
追記(2012/12/29 18:00)
萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。
ユーザーの選択の尊重のためにfont-familyを指定するなという意見もいただきましたが、
Windows 7のフォント設定がデフォルトのままのIE9(ClearType有効)でこの有様です。
一部のフォントにこだわりのあるユーザーがブラウザ設定で自分好みのフォントで見れるようにするのために
大多数のフォントが設定できることも知らないユーザーにコレを見せろというのは受け入れることができません。
上記のページで言われている和文フォントと欧文フォントの不揃いを気にするならば
和文フォントのみの指定が良いかと思います。
確認用にこちらに
font sample pageを作りました。
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
メイリオがVerdanaっぽくて、ヒラギノ角ゴがHelveticaっぽくなっているので
少し違う印象を与えるのが微妙かもしれませんが、
和文フォントのみで指定するなら不揃いもなくていいかもしれませんね。
追記(2013/01/12 18:00)
上記のサイトでコメントを通して色々話しあった結果、和欧混植は不揃いが生じるので
和文フォントのみ指定、または総称ファミリを指定するのが良いという結論に至りました。
IEで総称ファミリ指定で上記のスクリーンショットのような中国語フォントが使用されてしまうバグがあるので
和文フォントを指定するのが安牌だろうと思います。
和文フォントを指定してもユーザーの環境によって表示が変わり得るのであくまで安牌ですが…。
結論: 最強のfont-family指定
body {
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
font-size: 14px;
line-height: 1.3;
font-weight: normal;
}
または
body {
font-family: Sans-serif;
font-size: 14px;
line-height: 1.3;
font-weight: normal;
}
ちなみにOperaとかいう最強伝説を持つブラウザには和文フォントは日本語で指定しないといけないので注意。
日経ソフトウエア 2012年 01月号 [雑誌]![日経 ソフトウエア 2012年 01月号 [雑誌]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tj64gJinDoDqMVyMWvbdwraoGSD-8bDIB4_f9bJ-QaitmX6FAYlDjv8jzECluFYeBz9SfHpk4CktZP_y4ggmafOl-hRtPy_tWiHF_zVqFFjERxVYqoQAQUq29Q-R2XdD4wXyjo6FQTSA=s0-d)