Webに使用するFONTについて

Question

現在会社のWebをリニュ－アル製作中です。主な製作作業自体はプロの方に行ってもらっております。そこで、これ（Web）に使用するFONTについて只今試行錯誤、判断に苦しんでおり、部外からも色々なご意見をお聞きし勉強、参考にしたく質問させていただきます。
Webは閲覧者のブラウザの種類、バ－ジョン或いはOSの種類等の環境によってモニターに表示される見え方が異って来ることは何となく知っていたのですが、その差異が場合によってはかなりのレベルになるという事を思い知りました。例えばFONTが「MSゴシック」の場合、「MSPゴシック」の場合、「メイリオの場合」等で前記のブラウザやOSによって部分的に改行位置や表示に違いが出てくるようです。従って製作段階で細かな部分まで（改行位置や見た目のバランス、枠の大きさ」等々を）必死で綺麗に調整しても、結局ブラウザ等の環境によってはこの努力が無駄なものになります。こういったことはＷｅｂ製作の業界では当然のテ-マでしかしなかなか決定的な対策がない厄介な部分らしいのですが、新しくするＷｅｂなので今後を見据えた最善な方法を施工しておきたいと思うのです。
現在多くの種類のブラウザやそのバ－ジョンそしてＯＳが存在するので、全てにおいて同じ表示をするように調整したり（製作段階で）確認作業を取り入れていてはいくらでも手間と工賃がかかって仕方ないので有る程度「無難」な仕様にしておこうとした場合、色々と調べるとやはり基本セオリ－的には「ＭＳＰゴシック」又は最近では「メイリオ」を選定するという事になるようなので、一応「メイリオ」を選定してみたのですが、確かにこのＦＯＮＴは綺麗で良いのですが、問題はＷｉｎ　ＸＰユ－ザ－でＩＥ8以前を使用しているユ－ザ－なのです。メイリオはＸＰには標準装備されていないのでメイリオを本来の容で見えるようにしようとすると自分でメイリオＦＯＮＴをＯＳにインストしなければなりません。おまけにそれをしただけでは見た目が非常に荒く汚いため、ＯＳの「画面デザインをＣｌｅａｒＴｙｐｅに」設定変更しなければなりません。ここまでしてやっとＸＰユ－ザ－は「メイリオ使用のＷｅｂ」を正しい容で見ことが出来る訳ですが、実際現実的にメイリオという言葉自体一般の人は知らないでしょうし、ましてやＦＯＮＴをいんすとして、設定して・・・というような事を一般的ユ－ザ－の大多数はしない/できないと思います。ＸＰは今や古い部類のＯＳなので今後を見据えたＷｅｂにすると言う事であれば、この際二の次と捉えるという考え方もあるかも知れませんが、しかしＸＰユ－ザーはまだまだ多いように感じますので、これらのユ－ザ－の事を無視できないのではとも思い、悩んでいます。実際最前線の（Ｗｅｂ製作）現場では使用ＦＯＮＴとしてメイリオはどのような需要、というか標準化しているのでしょうか？　やはりおとなしく無難に「ＭＳＰゴシック」を使ったほうが良いでしょうか？　
アドバイス頂けるととても助かります。　宜しく御願い致します。

Katsu_Kaiz · Accepted Answer

こんばんは。素人ですが文字が好きで、ブログをつくってみたら想像以上に表示が崩れてしまい、ウェブって試行錯誤の連続だなぁ――と思っている者です。

* {
font-family:
メイリオ, Meiryo,
'ＭＳ Ｐゴシック',
sans-serif;
}

さて、ウェブの書体は CSS で指定していきますが、必ずしも一種類に絞る必要はありません。たとえば上記の CSS では、メイリオがあればメイリオで、メイリオがなければＭＳ Ｐゴシックで、ＭＳ Ｐゴシックがなければ sans-serif（何らかのゴシック体）で表示されます。このように複数書体を順番に並べておけば、Vista 以降ならメイリオ、XP 以前ならＭＳ Ｐゴシックと振りわけられます。

* {
font-family:
メイリオ, Meiryo,
'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
HiraKakuProN-W3,
'ＭＳ ゴシック',
monospace;
}

ただし、メイリオとＭＳ Ｐゴシックとでは字幅が異なるため、見た目が崩れるかもしれません。また、アップル製品には【ヒラギノ】という書体がついてくるため、メイリオを指定しても無意味です。このような点も考慮した結果、私は上記のような CSS を書いています。もちろん、拡大・縮小などでズレますが、何もしないよりはマシかと。逆にいえば、少しくらい拡大されても平気なように、ゆとりのあるレイアウトが必要なのかな――と思います。

