Hatena::ブログ(Diary)

遠近法ノート

2013-02-25

CSSのfont-family指定はこれで決まり!(2013春)

追記:最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした(汗)*1


とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり(一番下の追記も参照で)。

font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;

CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。

指定順序、入れたフォント、入れてないフォント、すべてに意味があります。

以下説明。

ヒラギノはProではなくProN。

OS Xの和文標準フォントがヒラギノProからProNに変更されてもう数年がたちます。Proはいちおう後方互換のために残されているようですが、iOSにはProNしか入っていません*2

Osakaは不要。

MacのフォントがOsakaだったのは、もう10年以上前の話です。大手サイトで未だにOsakaを指定しているところもありますが、表示が汚いOsakaは入れないようにしましょう。

Lucida Grandeを先に指定。ヒラギノの従属英数字を使わない。

OS Xの表示フォントであるLucida Grande+ヒラギノ角ゴの合成フォントにします。ヒラギノの従属英数字はあまりスクリーン向けじゃないです。この指定の欠点は、(Macで)三点リーダが欧文扱いになって下がってしまうところ。これを回避したい場合、Lucida Grandeは削ります。

Windowsメイリオで。

素直にメイリオを使用します。英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします(追記:Windowsには通常Lucida Grandeは入ってませんので、これの影響は考慮しません。「Windows版SafariのLucida Grande。」参照)。

Helvetica、Arialは指定しない。

Helvetica、Arialは、あまりスクリーン向けじゃないと思います。特に数字の「1」の形とか。全体的に字間が狭いし。それでもHelvetica系が好きなんだよ!って人は、

font-family:Helvetica, Arial,
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;

とするのがいいでしょう*3

MS Pゴシックはたぶん入れなくていい。

別に指定しなくても必要なときには出てきちゃうので……(あんまり自信ない)。入れる場合はもちろんメイリオのあとにします。

大手サイトは参考にしない。

Yahoo!とかAmazonとかAppleとか、古くからある大手サイトのfont-family指定は、お手本になりません。
担当になったつもりで考えれば想像がつくと思いますが、大元のCSSを変えたらいろんなところに影響が出るかもしれないわけで、そんなリスクを取りたくはないですよね?
あの手のサイトは、ずっと大昔の指定をそのまま残しているだけです。今からまねをしてはいけません。

以上。PC向け、日本語サイト向けの設定ですので、用途が違うとまた別の解が出てくるとは思いますけど。

追記:もっと省略できるのでは?

Lucida Grandeを指定してあればヒラギノ角ゴは自動で出るから省略できるんじゃね?
という意見をいただきました。確かにごもっともです。
また、和文フォントの日本語名はもう不要だという説もあります(かつては一部のブラウザで必要でした)。
……ということは、うんと省略して、

font-family:'Lucida Grande', Meiryo, sans-serif;

これで良さそうです!
最小設定としてはこちらのほうがおすすめ。

2/27さらに追記:やっぱりヒラギノ角ゴは必要っぽい。

きれいにまとまったと思ったのですが……。上の設定だと、Macメイリオが入っている場合(つまりMS Officeをインストールしてる場合ですね)、Lucida Grandeの代替えとしてのヒラギノ角ゴが効かず、その次の指定であるメイリオが出てしまう、との情報をいただきました。これは考慮せざるを得ませんね。

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;

となりました。これでよろしくお願いします。

*1:だってまた2013冬が巡ってきちゃいますもんね。

*2CSSでProを指定しているサイトでは、漢字字形の食い違いが発生しています。

*3:最初にHelveticaを入れるとIEの表示が不正になる、とかいう話もありますが、超レアケースなので考慮しません。

マイマイ 2013/06/22 17:08 はじめまして。マイと申します。
昨夜突然IE10がインストールされ、(windows7です)気づいた時には更新が終わっていました。IE10になったので、自分のホームページを確認しましたところ、なんというかとても残念な表示になっていました。
大変困って、いろいろ検索しているうちにこちらにたどり着きました。
たぶん今まで見逃されていたいろいろが、突然有効になった&何かが変わった&バク、と思ったのですが、調べても何がどう変わったのかわからなかっので、CSSから作り直すことにしました。
こちらの記事を参考にfont-familyを設定させていただきました。ありがとうございました。

