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

質問

素人ですがホームページを作成しています。

現在主流フォントとしては、
MSPゴシック,メイリオ,ヒラギノ角ゴなどありますが、
みなさんはどのフォントをベースとして組んでいますでしょうか？

というのも、OSごとで表示フォントは変わってくると思うのですが、
表示フォントが違うと当然文字間など細かい所が異なってきますよね。

ですが、私はサイト作成についてはレイアウト重視の人間なもので、
表示フォントの違いによる予期せぬ改行やレイアウト崩れなどがどうしても許せません。

しかしそうなった場合は、

「iOS」⇒ヒラギノ角ゴ
「Vista以降」⇒メイリオ
「XP以前」⇒MSPゴシック

これのうちのどれかを捨てて、どれかを取るという事になると思うのですが、
ここはやはりユーザー数が最も多いであろう「Vista以降」を基準として、
サイト作成（レイアウト構成）もして行くべきでしょうか？

割り切って「表示フォントが違うんだから多少は仕方ない」で済めば良いのですが、
ちょっとそれでは私のポリシー違反になってしまう為、質問させて頂いた次第です。

皆さんのご意見をお聞かせ頂けないでしょうか。

よろしくお願い致します。

P.S
このフォントならどのOSにも入っているから崩れない的な物があれば、
私の完全な勉強不足なので、その時には是非ご指摘を頂きたく思います。

回答No.5

tracer · ベストアンサー

否定的な回答が多いようですが、私は質問者さんの意見に賛成です。
そもそもhtmlは未だに不完全なものですし、不完全であることは有名な話です。従って現在のhtml仕様に合わない思想だからといって間違いというわけではありません。前の回答にもあったように、webとdtpは別ものですが、webはdtpの思想を土台にしています。美しいタイポグラフィや文字組はユーザーの理解とイメージの向上に働きます。webだけを見ている方々は特に、タイポや文字組の重要性、もしくはその存在すら知らずにweb仕様を口にする傾向があります。web上で洗練された文字組に出逢えないのは、必要ないからではなく、htmlやcssに機能が備わってない。つまりは単に不完全な状態だからです。

とは言え、私は私なりにフォントに最適なcssを設定します。
javascriptやphpを用いると、htmlやbodyタグにエージェント情報のクラスを設定することができます。
例えばiOSでアクセスした場合は、自動でclass="ios"が付加されます。そのクラスを用いるとエージェントごと、つまりはフォントごとにcssを設定することが可能です。この方法であれば特別にユーザビリティを低下させることもないはずです。

ちなみに現在開発中のwebkit2は縦書きに対応したりなど、いろいろと面白そうですよ。

お礼

質問の仕方が悪かったのか意図せぬ回答を多数頂いたようですが、やはり皆さんが仰るように私の技術力不足と言う事は否めませんね。

ただ、やはり訪問者にはベストな物を提供したいというのが素人ではありますが制作者の私のポリシーなもので…。

HTMLの不完全な部分を自分の技術で補っていくと言う形が大切なようですね。回答者No.1の方も仰っているように、エージェント情報を読むphpなどを勉強してみたいと思います。

有難うございました。

回答No.4

神崎 渉瑠（@taloo）

>ですが、私はサイト作成についてはレイアウト重視の人間なもので、
>表示フォントの違いによる予期せぬ改行やレイアウト崩れなどがどうしても許せません。

>割り切って「表示フォントが違うんだから多少は仕方ない」で済めば良いのですが、
>ちょっとそれでは私のポリシー違反になってしまう為、質問させて頂いた次第です。

DTP出身の方に、そういう考えをされている方が多いですね。
中にはセンチメートル基準で表示したいという人も約1名いらっしゃいましたが、、、（画面に定規を当てて測定する）

Webデザインに向かない性格です。

WebデザインをやめてDTPデザイナーに転職（再転職）するか、
PDFのフォント埋め込みで作成し、PDFだけでページを見てもらうように作る、
すべてを画像にすることをおすすめします。
（ウェブデザインとしては最悪な作り方と言われている方法ですが、
ポリシーを優先するならそれがもっとも適した方法だと思います。）

ウェブデザインとしてもっとも良い方法は、制作者がフォントを指定しないこと。
閲覧状態を決めるのは閲覧者自身です。

それでも指定したい場合は、いくつかの候補を挙げてどれかになれば良い程度です。
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

和風を表現するために草書体などを指定することはありますが、
でなければ、ここまで限定的にしなくてもせいぜいゴシック体と明朝体を区別する程度、
font-family: sans-serif;
で十分だと思います。
Dreamweaverならクリック１つで上記のが出てくるので、そのまま使ってますけど。

回答No.3

ORUKA1951

主流のフォントなんてありません。
ところで、なぜあなたはHTMLという方式を選んだのですか？
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　あなたが望もうと望まなかろうと、あなたのサイトを訪問するのは、ブラウザだけではありません。i-phone、携帯電話、点字端末、読み上げソフト、そして、検索エンジン・・

　また、視力の弱い人も色覚異常の方もいらっしゃるでしょう。そのためフォントサイズを大きくしたり、コントラストを大きくしたり、スタイルシートや画像を読み込まない状態で閲覧される人もいるでしょう。私自身、読みにくいサイトではスタイルシートを解除することも「しばしば」あります。また、Ctr + ＋ でフォントサイズを大きくして閲覧することも多いです。

　HTMLは、ワープロ ( http://ja.wikipedia.org/wiki/%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5 )やDTP ( http://ja.wikipedia.org/wiki/DTP )とはまったく異なる目的で設計されています。それだからこそ、ここまで普及し利用されているのです。もし、目的が「レイアウト重視」なのでしたら、HTMLではなく『特定の環境に左右されずに全ての環境でほぼ同様の状態で文章や画像等を閲覧できる特性を持って ( http://ja.wikipedia.org/wiki/PDF )』いるPDF ( http://ja.wikipedia.org/wiki/PDF )を利用すべきです。

回答No.2

BellBell

＞ですが、私はサイト作成についてはレイアウト重視の人間なもので、
＞表示フォントの違いによる予期せぬ改行やレイアウト崩れなどがどうしても許せません。
Web制作には向いていない考え方ですね。

その考えを極端化すると
『なに？視力が悪いから、フォントサイズを大きくして俺のサイトを見ているだと!!そんな奴は俺のサイトに来るな!!』
と言いかねない人になってしまいます。

しかもフォントの僅かな違い程度でレイアウト崩れが発生するような自分の技術力不足を棚に上げて、ですからね。

ま、厳しい言い方ですが。

回答No.1

notnot

そんなことを気にするのであれば、User-Agent を見てOSを判断して、出力するHTMLやCSSを書き換えるべきでしょうね。
素人と名乗る割におかしな事を気にする物だというのが正直な感想です。