なお、世間的には「ウェブの字なんて読めれば何でもいい」という意見が多く、質問者さんのようにこだわる方は滅多にいません。これは非常に残念なことで、ウェブが出版に追いつけない原因のひとつだと考えています。

そこで昨今では、Web フォント（下記のフォントプラスなど）や、CSS3 といった新しいレイアウト技術も始まりつつあります。もっとも、日本語は複雑なことばであるため、これらの技術は発展途上です。しかしながら、将来的には紙の書籍と同等の見た目がウェブでも保証されてほしいし、ウェブだからズレて当然といった考えも、過去のものになってほしいなと願っています。

◆標準の日本語フォント / もうパンツはかない
　　http://rinrin.saiin.net/~aor/fonts/fonts
　◆font-family－スタイルシートリファレンス
　　http://htmq.com/style/font-family.shtml
　◆FONTPLUS｜フォントプラス
　　http://webfont.fontplus.jp/

Moonsan · Answer

ご存知の情報かもしれませんが、念のため。

モリサワ「TypeSquare」（クラウドフォント）
http://www.morisawa.co.jp/font/products/typesquare/

グラフィックデザインのイメージが強い方や文字へのこだわり
（ブランディング）がある会社は導入するかな、と思い一応
デモなどで見た製品です（確か今年リリ－スしたものです）。

わかりやすい解説
http://web-tan.forum.impressrd.jp/e/2012/09/03/13383

個人的には（お金を払ってまでなぁ）と思うのですが、
上記のようなこだわりがある企業さんで予算的に問題
がないなら良いのかな、と思います。
（技術的には悪くないと思うので、上記URLにあるように
今後普及していく可能性もあるとは思います）
以上、参考まで。

naokita · Answer

サーバーへインストールするウェブフォントという手段もありますが、表示が遅くなります・・・

-----------------
一般的には、
無指定が一番多く、正攻法です。
次にメイリオ＋複数指定で、ＭＳ Ｐゴシックのみ（単独）の指定はアマちゃんです。

CSSフォント指定では、複数フォントを順に指定できますので、
環境に無いフォントがあれば、次順のフォントを表示する仕様です。
なので、macユーザー用フォントも絡めて羅列すればよいです。
最後に、ゴシック指定の（sans-serif）を入れます。
但し、
メイリオ指定で、旧OSのClear Type(アンチエイリアシング)問題もありますが、
仰る通り、
メイリオをインストールするような人なのに、この問題を知らない方が少ないです。
（まあ、XPは2014年迄に一気に減るでしょうが）
また、
「メイリオ　悩ましい問題」があります。
↑↑語句で検索するとわかるでしょうから割愛しますが、
ＭＳ Ｐゴシック以外の問題もあり、正解はありません。

当方でのメイリオ指定の場合は、
～～～{ font-family: "メイリオ",～,～,～,～,～,～,～,sans-serif}
* html ～～～{ font-family: "ＭＳ Ｐゴシック";}
としています。１つの手段です。

因みに、改行位置がずれる問題は、ウェブでの改行の認識が間違っています・・・
#1さんもご指摘の通り、文字サイズ変更の問題があるので、何処で改行されるかは貴方が決める問題ではないのです。
ユーザーが見やすいように変更するのです。

＞只今試行錯誤、判断に苦しんでおり、
この辺の話は、その業者が十分検証しているはずですので、お任せすれば良いです。
（知らなければ、その業者への依頼は辞めましょう）

悩む必要があるのでしょうか？
悩み処が間違っています・・・　貴方の知らないレンダリング問題でもこのような差異問題が多々あってフォント程度で悩んでいたら、これらの全ての差異を知ったら過労死しますよ。
コンテンツで悩んでください。

dolphin1016 · Answer

WEBサイトでは、OS別に利用するフォントをCSSなどでフォント指定をすれば可能なのですが、ブラウザでの「拡大」「縮小」によって横幅などがずれてしまいますので、ずれることを前提に設計をしたほうがいいと思います。

また、どうしてもフォントがもつイメージなどからフォント指定をしたい場合には、文字をPNGにて表示し、ALTタグに文字を設定するのが通常の使われ方です。

Webに使用するFONTについて

こんばんは。

ご存知の情報かもしれませんが、念のため。

サーバーへインストールするウェブフォントという手段もありますが、表示が遅くなります・・・

WEBサイトでは、OS別に利用するフォントをCSSなどでフォント指定をすれば可能なのですが、ブラウザでの「拡大」「縮小」によって横幅などがずれてしまいますので、ずれることを前提に設計をしたほうがいいと思います。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　こんばんは。