シンプル人シンプル人 2013/10/07 22:52 「2013秋」はこれでいかがでしょう?
Verdana, sans-serif

n-yujin-yuji 2013/10/08 00:09 シンプル人さん、趣旨をまったく理解していませんね。どうぞご自由に……。

通りすがり通りすがり 2013/11/05 04:01 Webの世界って環境があるから大変ですよね^^;Web系やりたいな〜と思ってはいるのですが、やってる人しか知らない的な知識やハックがありすぎで、どこからやっていいのやらという感じです。自分のサイトにWebフォントとか使いたいのですが、プラットフォームごとに表示が違うとか考えると躊躇してしまいます。

jump-upjump-up 2013/12/04 17:31 お世話になります。自分のブログは全部参考にしてフォントを変えています。
ただ、気になりますのが、たとえばデフォルトのテーマ(テンプレート)で全幅1,000pxで設定した時、フォント変更前は画面上ぴったり表示されていたものが、変更後、レイアウトが崩れないまでも、微妙に画面からちょっとはみ出していたり、表示する際に一瞬画面が揺れるような感じで表示されるブログがあったりします。
おそらくフォントを変更したことが理由ではないかと考えているのですが、対処方法を調べてもよくわかりません。
気になりつつ使っている状況です。

BoromBorom 2013/12/25 13:49 ブラウザなど環境に依存しますが、和文のフォントはスペースなしでもクォートで括ってやらないと、うまく判定されないことがあります。
なので、「"メイリオ"」としてやったほうが安全ですね。

追記版では日本語表記自体が削除されていますが、ご参考まで。

n-yujin-yuji 2013/12/26 13:05 jump-upさん、たぶんですが元の設定に上書きしてるために、元の設定が一瞬反映するのではないかと。
Boromさん情報ありがとうです。こういう小さなトラップが困るんですよね……。

portal18portal18 2014/10/04 22:11 そういえば、2013年秋(もう2014年秋ですが...)に登場した Mac OS X 10.9 Mavericks と Windows 8.1 には「游ゴシック」( http://www.jiyu-kobo.co.jp/ytl/ygf.html )なんてものも入ってきたようですね。
ヒラギノ角ゴと同じ字游工房がデザインした書体ですが、使用目的が違うためヒラギノとはいろいろ違いが出ています。(そこに関してあまり詳しくないので、詳細は上の公式サイトで...。)
ただ、Windowsで初めて字游工房デザインのフォントが搭載されたのは大きな進化かもしれません。(8.1はまだ利用者はほんの数%しかいませんが)
個人差は出ますが、Microsoftデザインのフォントよりは(特に印刷した場合は)綺麗に見えるかもしれません、参考までに。

n-yujin-yuji 2014/10/04 22:26 http://www.dtp-transit.jp/misc/web/post_1881.htmlなどでもう試みられていますね。
Windowsのフォントレンダリングの問題があり、游書体を指定するのはまだ早いかなと考えています。自分は。

miiikbalimiiikbali 2015/01/09 18:29 はじめまして。
こちらの記事を参考に自分のブログのフォントを設定させていただきました。
とても参考になりました。ありがとうございます。
後からのご報告になり誠に恐縮ですが、
他の方にも参考になると思ったのでリンクを貼らせていただきました。
(勝手に申し訳ございません。不都合等ありましたら教えてください)
どうぞ宜しくお願い致します。

portal18portal18 2015/11/30 18:15 2014/10/04 22:11 の投稿に追加。
2015年11月に登場した、Windows 10のBuild 10586.14 では、フォントレンダリングはよくなったらしいです。
しかし、自分の体感ではかなりよくなったというほどではなく、気持ち程度の修正に感じました。(レンダリングというよりはフォントのヒントの修正にたよっている?)
たしかに、いまでも、Windows用の游書体設定はまだ早い気がしました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

2003 | 11 | 12 |
2004 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 06 | 07 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 04 | 06 |