Webに使用するFONTについて

このQ&Aのポイント
  • Webのフォントについての選定について困っています。ブラウザやOSによって表示が異なることは分かっていますが、どのフォントを選ぶべきか悩んでいます。
  • 現在、Webのリニューアルをしています。しかし、フォントの選定に困っています。多くのブラウザやOSが存在するため、全てにおいて同じ表示ができるフォントを選ぶことは難しいです。
  • Webのリニューアルを進めていますが、フォントの選定に悩んでいます。ブラウザやOSの種類によって表示が異なるため、一番無難なフォントを選ぶべきか迷っています。
回答を見る
  • ベストアンサー

Webに使用するFONTについて

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

  • SEO
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

 こんばんは。素人ですが文字が好きで、ブログをつくってみたら想像以上に表示が崩れてしまい、ウェブって試行錯誤の連続だなぁ――と思っている者です。 * { font-family: メイリオ, Meiryo, 'MS Pゴシック', sans-serif; }  さて、ウェブの書体は CSS で指定していきますが、必ずしも一種類に絞る必要はありません。たとえば上記の CSS では、メイリオがあればメイリオで、メイリオがなければMS Pゴシックで、MS Pゴシックがなければ sans-serif(何らかのゴシック体)で表示されます。このように複数書体を順番に並べておけば、Vista 以降ならメイリオ、XP 以前ならMS Pゴシックと振りわけられます。 * { font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', HiraKakuProN-W3, 'MS ゴシック', monospace; }  ただし、メイリオとMS Pゴシックとでは字幅が異なるため、見た目が崩れるかもしれません。また、アップル製品には【ヒラギノ】という書体がついてくるため、メイリオを指定しても無意味です。このような点も考慮した結果、私は上記のような CSS を書いています。もちろん、拡大・縮小などでズレますが、何もしないよりはマシかと。逆にいえば、少しくらい拡大されても平気なように、ゆとりのあるレイアウトが必要なのかな――と思います。  なお、世間的には「ウェブの字なんて読めれば何でもいい」という意見が多く、質問者さんのようにこだわる方は滅多にいません。これは非常に残念なことで、ウェブが出版に追いつけない原因のひとつだと考えています。  そこで昨今では、Web フォント(下記のフォントプラスなど)や、CSS3 といった新しいレイアウト技術も始まりつつあります。もっとも、日本語は複雑なことばであるため、これらの技術は発展途上です。しかしながら、将来的には紙の書籍と同等の見た目がウェブでも保証されてほしいし、ウェブだからズレて当然といった考えも、過去のものになってほしいなと願っています。  ◆標準の日本語フォント / もうパンツはかない   http://rinrin.saiin.net/~aor/fonts/fonts  ◆font-family-スタイルシートリファレンス   http://htmq.com/style/font-family.shtml  ◆FONTPLUS|フォントプラス   http://webfont.fontplus.jp/

heron-griffin
質問者

お礼

はじめまして。このたびは非常に貴重な知識をご教授下さり。誠に有りがたく感謝しています。書いて頂いた内容は全て私にとって参考、勉強になりました。 ご自分の努力で試行錯誤しながらも生きた知識を身につけていっておられる様子が伝わります。見習いたいと思うばかりです。どうもありがとうございました。

その他の回答 (3)

  • Moonsan
  • ベストアンサー率84% (11/13)
回答No.3

ご存知の情報かもしれませんが、念のため。 モリサワ「TypeSquare」(クラウドフォント) http://www.morisawa.co.jp/font/products/typesquare/ グラフィックデザインのイメージが強い方や文字へのこだわり (ブランディング)がある会社は導入するかな、と思い一応 デモなどで見た製品です(確か今年リリ-スしたものです)。 わかりやすい解説 http://web-tan.forum.impressrd.jp/e/2012/09/03/13383 個人的には(お金を払ってまでなぁ)と思うのですが、 上記のようなこだわりがある企業さんで予算的に問題 がないなら良いのかな、と思います。 (技術的には悪くないと思うので、上記URLにあるように 今後普及していく可能性もあるとは思います) 以上、参考まで。

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

サーバーへインストールするウェブフォントという手段もありますが、表示が遅くなります・・・ ----------------- 一般的には、 無指定が一番多く、正攻法です。 次にメイリオ+複数指定で、MS Pゴシックのみ(単独)の指定はアマちゃんです。 CSSフォント指定では、複数フォントを順に指定できますので、 環境に無いフォントがあれば、次順のフォントを表示する仕様です。 なので、macユーザー用フォントも絡めて羅列すればよいです。 最後に、ゴシック指定の(sans-serif)を入れます。 但し、 メイリオ指定で、旧OSのClear Type(アンチエイリアシング)問題もありますが、 仰る通り、 メイリオをインストールするような人なのに、この問題を知らない方が少ないです。 (まあ、XPは2014年迄に一気に減るでしょうが) また、 「メイリオ 悩ましい問題」があります。 ↑↑語句で検索するとわかるでしょうから割愛しますが、 MS Pゴシック以外の問題もあり、正解はありません。 当方でのメイリオ指定の場合は、 ~~~{ font-family: "メイリオ",~,~,~,~,~,~,~,sans-serif} * html ~~~{ font-family: "MS Pゴシック";} としています。1つの手段です。 因みに、改行位置がずれる問題は、ウェブでの改行の認識が間違っています・・・ #1さんもご指摘の通り、文字サイズ変更の問題があるので、何処で改行されるかは貴方が決める問題ではないのです。 ユーザーが見やすいように変更するのです。 >只今試行錯誤、判断に苦しんでおり、 この辺の話は、その業者が十分検証しているはずですので、お任せすれば良いです。 (知らなければ、その業者への依頼は辞めましょう) 悩む必要があるのでしょうか? 悩み処が間違っています・・・ 貴方の知らないレンダリング問題でもこのような差異問題が多々あってフォント程度で悩んでいたら、これらの全ての差異を知ったら過労死しますよ。 コンテンツで悩んでください。

heron-griffin
質問者

お礼

こんにちは。早々に的確且つ詳細なコメント頂きまして誠にありがとうございます。 とても勉強、参考になる内容です。 そうですね、大げさに執拗に拘る部分でもないのかも知れませんね。プロがすべき領域にまで素人クライアントが絡んでくると、お互いにとってろくな事がありませんよね。仰る通りコンテンツが大事ですので私はそこに集中していきたいと思います。良いコメントどうもありがとうございます。

回答No.1

WEBサイトでは、OS別に利用するフォントをCSSなどでフォント指定をすれば可能なのですが、ブラウザでの「拡大」「縮小」によって横幅などがずれてしまいますので、ずれることを前提に設計をしたほうがいいと思います。 また、どうしてもフォントがもつイメージなどからフォント指定をしたい場合には、文字をPNGにて表示し、ALTタグに文字を設定するのが通常の使われ方です。

heron-griffin
質問者

お礼

御世話になります。早速のコメント、誠にありがとうございました。 なるほどユ-ザ-側での設定(拡大縮小)でも横幅がずれたりしますよね。 仰る通り「ずれることを前提に」設計をという事ですね。そうします。  全文とても参考になりました。どうもありがとうございました。

関連するQ&A

  • メイリオとMSPゴシックのフォント幅を調整したい

    現在、WebサイトのフォントにはMSPゴシックを採用しています。しかし、最近はメイリオフォントが主流ですし、それと比べてMSPゴシックはいかにも見た目が悪いです。そこで、MSPゴシックをメイリオに変えようと思っています。 しかし、その場合に問題なのが、未だに無視できない数のいるXP利用者です。彼らにメイリオでの表示は期待できませんので、彼らに対して表示されるMSPゴシックとメイリオのフォント幅の差を考慮する必要があります。 メイリオを利用できないWindowsユーザーに対してのみ、フォント幅を調整し、なるべく違和感のない形で表示する方法はありませんか?

    • 締切済み
    • CSS
  • フォントをMS P ゴシックにするべきか、メイリオにするべきか

    自分のサイトのフォントをMS Pゴシックにするべきか、メイリオにするべきかで悩んでいます。 自分のPCのOSがVistaなので、これまで当然のようにメイリオをフォントに指定していましたが、メイリオがインストールされていないXP環境のPCで私のサイトを見たところ、別のサイトを見ているかのような印象を受けてショックでした。 メイリオはデフォルトの行間や字間が広めになっているので、メイリオとMSPゴシックの両方で満足できるように表示させようと思うといろいろ苦労してしまいます。 具体的な悩みは、フォントをメイリオにするかMSPゴシックにするかで、 サイドバーの項目の、改行されたり改行されなかったりするので、この文字数なら、このくらいの幅の背景画像を使おうとか、この項目は改行されないように文字を小さくしようといったことをすると、MSPゴシックかメイリオかのどちらかでしかそれが満足できないというものです。 可読性が高いのはMSPゴシックですが、デザインがお粗末なのでできればメイリオにしたいのです。Vistaのシェアが3割にも達していないので、MSPゴシックにしたほうがいいのかもしれませんが・・・。 数の暴力ということで、MSPゴシックにするしかないのでしょうか。 これは、ネットスケープとIEのブラウザ戦争以上の問題になるという記事もありました。 http://www.ops.dti.ne.jp/~okaji/meiryo.html MSのサイトや一部のニュースサイトはメイリオを指定していますが、GoogleやYahooやほとんどのサイトがメイリオを指定していないので、それに従いMSPゴシックにしようか悩んでいます。 フォントのデザインまでこだわる部分を画像で代替させるのも手ですが、なるだけファイルサイズを小さくしたいし、なによりも面倒なのでできればテキストにしたいのです。

  • Google chromeでのフォント設定方法についてです。

    Google chromeでのフォント設定方法についてです。 先日、XP用の『メイリオフォント』をインストールし、 クロームの設定→オプション→フォント・言語の設定で、 ゴシック表示のところで、メイリオを選んで設定しました。 でも、いざ表示させると細め(小さめ)の文字が ガタガタになってしまってかなり美しくないので、やっぱり元の MSPゴシック表示に戻したいと思い、再度 クロームの設定→オプション→フォント・言語の設定で、 MSPゴシックを選択し直しました。 しかし、メイリオフォントが入ってしまっているからなのか、 フォントがメイリオ指定になっているサイトを見ると、 メイリオで表示されてしまうのです。。。。 そこで、さらにメイリオのファイルであろうmeiryo.ttcとmeiryob.ttcをFONTフォルダから 削除してみたのですが、そのとたん、そのメイリオ指定になっているサイトのページは 記号やら漢字やらの羅列だらけになり、文字化けしてしまいました。 メイリオをインストールする前までは、それらのサイトは MSPゴシックで普通に表示されていたのに・・・。 こんな場合、どうしたら元のMPSゴシック表示のみにもどるのでしょうか? どなたか解決方法をご存知でしたらお教えください。 よろしくお願いいたします。

  • メイリオフォントと,Googleのボタン

    先日,Vistaを購入しました.ふたつ質問があります. 1.ブラウザ表示フォントをメイリオにすると,MSPゴシックのときに比べて,[Google 検索]ボタンの高さが大きくなってしまい,その右となりの[I'm Feeling Lucky]ボタンがMSPゴシックのときと同じ大きさのままで表示されてしまいます([インターネットオプション]-[フォント]は[メイリオ]を指定しています).これは正常でしょうか?.それとも,設定の仕方がいけないのでしょうか?. ※XPのときには,ふたつのボタンの高さは揃っていました. 2.[インターネットオプション]-[フォント]の二箇所のフォント設定のデフォルトのフォント設定を教えてください. ※いじくっているうちに,どのフォントがデフォルトで設定されていたのかが,わからなくなってしまいました, 以上のふたつの質問です.おねがいします.

  • システムフォント置き換えについての疑問

    システムフォントをメイリオに置き換えようと思っているのですが、 Webブラウザでサイト側からMSゴシックで観覧する事を強制された場合、 (それを了承する設定にしていたとします) MSゴシックではなく、メイリオで観覧してしまうのでしょうか? 同じ日に2つ質問を立ててしまい申し訳ありません。

  • 日本語フォント、メイリオについて

    CSSが使えないので、HTMLだけでホームページを作っています。今まで閲覧者のブラウザのデフォルトフォントに合わせるために、フォント指定はしませんでした。 最近、今まで使っていたIE9が勝手にIE10にアップデートされてしまいました。(迷惑な話です) ホームページを開いてみると、今までのデフォルトのMSPゴシックとは違う見づらいフォント表示になってしまいました。(新しいIE10でもデフォルトはMSPゴシックです。) どうにも見づらいので(なぜ同じIEで違うのでしょうね?)、ホームページのフォントをメイリオに指定しましたら(<font face="メイリオ">)、 とても見やすい表示になりました。 心配になったのは、日本語フォントのメイリオが日本語バージョンPC(Windows、Mac)に普及しているかどうかです。もし入っていないPCだと正しく表示されません。(どんな表示になるのでしょうね?) 日本語フォント、メイリオは普及しているのでしょうか?

  • web表示フォントの選択ついて

    OSはWindows98/SEの環境です。 インターネットオプションの設定で、ウェブ表示フォントの選択は、MSP(ゴシック、明朝)とMS(ゴシック、明朝)のどちらがノーマルでしょうか? ちなみに、私の設定はテキスト入力は、MS(等幅フォント)で、ウェブ表示はMSPフォントになっていました。(初期設定そのまま) 実は、ホームページを創るのですが、htmソースでテーブルのピクセル数を指定した場合に、MSPとMSではフォントのピッチ数が違うために、実際のウェブ表示に崩れが生じてしまいます。どちらの表示に合わせてソースを書くべきでしょうか?ご教授下さい。

  • font-familyはどれを優先すべき?

    素人ですがホームページを作成しています。 現在主流フォントとしては、 MSPゴシック,メイリオ,ヒラギノ角ゴなどありますが、 みなさんはどのフォントをベースとして組んでいますでしょうか? というのも、OSごとで表示フォントは変わってくると思うのですが、 表示フォントが違うと当然文字間など細かい所が異なってきますよね。 ですが、私はサイト作成についてはレイアウト重視の人間なもので、 表示フォントの違いによる予期せぬ改行やレイアウト崩れなどがどうしても許せません。 しかしそうなった場合は、 「iOS」⇒ヒラギノ角ゴ 「Vista以降」⇒メイリオ 「XP以前」⇒MSPゴシック これのうちのどれかを捨てて、どれかを取るという事になると思うのですが、 ここはやはりユーザー数が最も多いであろう「Vista以降」を基準として、 サイト作成(レイアウト構成)もして行くべきでしょうか? 割り切って「表示フォントが違うんだから多少は仕方ない」で済めば良いのですが、 ちょっとそれでは私のポリシー違反になってしまう為、質問させて頂いた次第です。 皆さんのご意見をお聞かせ頂けないでしょうか。 よろしくお願い致します。 P.S このフォントならどのOSにも入っているから崩れない的な物があれば、 私の完全な勉強不足なので、その時には是非ご指摘を頂きたく思います。

    • ベストアンサー
    • HTML
  • メイリオフォントでExcelの印刷が切れない方法

    Windows7、Excel2010を使用しているものです。 Excelの文書を作っている時によくある、「画面ではおさまっているけど印刷するとはみでる」「画面にはおさまるが印刷プレビューにするとはみでる」現象が、MSPゴシックからMSゴシックにフォントを変えるとあらかた解消されるというのは先日知ったのですが、メイリオフォントをどうしても使いたいときの、そのはみでる件の解消法はないでしょうか。(メイリオフォントがもっている中でも結構視認性がいいのでメイリオフォントを使いたいのです) どなたかアドバイスお願いいたします。

  • 富士通VISTAでWINNDOWS メールを使っていますが、最近、フォ

    富士通VISTAでWINNDOWS メールを使っていますが、最近、フォントがMSPゴシックに固定されて変更できません。設定はメイリオにしていますが、本文を入力した途端MSPゴシックに変わってしまいます。 他のフォントにしてもMSPゴシックになってしまいます。 ワードのフォントは自由に変換可能です。 メイリオが好きです。 どなたか教えてください!              rekobaba

専門家に質問してみよう