文字サイズとコンテンツの横幅

文字サイズとコンテンツの横幅に関するご質問を、モカさまがCSS Nite Vol.3にお寄せくださいました。

例えばフォントの大きさはピクセルで絶対指定すればある程度そろうのですが、相対サイズだと見栄えがかなり違います。
　アクセシビリティーを考えると相対サイズの方が良いのでしょうが。
（私は14pxにすることが多いです）

また、ページの幅もモニターやブラウザーのバーの設定などを考えると、どれくらいをターゲットにすれば良いか迷います。
（750px固定にしています）

最初のご質問に関し、まず明確にしておきたいのですが、px（ピクセル）は相対単位（画面解像度に対して相対的）です。相対単位にはpxのほかにem（エム）とex（エックス）などがあります。一方、絶対単位にはin（インチ）やcm（センチメートル）、mm（ミリメートル）、pt（ポイント）、pc（パイカ）があります。

仰るとおり、Webアクセシビリティに配慮するならば、絶対単位よりも相対単位や%値、キーワードで文字サイズを指定するほうが良いでしょう。ただしpx単位で指定した場合、それが相対単位であるにもかかわらず、広く普及しているWindows版Internet Explorerにおいて文字の拡大/縮小がブラウザで操作できない点は、注意が必要です。

なお、上記WinIEにおける問題は、初期設定のままでブラウザを使用しているユーザに対するものです。「インターネットオプション」から「全般」タブにある「ユーザー補助」の設定を開き、「Webページで指定されたフォントサイズを使用しない」の項を有効にしている場合においては、px単位でサイズ指定された文字であっても拡大/縮小は可能です。

次にコンテンツの横幅についてですが、どの程度の値が好ましいかはサイトごと、コンテンツごとに異なると思います。

WebデザイナーやWeb開発者らに広く読まれているオンラインマガジン「A List Apart」が、4カラム構成かつ平均的な値よりも広いコンテンツ幅でもって昨年8月にリニューアルしたのは記憶に新しいでしょう。また、「Web標準デザインテクニック即戦ワークブック」の著者であるDan Cederholm氏のサイト「SimpleBits」では、コンテンツ幅を固定長とするかブラウザウィンドウに合わせるかの選択をユーザに委ねています（デフォルトは固定）。

これらの例を挙げるまでもなく、サイトの主要なターゲットとするユーザの閲覧環境において最適なビジュアルデザインや可読性、あるいは選択肢を提供するのが一般的ではないでしょうか。であればこそ、コンテンツの横幅について（固定と可変のとどちらが好ましいかも含め）一義的に論ずることは難しいと考えます。

なお、画面解像度とウィンドウサイズがイコールでないとはいえ、どの程度のユーザがどれぐらいの解像度を利用しているかは、アクセスログ解析などを通じて把握することが可能です。モカさまは750px固定にされているとのことですが、その指定がモカさまのサイトのユーザにどの程度フィットしているかは、一度お調べになっても良いかもしれません。

コメント

> Windows版Internet Explorerにおいて
> 文字の拡大/縮小がブラウザで操作できない

「Webページで指定されたフォント サイズを使用しない」
で出来るようになったと記憶していますが、違いましたっけ。

通りすがりさま、コメントありがとうございます。「インターネットオプション」の「ユーザー補助」を、ご指摘のように設定しているユーザーの割合はそう多くないと予想される意味では、px単位の使用に注意が必要である点に変わりはありませんが、確かに拡大/縮小ができるようにはなります。この点を踏まえ、本文に加筆いたします。ご指摘ありがとうございました。

このサイトですが、私の環境では本文文字が小さすぎます。FirefoxやMacユーザーの人は概ね同様に小さすぎると感じ、読む気をおこさないでしょう。（でも私はファンなので読んじゃいますけど・笑）

確かにIE6以下の仕様では、
・xml宣言のあるXHTMLを理解しない（互換モードとなる）
・x-smallを互換モードで表示すると1.29倍になる
・px、pt、cm、mmなど一部の相対及び絶対単位を用いると文字サイズ変更が困難
となっています。
しかし、その不具合…いや仕様に対する解が「あらかじめ文字を小さく指定しちゃえ！」ってのは如何なものでしょうか。

私は、JavaScriptやphpなどで文字サイズ変更手段を提供する方が自然だと思います。
また、Web標準の観点からみても、出力デバイスの物理的特長をあらかじめ想定してピクセルデザインしたサイトは、文字サイズもpx指定するのが自然だと思います。
もちろん、セキュリティの観点からJavaScriptを使いたくない人もいるでしょう。しかし、そうではない多くの人はその人の為にデメリットを甘んじて享受しなければならない点は見過ごせません。
また、IE7以降がどーなるか知りませんが、もしxml宣言付のXHTMLをサポートするようになれば、サイト上の文字は概ね0.78倍になります。IE7へのアップデートはwindowsの自動アップデートでなされるそうですが、そうするとまた大混乱が起きるのではないでしょうか？

hal*さま、コメントありがとうございます。まず、当サイトにおける文字サイズについてですが、決して「IE6以下の仕様」に対する解として「文字サイズを小さく」指定しているわけではございません。

すべての人や閲覧環境にフィットした（読みやすい）文字サイズを指定することは極めて困難であると思います。読みやすさは主観的なものであり、制作者側がどれだけ大きく指定したつもりであっても、ある人にとっては不十分であったり、その逆の状況もあると思います。

文字サイズにおいて一義的に最適解を提供することが困難であるからこそ、Web標準を利用して文書の構造と見た目を可能な限り分離し、文字サイズはスタイルシートで制御しています。また、ユーザーシェアの高いIE6以下で文字サイズの変更に難があるpx単位は、文字サイズ指定に利用していません（%とemを併用中）。

「ピクセルデザインしたサイトは、文字サイズもpx指定するのが自然」とのご意見は一理ありますが、しかし高いシェアを誇るIE6以下に対する配慮としてpx単位を利用しないというのも十分理にかなった考え方だと思いますし、また実際そのように指定しております。

次にIE7に関してですが、IE6以下でxml宣言の存在によってDOCTYPE宣言の内容にかかわらず後方互換モードでレンダリングされてしまっていた問題は解消されている模様です。自動アップデートによる急速なIE7の普及により混乱の起こる可能性はありますが、しかし既にベータ版が一般に提供されていることもあり、対策を講じ始めているサイトもあることでしょう。今後Web制作業界内でも盛んにそのインパクトが懸念あるいは喧伝され、発生し得る混乱を最小限に止めようとする動きは加速すると思います。

ご指摘ありがとうございました。

気になったのでこのサイトのスタイルシートを拝見させて頂きました。なるほど、フォントサイズについてはx-smallなどのキーワード指定ではなくem単位での指定となっていますので、IE互換/標準モードの違いは問題にならないかもしれません。また、IE6以下に対する配慮としてpx単位を用いないことも理にかなった一つの解でしょう。

しかしながら、本文を0.8emとするのは明らかな不合理で、アクセシビリティに配慮するのであれば本文のフォントサイズは1em、100%、mediumのいずれかにすべきです。これほどシンプルな最適解はありません。

「すべての人や閲覧環境にフィットした（読みやすい）文字サイズを指定することは極めて困難」というのはもはや業界内の常套句になっているのかもしれませんが、そんなおかしな話があるわけありません。老若男女、広く読まれる新聞や文庫本の文字サイズが各社殆ど変わらないのがその証です。

「Webの閲覧環境は様々だ」とは言っても、それほど極端な違いがあるわけではありません。現在のところ、ゴシックに使用されるフォントはMSPとヒラギノの二種類だけ想定すれば殆どの人にマッチしますし、解像度も96dpiを想定すれば、これまた大多数の環境にフィットします。

そのような大多数の環境において0.8emは弊害を巻き起こします。例えば17inch/SXGA/WinIE6の環境下では、1emは約12ptで表示されます。日本語フォントを表示する場合、大多数の人にとってこれが大きく感じられることは、新聞や活版印刷の文字サイズから客観的に説明がつきます。そこで一般的なユーザーはブラウザの文字サイズを小に設定するという予測が立ちます。なぜなら、新聞や文庫本の文字サイズと、目との距離の比例関係から、「IE6の文字サイズ小」は「読みやすい日本語文字サイズ」の近似値だからです。
ところが、そんな一般的な視力を持ち合理的な設定をしたユーザーは0.8emの本文であるサイトに出会うとわざわざ設定を変えなければなりません。ところが人間というのは小さな文字を見たときにはまず、反射的に目を細めて見ようとしたり、顔を近づけてみようとしたりしてしまいます。これは非常に視力の低下につながります。

また、そのような経験によって自然とユーザーが「自分にあった文字サイズ」を設定する事が不便であると学習してしまい、かくしてブラウザの文字設定は16px(中)にする事が強要されようになります。これは逆に視力の低下した人にも同様で、文字サイズ大と設定していた人が1.2emのサイトに出会う事で自然と文字サイズを中に設定せざるを得なくなります。

そのような弊害を踏まえると、私は本文を1emにしない合理的な理由を思いつきません。

誤解のないように申し上げますと、私はミツエーリンクスという企業はWeb標準、アクセシビリティに配慮した、業界の中でも優れた企業であると思っています。しかしながら、そのような先端の企業にあってもフォントサイズの正しい選択が為されていないという現実は、日本のWeb制作業界全体のレベルの低さを示していると考えます。Web標準に取り組む優れた企業こそ、これまでの業界の悪しき常識から離れ、よりよいWebづくりを目指し、業界全体をリードして行って欲しいと願っております。

hal*さま、コメントありがとうございます。

当サイトがWeb標準準拠の一環として見た目の指定を可能な限りCSSで制御するよう再構築したのは2004年4月のことです。その際、ビジュアルデザインの刷新は行わず、単純に文書構造と見た目の切り分けを行うというかたちで実施しました。

従い、字サイズの指定についても、2004年4月以前と変わらぬ文字サイズの指定が必要となりました。文字サイズを変更してしまうと、スタイルシートの適用した状態で他のビジュアル要素、たとえばヘッダやフッタ、画像化された見出し、ナビゲーション類とのバランスが、ビジュアルデザイナーの意図したそれと異なってしまうからです。そのうえで、WinIEの挙動なども勘案のうえ、今日に至るまで使用し続けている文字サイズ指定を行うに至りました。

次回リデザイン時には、本文の文字サイズ指定の見直しも含めて再検討したいと思います。